Book Image

Mastering D3.js

By : Pablo Navarro Castillo, Pablo Navarro Castillo
Book Image

Mastering D3.js

By: Pablo Navarro Castillo, Pablo Navarro Castillo

Overview of this book

Table of Contents (19 chapters)
Mastering D3.js
About the Author
About the Reviewers

Selecting a range with brushing

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

Creating the area chart

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) {