Data Visualization: dc.js/d3.js

Posted on Wed 11 July 2018 in posts

d3.js has been the data visualization gold standard for good reason since it's creation in 2011 by Mike Bostock and company. It's allowed practitioners to make elegant and stunning designs all the while proving to be flexible and adaptable to future technologies.

With the growing popularity of portable notebook designs like jupyter, Mike Bostock and d3 have answered the call with Observable, further proving that d3 is still a heavy weight among new and emerging technologies.

A new adaptation to d3, dc.js has made charting and dashboards a bit easier without sacrificing d3 quality. click on the picture below to view an interactive dc version.


Why dc?

  • Quick, straight forward.
  • Native crossfilter support adds fast interactivity between multiple visualizations.

Less fuss

It's true, most of what can be done in dc can be done in d3. But because dc is catering to a charting specific crowd, some of the attributes that make up chart specific visualizations has been streamlined.

For example, looking at the two code snippets below, the block on the right is d3 and is solely for generating the x and y axes. The code block on the left is dc and is specific to the generation of the entire line graph. Some flexibility may be sacrificed but instead of fussing around with the placement of the axis in general d3, dc just does it for you.


Crossfilter support

In addition to d3 quality visualizations in less time, dc also has native support for Crossfilter which adds awesome interactivity to dashboards. Filter Demo

At the end of the day, crossfilter is what really makes dc visualizations sing. Crossfilter allows multidimensional filtering of large data sets by isolating subsets through dimensions and groups. Dimensions often represent a particular variable in the data set but can also be combinations of variables. png Grouping a dimension aggregates the data according to the dimension specified (below is how the dateDimension was aggregated post group function). png


If you love d3 but find some of the tasks to be too time consuming, dc.js maybe a good choice. For those that don't want to trouble themselves with learning another language, bqplot maybe a great alternative.

In [ ]: