Creating a focus + context bar chart in JavaScript

posted in: Uncategorized | 0

Over the past week I have been building a focus + context bar chart in JavaScript. I searched several alternatives on the Internet that would achieve the desired functionality. A focus + context bar chart (also called master + detail or “brushing” chart) allows a smaller bar chart to select the range for the bigger one. In other words, one bar chart selects the X-domain range and the other shows data. As simple as this may seem, I came across only a few good examples:

Most charting libraries would attempt to plot all the data without filtering. This is not a problem for small datasets, but degrades performance when dealing with large datasets. Libraries such as crossfilter (created by Square) enable fast access to large datasets, but it does not provide rendering capabilities. Dimensional Charting takes the best of both worlds: it build upon D3.js and crossfilter. Its website provides an excellent example of its capabilities, which you should check out.

Since I only wanted to reuse one of the charts, I extracted the focus and context with brushing example.

Here is the source code:

Download Gist from GitHub

UPDATED January 28, 2014: Added a link to a GitHub Gist.