How to Get Started with a dc.js Example

The fastest way to get started with dc.js is to fork one of the official starter templates and work from a running example. The dc.js site provides a blank jsFiddle, an example jsFiddle, and a blank bl.ock specifically for this purpose, plus an annotated source walkthrough of the Nasdaq 100 example. Start with the blank template if you want to build from scratch, or the example template if you want working code to modify.

What dc.js Is (and Why the Example Approach Works)

dc.js is a JavaScript charting library with native crossfilter support, built for efficient exploration of large multi-dimensional datasets. It uses d3 to render charts in CSS-friendly SVG format. Charts are data driven and reactive, so user interactions produce instant feedback — brushing one chart filters the others.

That reactivity is the reason a running example is the right starting point. You can't easily appreciate how crossfilter dimensions, groups, and chart bindings fit together from documentation alone; you need to see the filter-and-redraw cycle in action.

Step 1: Pick a Starting Point

If you're new to dc.js, take the example jsFiddle or the annotated Nasdaq source first. If you already know what you want to build, the blank templates save cleanup time.

Step 2: Read the Annotated Nasdaq Example

The site's flagship example charts 27 years of Nasdaq 100 index data (1985/11/01–2012/06/29). It includes:

• A yearly performance chart where radius encodes the fluctuation/index ratio and color encodes gain or loss
• Days by Gain/Loss, Quarters, Day of Week, and Days by Fluctuation(%) charts, each with a reset control
• A monthly index absolute move and volume chart with a range selector for zooming
• A record counter showing "selected out of records" plus a Reset All control

The annotated source explains how these pieces connect. Read it with a specific question in mind — for instance, "how does brushing the day-of-week chart filter the others?" — rather than reading top to bottom.

Step 3: Run It and Verify Interaction

Load your forked fiddle or bl.ock and confirm the core behavior:

1. The charts render as SVG with visible axes and data marks.
2. Selecting a range on one chart (for example, the fluctuation range slider) updates the other charts.
3. The record counter changes to reflect the filtered subset.
4. Each chart's reset control clears only that chart's filter; Reset All clears everything.

If all four happen, your crossfilter-to-chart wiring is correct.

Step 4: Swap In Your Own Data

Once the example behaves as expected, replace the dataset while keeping the chart definitions. The Nasdaq example uses a public data source (PiTrading.com), so its structure is a reasonable model for time-series data with categorical breakdowns. Keep the dimension and group definitions aligned with your new fields — a mismatch there is the most common cause of empty or static charts.

Where to Get Help

The dc.js project directs questions and support requests to Stack Overflow or the user group (mailing list), and bug reports or feature requests to GitHub Issues. The site notes that you'll get help faster with a working example, which is another reason to fork a template before asking.

Other resources linked from the site include the changelog, FAQ and wiki, and API reference. Community-contributed examples cover a US venture capital landscape choropleth and bubble chart, and Canadian city crime statistics with bubble overlay, bar, and line charts — useful if your data doesn't look like the Nasdaq set.

Common Stumbling Blocks

• Blank charts after swapping data: usually a dimension or group referencing a field name that doesn't exist in the new dataset.
• Charts that don't react to brushing: the charts aren't sharing the same crossfilter instance, or a chart was never added to the chart registry.
• Version confusion: the documentation page is marked "WIP - Documentation for dc-v5," so confirm which dc.js version your fiddle loads before following API details.
• Asking without a reproducible case: the project explicitly asks for a working example with support questions, so a forked fiddle shortens the path to an answer.