简体中文
EnglishWhat Kinds of Charts and Interactions Can dc.js Produce?
Updated
dc.js produces interactive, cross-filtered charts in the browser: bar charts, line charts, bubble charts, choropleth maps, and more, all rendered as SVG via d3 and driven by crossfilter. The defining interaction is linked filtering — clicking or brushing one chart filters the underlying dataset and every other chart on the page updates instantly. This works best when you have a multi-dimensional dataset (several fields you want to slice by) and want exploratory analysis rather than a static report.
Chart types
The library's own Nasdaq 100 example (27 years of index data) demonstrates several chart forms on one page:
| Chart | What it shows in the example |
|---|---|
| Bar chart | Days by gain/loss; days by fluctuation (%) |
| Line / stacked chart | Monthly index absolute move and volume |
| Bubble chart | Yearly performance — radius encodes fluctuation/index ratio, color encodes gain/loss |
| Choropleth | Used in the community example "US Venture Capital Landscape 2011" |
| Bubble overlay | Used in "Major Canadian City Crime Stats 1998–2011" |
The community-contributed examples page lists further cases, including a bubble overlay combined with bar and line charts, and a choropleth paired with a bubble chart. So the practical range is: standard categorical and time-series charts, plus map- and bubble-based encodings for geographic and multi-variable data.
Interactions
dc.js charts are "data driven and reactive," per the project description, which is what makes the interactions feel immediate:
- Linked filtering. Each chart acts as a filter control. The Nasdaq example exposes separate reset controls for days by gain/loss, quarters, day of week, and fluctuation range — selecting in any one narrows the records and updates the others.
- Brushing and range selection. The monthly index chart lets you "select a time range to zoom in," and the fluctuation chart has a range slider.
- Reset controls. Individual charts and a global "Reset All" clear filters, so users can back out of a drill-down without reloading.
- Live record count. A readout shows "selected out of records," giving immediate feedback on how much of the dataset the current filters cover.
The example also frames these as real questions — whether Nasdaq gains or loses tomorrow, whether Friday or Monday is unluckier, whether spring beats winter — which is the point of the interaction model: each chart is a way to ask a question and see the answer across all the others at once.
When this fits your project
Choose dc.js when your data has multiple dimensions you want to explore together and you want that exploration to happen in the browser, including on mobile devices. If you only need a single static chart, or you don't need cross-filtering between views, the crossfilter dependency adds complexity you won't use.
To see the behavior before committing, the project points to runnable starting points: a blank jsFiddle, an example jsFiddle, and blank and example bl.ocks, plus the annotated source of the Nasdaq example. Forking one of these is the fastest way to confirm the chart types and interactions match what you need.