What is dc.js?

Updated

dc.js is a JavaScript charting library for building data-driven, reactive charts in the browser and on mobile devices. It is the right tool when you need to explore large, multi-dimensional datasets interactively — for example, letting a user brush a time range on one chart and have every other chart on the page update instantly. It combines crossfilter for fast multi-dimensional filtering with d3 for rendering, and outputs CSS-friendly SVG.

The core idea

dc.js sits on top of two libraries, each doing one job:

Layer Library Responsibility
Data crossfilter Holds records and maintains fast filtered views across many dimensions
Rendering d3 Draws charts as SVG elements you can style with CSS
Coordination dc.js Wires charts to crossfilter dimensions/groups and keeps them in sync

Because charts are bound to crossfilter groups, filtering is not a manual redraw loop. You define a dimension and a group, attach them to a chart, and dc.js handles the reactive update when a user interacts.

What "reactive" means in practice

The library's own demo uses 27 years of Nasdaq 100 index data (1985/11/01–2012/06/29) to show the pattern. The page presents several linked charts:

  • Yearly performance (radius = fluctuation/index ratio, color = gain/loss)
  • Days by gain/loss
  • Quarters
  • Day of week
  • Days by fluctuation (%)
  • Monthly index absolute move & volume

Each chart has its own reset control, and the page tracks "selected out of records" with a global Reset All. Selecting a time range on one chart zooms and filters the rest. That is the whole value proposition: one interaction, many coordinated views, no page reload.

When to use it

dc.js fits when all of these hold:

  • Your data is tabular and multi-dimensional (many columns you want to slice by).
  • You want several charts on one page that filter each other.
  • You are comfortable with JavaScript and a d3-style charting workflow.
  • You need it to run client-side, including on mobile.

It is a weaker fit if you only need a single static chart (plain d3 or a simpler library is lighter), or if your data is too large to hold in the browser — crossfilter works in memory, so dataset size is bounded by the client.

Getting started

The documentation page is marked WIP — Documentation for dc-v5, so expect the v5 docs to be in progress. The recommended entry point is the annotated source of the Nasdaq example, which walks through a real, working dashboard.

To ask questions or get help, the project points to:

  • Stack Overflow — questions and help
  • User group (mailing list) — discussion and longer topics
  • GitHub Issues — bug reports and feature requests

Support requests are directed to Stack Overflow or the user group rather than GitHub Issues. The docs also note that you get help faster with a working example, and offer forkable starting points: a blank jsFiddle, an example jsFiddle, a blank bl.ock, and an example bl.ock.

Other examples to learn from

Beyond the Nasdaq demo, the site lists community-contributed examples, including:

  • US Venture Capital Landscape 2011 — choropleth chart, bubble chart
  • Major Canadian City Crime Stats 1998–2011 — bubble overlay, bar chart, line chart
  • A collection of simple, specific chart examples

These are useful because they show the same crossfilter-plus-d3 pattern applied to different data shapes and chart types.