Introduction to dc.js

The following post is a portion of the D3 Tips and Tricks book which is free to download. To use this post in context, consider it with the others in the blog or just download the the book as a pdf / epub or mobi .

----------------------------------------------------------

Why, if we've just explored the benefits of crossfilter are we now introducing a completely different JavaScript library (dc.js)?

Well, crossfilter isn't a library that's designed to draw graphs. It's designed to manipulate data. D3.js is a library that's designed to manipulate graphical objects (and more) on a web page. The two of them will work really well together, but the barrier to getting data onto a web page can be slightly daunting because the combination of two non-trivial technologies can be difficult to achieve.

This is where dc.js comes in. It was developed by Nick Qi Zhu and the first version was released on the 7th of July 2012.

Dc.js is designed to be an enabler for both libraries. Taking the power of crossfilter's data manipulation capabilities and integrating the graphical capabilities of d3.js.

It is designed to provide access to a range of different chart types in a relatively easy to use fashion. It is more limited in the range of options available for graphical design in this respect than d3.js, but the simplicity that it provides for creating pages using crossfiltered data is a real benefit if you're anything like me and need all the help you can get.

The different (generic) types of chart that dc.js supports are

• Bar Chart
• Pie Chart
• Row Chart
• Line Chart
• Bubble Chart
• Geo Choropleth Chart
• Data Table

All these examples come with a range of options which we will cover in greater depth in later sections.

My initial sources of information for developing the examples here came primarily from;

• Nick Zhu's examples
• Rusty Klophaus' blog post on crossfilter
• Eamonn O'Loughlin's blog post on dc.js

Bar Chart

This is a standard bar chart.

Pie Chart

This is a standard pie chart. The examples below are from one of Nick Zhu's dc.js example pages.

Row Chart

The row chart is a horizontal version of a bar chart, but with the ability to represent discrete values and to be able to select them for filtering by clicking on them. The example below is from one of Nick Zhu's dc.js example pages

Line Chart

Standard line chart.

Bubble Chart

The bubble chart is a derivative of a scatter plot with control over x axis position, y axis position, bubble radius and colour.

Geo Choropleth Chart

A Choropleth map is one where areas are shaded or patterned in proportion to the measurement of a variable being displayed on the map, such as population density or per-capita income. The example below is from one of Nick Zhu's dc.js example pages

Data Table

A data table is a simple table made up of data elements derived from the information loaded.

The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).