dc-js.github.io

What is dc.js?

dc.js is a JavaScript charting library for building interactive, browser-based data dashboards. Its distinguishing feature is native integration with Crossfilter, a library for fast multi-dimensional filtering of large datasets. Charts are rendered as SVG via D3, so they are data-driven and reactive: when a user brushes or clicks one chart, every other chart linked to the same Crossfilter dimensions updates instantly.

What that means in practice

A typical dc.js page holds several coordinated views of one dataset — a bar chart of categories, a line chart over time, a row chart of rankings. Selecting a range in any one of them filters the underlying records, and the rest redraw immediately. The library also provides a data table and a count widget, plus a "reset all" pattern for clearing filters.

The official example on the project page uses 27 years of Nasdaq 100 index data and invites questions such as whether Friday or Monday is the worst day for investors, or whether spring beats winter. That is the intended use: exploratory analysis in the browser, with no server round-trip per interaction.

Who it suits

• Analysts and data journalists who want a shareable, self-contained dashboard rather than a static chart image.
• Developers already using D3 who want filtering and chart coordination without writing it from scratch.
• Teams working with datasets in the hundreds of thousands of rows, where Crossfilter's indexing pays off.

It is a weaker fit if you need a polished, opinionated visual style out of the box, or if your data lives behind an API you would rather query per interaction. dc.js assumes the data is already in the browser.

How it compares

Next step

If you want to try it, fork the blank jsFiddle or bl.ock linked from the project page, load a small CSV, and wire two charts to one Crossfilter instance. Seeing one chart filter the other is the fastest way to judge whether the model fits your project. For questions, the project directs users to Stack Overflow and its user group rather than its issue tracker. Related reading on the D3 foundation it builds on is at D3.js and the filtering engine at Crossfilter.

How do I build a crossfilter dashboard with dc.js?

Build a dc.js dashboard as a small pipeline: load rows into crossfilter, define dimensions and groups, then bind each group to a chart and let a shared dc render loop keep everything in sync.

The pipeline

1. Data: an array of records, one per row (date, category, value).
2. crossfilter: wrap the array once. This is the index that makes filtering fast.
3. Dimensions: cf.dimension(d => d.date) for each field you want to filter or group by.
4. Groups: dim.group().reduceSum(d => d.value) for each aggregate you want to chart.
5. Charts: a dc.js chart per group, each given .dimension() and .group().
6. Render: chart.render() for each, or dc.renderAll().
7. Interaction: chart.filter() or a brush calls dc.redrawAll(), and every chart updates.

The key idea from the page evidence: dc.js has native crossfilter support, so charts are "data driven and reactive and therefore provide instant feedback to user interaction." You do not wire charts to each other manually — crossfilter holds the filter state and dc.js redraws the views that depend on it.

A minimal pattern

const ndx = crossfilter(rows);
const dateDim = ndx.dimension(d => d.date);
const gainDim = ndx.dimension(d => d.gain > 0 ? "Gain" : "Loss");
const byDay = dateDim.group().reduceSum(d => d.value);

const bar = dc.barChart("#gain-loss")
  .dimension(gainDim)
  .group(gainDim.group().reduceCount());

const line = dc.lineChart("#index")
  .dimension(dateDim)
  .group(byDay)
  .brushOn(true);

dc.renderAll();

A brush on the line chart filters dateDim; the bar chart re-renders against only the selected dates. That is the whole dashboard mechanic.

Chart types worth pairing

The Nasdaq example on the site does exactly this: a yearly performance chart using radius for a fluctuation/index ratio and color for gain/loss, plus "Days by Gain/Loss", "Quarters", "Day of Week", and "Days by Fluctuation(%)" with a range control. Each panel filters the others.

Practical decisions

• One dimension per filter target. A dimension can only be filtered in one way at a time; if you need two independent filters on the same field, create two dimensions.
• Groups, not raw data, feed charts. Reducers like reduceSum, reduceCount and reduce with add/remove functions keep aggregates correct as filters change.
• Cardinality matters. Pie and row charts with hundreds of categories are unreadable; bin or top-N first.
• Watch the redraw cost. Crossfilter is built for large multi-dimensional datasets, but each brush event redraws every dependent chart. Debounce fast brushes if the dashboard feels sluggish.
• Mobile is a stated target, so keep controls touch-sized and avoid hover-only interactions.

Where to look next

The site points to an annotated Nasdaq example, an API reference, a changelog, and a FAQ/wiki. Note that the documentation page is marked "WIP - Documentation for dc-v5", so check the version you install against the API reference rather than trusting older tutorials. For questions, the project directs users to Stack Overflow and its user group; blank jsFiddle and bl.ock forks are offered for reproducible examples.

For a different rendering approach, compare with D3.js, which dc.js uses for SVG output, or Plotly if you prefer a higher-level charting API over crossfilter wiring.

Next step: fork one of the blank examples, paste in about 1,000 rows of your own data, and build only two linked charts — a time brush and one bar chart. Get that redraw loop working before adding panels; it is the part that determines whether the rest of the dashboard behaves.

How does dc.js differ from other JavaScript charting libraries like Chart.js or D3?

dc.js sits between a general charting library and a low-level drawing toolkit: it combines crossfilter's fast filtering of multi-dimensional data with D3's SVG rendering, and adds its own chart types and a coordination layer. Chart.js and D3 each occupy a different point on that spectrum.

Where dc.js fits

dc.js is built for linked, interactive dashboards over one dataset. Per the project's own description, it has native crossfilter support for "highly efficient exploration on large multi-dimensional datasets," and it uses D3 to render charts as CSS-friendly SVG. Charts are "data driven and reactive," so a brush or click on one chart updates the others immediately. The Nasdaq 100 example on the site (1985–2012) shows the pattern: bar charts for day-of-week and quarterly performance, a range chart for zooming a time window, and a reset control, all filtering the same records.

That coordination is the main difference. In Chart.js you would typically wire up change events yourself and re-fetch or re-aggregate data; in dc.js the crossfilter dimension and group objects do that work, and charts subscribe to them.

How the three compare

Practical trade-offs

Choose dc.js when your users need to slice one dataset many ways at once and see every chart respond. It expects you to think in crossfilter terms, and its documentation is partly community-maintained, so expect to read examples and the API reference rather than a polished tutorial. The site also notes that its v5 documentation is still work in progress.

Choose Chart.js when you want a handful of clean charts with minimal setup. It is easier to start with and better suited to static or lightly interactive reporting, but you give up the built-in cross-chart filtering.

Choose D3 when no existing chart type fits, or when you need full control over layout, transitions and interaction. The cost is that almost everything, including axes and tooltips, is your responsibility.

A useful decision criterion: if your interface is one chart, use Chart.js; if it is a grid of charts that must filter each other, dc.js removes the most work; if the visual itself is the hard part, start from D3.

To see the difference concretely, open the Nasdaq 100 example linked from dc.js and click a bar for a day of the week, then watch the other charts narrow to that subset. Reproducing that same behavior in Chart.js means writing the filter, the aggregation and the redraw logic for each chart yourself.

How do I add brushing and interactive filtering to dc.js charts?

Brushing and interactive filtering are built into dc.js through its native Crossfilter integration. You don't wire up event handlers or filter logic yourself: you bind a chart to a Crossfilter dimension and group, and dc.js handles the brush interaction and the resulting filter propagation across every chart sharing that Crossfilter instance.

The core pattern

1. Create one crossfilter instance from your dataset.
2. Create dimensions and groups from it.
3. Create charts, calling .dimension() and .group() on each.
4. Call .renderAll() (or .redrawAll()) on the chart registry.

Because all charts share the same Crossfilter, brushing one chart filters the others automatically. A bar chart with .brushOn(true) (the default for bar charts) lets you drag across bars to select a range; the line chart's .brushOn(true) enables the range brush seen in the Nasdaq example's "select a time range to zoom in."

Which chart types brush

Practical points

• Brushing only makes sense on a dimension that is ordered or continuous. Brushing a bar chart whose dimension is a date or numeric range is the common case; if your dimension is categorical, each bar is effectively one key.
• Use one dimension per chart where possible. Reusing a dimension across charts that both brush can cause Crossfilter to drop filters (a known Crossfilter constraint), so give each brushing chart its own dimension.
• The reset behavior matters. The Nasdaq example exposes per-chart "reset" links and a "Reset All," which call .filterAll() on the relevant charts. Add these so users can undo a brush without reloading.
• Debounce or accept redraw cost on large data. Crossfilter filtering is fast, but re-rendering many SVG charts on every brush move can lag. If you hit that, redraw on brush end rather than continuously, or reduce the number of charts in the group.

A concrete starting scenario

An analyst looking at 27 years of index data wants to know whether Fridays are worse than Mondays. With a day-of-week bar chart and a days-by-fluctuation bar chart sharing one Crossfilter, clicking "Friday" filters the fluctuation chart to Fridays only; brushing a fluctuation range filters the day-of-week chart in turn. That two-way exploration is the point of the library, and it requires no custom filtering code.

Next step

Fork the blank jsFiddle or bl.ock linked from the dc.js site, drop in your own dimension and group, and add a bar chart with brushing before layering in more charts. The annotated Nasdaq source walks through the full setup. For rendering details, dc.js builds on D3.js, and the filtering engine itself is Crossfilter, whose documentation explains the dimension-versus-group rules that determine what a brush can filter.

How can I use dc.js with React or another frontend framework?

dc.js is a plain JavaScript library, not a framework-specific one, so you use it the same way in React, Vue, Svelte or Angular as you would on a static page: you give it a DOM element, a crossfilter instance and a chart definition, then call the chart's render method. The integration work is mostly about lifecycle — creating the chart after the element exists and tearing it down before the element disappears.

The core pattern

In React, the usual approach is a wrapper component with a ref on a container element:

• Create a crossfilter instance and its dimensions/groups once, outside the render path, so they survive re-renders.
• In an effect that runs after mount, select the container with d3.select(ref.current) and build the chart with .width(), .height(), .dimension(), .group(), .x() and so on.
• Call .render() (or .redraw() after data changes).
• In the effect's cleanup, call .reset() or .destroy() on the chart and remove any listeners, because dc.js attaches events to the DOM node it was given.

Data updates are where frameworks differ from dc.js's own model. dc.js is reactive through crossfilter: a filter on one chart triggers a redraw of every chart sharing that crossfilter instance. If your React state is the source of truth, decide which layer owns filtering. Either let crossfilter own it and keep React out of the loop, or rebuild the crossfilter instance and re-render charts when props change. Mixing both usually produces double renders and confusing filter state.

Where dc.js fits, and where it doesn't

dc.js is strongest for coordinated dashboard views over one multi-dimensional dataset — the kind of linked bar, line and pie charts where brushing one chart filters the others. The library's own example applies this to decades of Nasdaq 100 index data, letting you ask questions like whether Monday or Friday is worse for investors, or which quarters outperform. That "ask a question by clicking" workflow is the reason to choose it.

The trade-off is that dc.js expects to manage its own DOM subtree. It renders into SVG via d3, which is CSS-friendly but not virtual-DOM-friendly. If your framework re-renders and replaces that container, the chart breaks silently. Charts also need explicit sizing, and responsive layouts require you to observe container size and call .width()/.height() plus .redraw() yourself.

Practical next step

Prototype the smallest possible wrapper: one container ref, one crossfilter instance, one bar chart, and a button that changes a filter. Confirm that clicking the chart updates your other UI and that unmounting doesn't leave listeners behind. Once that works, add charts one at a time rather than porting a whole dashboard at once. The annotated Nasdaq example and the blank jsFiddle and bl.ock starting points on dc.js are useful references for the chart configuration itself; for lifecycle questions, the project points users to Stack Overflow and its user group.

How do I troubleshoot common dc.js chart rendering or version migration issues?

Start by isolating whether the problem is data, dimension/group wiring, or the rendering layer. dc.js charts are reactive: they redraw when their dimension or group changes and when filters fire. Most “blank chart” or “frozen chart” reports come from one of those links being broken rather than from SVG or CSS itself.

Common rendering issues

• Chart area exists but no marks appear. Check that the group returns non-empty bins for the current filter state, that the chart’s .width() and .height() are set before .render(), and that the chart is bound to a real DOM node that is visible when .render() runs. Rendering into a hidden container often produces zero-sized or mis-scaled axes.
• Axes or labels look wrong after filtering. dc.js redraws reactively, but scales and axis ranges are recalculated from the current crossfilter state. If a chart uses a fixed domain, it will not adapt to filters; if it uses a dynamic domain, it may collapse when a filter leaves only one value.
• Filters affect the wrong charts. Each chart should filter its own dimension. If two charts share the same dimension, filtering one can unexpectedly constrain the other. Use separate dimensions for independent filters.
• Performance degrades on large datasets. Native crossfilter support is the main reason dc.js stays responsive, but many charts redrawing on every brush event can still be heavy. Reduce the number of charts bound to a single group, or debounce rapid filter changes.

Version migration checks

The page notes that the documentation shown is for dc-v5. Migration problems usually show up as renamed or removed APIs, changed defaults, or charts that no longer render because a method moved. When moving between major versions:

1. Confirm which dc.js version the page or bundle actually loads, not just which version the docs describe.
2. Search the changelog and API reference for the specific method or chart type you use.
3. Re-test the smallest chart first: one dimension, one group, one chart, one render call.
4. Compare against a known working example, such as the annotated Nasdaq example referenced on the dc.js site.

A practical debugging sequence

• Log the group’s .all() output before rendering. If it is empty, the issue is upstream in crossfilter, not in dc.js.
• Render one chart at a time, then add charts back until the failure returns.
• Check the browser console for errors from d3 or dc.js; a single failed scale or missing accessor can stop later redraws.
• Verify that .render() and .redraw() are called at the right times: .render() for first paint, .redraw() after filters change.

For version-specific behavior, the dc.js changelog and API reference are the most direct sources. If you need a working baseline, fork the blank or example jsFiddle/bl.ock linked from the dc.js page and reproduce the issue there. For community help, the project points to Stack Overflow and its user group; include a minimal working example so others can reproduce the rendering or migration problem.