Crossfilter is a JavaScript library initially designed by Square to explore large multivariate datasets in a web browser. It basically allows you to create sorted indexes and feed them to a charting library like D3, and enable the user to filter by clicking and dragging, even when sifting through 200.000 rows in a 5MB file:
(go ahead, you can play with it. Click and drag on any of the charts to perform a live filtering of the dataset)
The process to create these charts is relatively easy:
1. Load the data.
2. Define the dimensions with crossfilter.
3. Create the charts with D3.
4. Write the event code to respond to clicks and filters.
The main challenge of using crossfilter is that you have to spend quite some time fighting engaging D3 to make the charts respond to filter changes and user clicks. These charts have to be wired together, so when you click on one, the others respond to the action. The JavaScript code for the chart above is about 300 lines and was made by clever guys who work at Square.
There’s also the question of reusability. How much code would we have to write –and maintain– if we wanted to adapt any of these charts to another visualization?
A lot!
This is the main problem with using D3.js as a charting library and doing everything by hand. The development and testing of a single non-trivial dashboard could take weeks, if not months.
You know what would be ideal? To have a charting library that allowed us to use large datasets with crossfilter and, at the same time, enabled us to create reusable charts that we could easily plug in wherever we want.
That’s exactly what dc.js does. Here I’m loading the same 5MB, 200.000 records file, and dealing with it in only 121 lines of un-optimized JavaScript.
(click and drag on any of the charts to filter the data)
This is the same set of charts, but done in a much simpler, faster and expressive way.
Take a look at the samples they have in their site, like this interactive Twitter dashboard or this stock picker.
dc.js performs the dirty work of linking the charts together, so when we click on a chart, the other charts in the group respond automatically, without writing any additional code. Magic!
