In this section, we will create an area chart to display stock prices and use brushing to allow the user to select an interval and get additional information about that time interval.
Selecting a time interval with brushing
We will use the time series of the prices of the AAPL stock, available as a TSV file in the D3 examples gallery. The file contains the date and closing price for the date, covering almost 5 years of activity, as shown in the following code:
date close 1-May-12 582.13 30-Apr-12 583.98 27-Apr-12 603.00 26-Apr-12 607.70 ...
We begin by creating the structure of a reusable chart; we will add the width, height, and margin as the chart attributes, and add their corresponding accessors. The complete code is available in the chapter05/02-brushing.html file. In the charting function, we initialize and set the size of the svg element as follows:
// Chart Creation
function chart(selection) {
selection.each(function...