explaingit

dc-js/dc.js

★ 7,439JavaScriptAudience · dataComplexity · 3/5LicenseSetup · moderate

TLDR

A JavaScript library for building interactive data dashboards where clicking one chart automatically filters all the others, letting users explore data from multiple angles at the same time.

Mindmap

mindmap
  root((dc.js))
    What it does
      Linked interactive charts
      Crossfilter on click
      Auto-animated updates
    Built on
      D3.js for drawing
      crossfilter for filtering
    Chart types
      Bar chart
      Pie chart
      Line chart
      Data table
    Installation
      npm install
      CDN script tag
    Audience
      Data analysts
      Dashboard builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a sales dashboard where clicking a date range on a bar chart instantly filters a pie chart and data table to match.

USE CASE 2

Create an interactive data exploration tool that lets non-technical users filter a dataset by clicking multiple charts simultaneously.

USE CASE 3

Add coordinated filtering to an existing D3.js chart set so all charts update together when a user makes a selection.

Tech stack

JavaScriptD3.jscrossfilternpm

Getting it running

Difficulty · moderate Time to first run · 30min

Requires D3.js v4 or v5 as a peer dependency, IE support requires dc.js v3 instead of the current release.

Use freely for any purpose, including commercial use, as long as you include the Apache 2.0 license notice.

In plain English

dc.js is a JavaScript library for building interactive dashboards where multiple charts are linked together. When you click to filter one chart, every other chart on the page updates automatically to reflect that selection. This kind of coordinated filtering is useful for exploring data from many angles at once, for example clicking a date range in a bar chart and seeing a pie chart and a scatter plot both update instantly to show only data from that period. The library is built on top of two other JavaScript tools: crossfilter, which handles the fast in-browser data filtering, and d3.js, which handles the actual drawing of chart shapes. dc.js sits on top of both, providing ready-made chart types like bar charts, pie charts, line charts, and data tables that automatically wire into the crossfilter filtering system. You do not need to write the connection logic yourself. Each chart in dc.js displays a summary of one dimension of your data, using position, size, or color to represent values. When a user brushes or clicks a chart to apply a filter, all other charts animate to their updated state. This animation is handled by d3.js underneath. Installing dc.js can be done through npm with one command, or by loading it directly from a CDN link in a webpage. It depends on d3 version 4 or 5. For projects that still need to support Internet Explorer, version 3 of the library is available instead. The project is open source under the Apache 2.0 license and has been available for many years. Support resources include a StackOverflow tag, a user group mailing list, and a wiki with frequently asked questions. The project links to a live example page and an annotated source walkthrough for getting started quickly.

Copy-paste prompts

Prompt 1
Build a dc.js dashboard with a bar chart showing monthly revenue and a pie chart showing sales by category, where clicking either chart filters the other, show me the full HTML and JavaScript.
Prompt 2
Add a dc.js data table below my existing charts that shows the filtered rows in real time whenever a user clicks to drill down.
Prompt 3
I have a CSV with date, product, and amount columns, how do I load it into dc.js crossfilter and wire up a timeline bar chart and a category pie chart?
Prompt 4
How do I add a reset button to a dc.js dashboard that clears all active filters across every chart at once?
Prompt 5
My dc.js bar chart has overlapping x-axis labels for monthly dates, how do I rotate or reduce them so the chart is readable?
Open on GitHub → Explain another repo

← dc-js on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.