Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js


Build Status Sauce Status NPM Status cdnjs Status Join the chat at


Dimensional charting built to work natively with crossfilter rendered using d3.js. In dc.js, each chart displays an aggregation of some attributes through the position, size, and color of its elements, and also presents a dimension which can be filtered. When the filter or brush changes, all other charts are updated dynamically, using animated transitions.

Check out the example page and its annotated source for a quick five minute how-to guide. The detailed API reference is here (markdown version). For more examples and hints please visit the Wiki.


Please direct questions and support requests to Stack Overflow or the user group. When posting to Stack Overflow, use the [dc.js] and/or [crossfilter] tags - other tags are likely to draw unwanted attention.

Get help faster with a working example! Fork these to get started:
blank jsFiddle - example jsFiddle - blank bl.ock - example bl.ock


Version 4.* is compatible with d3 versions 4 and 5. It is not compatible with IE. Use dc.js 3.* if you need IE support, or use dc.js 2.* if you need compatibility with d3 version 3.

CDN location[email protected]/dist/dc.js[email protected]/dist/style/dc.css

or copy the latest links from CDNJS

Install with npm

npm install dc

Install without npm


How to build dc.js locally

Prerequisite modules

Make sure the following packages are installed on your machine

  • node.js
  • npm

Install dependencies

$ npm install

Build and Test

$ grunt test

Developing dc.js

Start the development server

$ grunt server


dc.js is an open source javascript library and licensed under Apache License v2.

  • Charts to ES6 classes

    Charts to ES6 classes

    Have been experimenting with multiple approaches so far. At this stage trying to figure out what the final ES6 classes should look like and also how to get there without, potentially, introducing errors.

    opened by kum-deepak 49
  • sunburst or nested donut chart

    sunburst or nested donut chart

    It would be nice to have a sunburst or a nested donut chart directly from dc.js. I call sunburst or nested donut chart a chart like 1-sunburst Is it possible, already done by someone, I would be very interested to know.

    opened by PBrockmann 34
  • Added text option for number-display

    Added text option for number-display

    This will allow users to set the text attached with a number-display. (TO DO) Pluralization of text, ( can be helpful.

    opened by siddharthg 30
  • Support D3 v4

    Support D3 v4

    D3 is being broken up into smaller modules for v4 (e.g. d3-scale, d3-selection, etc) and there are some API changes.

    Discuss version support & approach. Should dc.js support d3 v3 and v4 or only one of them? One option to support both is a jQuery-style approach where 2.x supports v3 and 3.x supports v4.

    opened by jfsiii 29
  • Initial version of zoom with _zoomOutRestrict using D3 zoom features

    Initial version of zoom with _zoomOutRestrict using D3 zoom features

    This is work in progress. Please check using http://localhost:8888/web/zoom/restrict-panning.html

    I need suggestions at this stage:

    • I am assuming that in a range/focus chart pair will have same domains. Are you aware of any situation where it will not be the case?
    • In the D3v4, setting a zoom programmatically calls the event handler as well, to avoid infinite loop, there is check in the beginning of the event handler (picked from D3 examples). Same case is there for brushing as well.
    • Now we get a peculiar situation when a range chart tell the focus chart to update which it turn tells the range chart. In previous version it was checking if the previous filter/focus values were same according intimate the other chart. In newer D3 API, the zoom and brush events return screen measurements (i.e. scale.range()) which needs to be converted to domain values. This very rarely (combined with the fact that computations are in floating point) gives slightly different values than the original - leading to infinite loop. I was thinking to introduce an optional 2nd parameter to few calls (for example: _chart.focus) to indicate that do not issue further intimations to other charts. Do you have any other thoughts?

    The above gives slightly peculiar UI glitches because some updates get applied immediately while some are debounced.

    Quite a lot of code has changed, I will refactor before making final commit :)

    opened by kum-deepak 26
  • dc.js 4.0: d3 6.0 and ES6

    dc.js 4.0: d3 6.0 and ES6

    There has been a lot of interest in the dc.js community for an ES6 version, but it was not a priority to me as long as we had to transpile and run on IE. (*)

    However, d3 6.0 will finally drop IE - see d3/d3-array#87. Glory day! We can use ES6 natively!

    I'd be happy to work with someone or a team of people who want to port dc.js to Rollup, NO BABEL or transpilation, and ES6 modules. I think we should keep the code in one repo but have lots of modules in it. ES6 modules should allow anyone to mix and match their own dc.js charts or versions of dc.js charts with those in the official repo, and only take what they need.

    I don't have the time to do all this work myself, but I have the time to do code review, make decisions and commit PRs for this project.


    1. The dependency between modules is complicated. I think we will save ongoing effort by staying in one repo with one version number, but we still need to figure out the dependencies beyond the class hierarchy. I'll bet there are many places where the dependencies are not pure, yet we want tree-shaking to work, etc.
    2. Currently dc.js does not use prototype inheritance, so the path to ES6 classes is not completely clear. I doubt it will lead to significant performance improvements, but it would be nice to use idiomatic ES6 classes. There may be things we are doing, like adding and changing methods on other classes, which will not work or will cause subtle bugs.
    3. As much as possible, we should be able to keep code written for DCv3 working with v4, but where ES6 helps the dc.js API, we should use it. ES6 classes may break the interface a little. I don't know if we'll have trouble with the places where people replace methods like yAxisMin in order to get the right effect.

    We can't fix everything at once - let's try to leave drastic interface changes for later, wherever possible.

    I bet a lot of people out there have already gone through the ES5->ES6 transformation and know the best practices. Anyone have time to take this up? Anyone have experience with Rollup the way it is used to bundle D3?

    Please leave a comment if you're interested in working on this: doing the translation, review PRs, help debug, or just offer advice.

    I know some people worked with @mtrayham's fork #1175. I closed the PR because I didn't want to transpile & still don't want to. I also want to use rollup instead of webpack because it is simpler. Nonetheless it's the right direction - did anyone try to merge that fork with the D3v4/5 changes in 3.x?

    I don't know how many d3 modules have dropped ES5 and moved to ES6. I know of d3-array and d3-force so far, but d3 6.0 has not been released yet. We have the opportunity to get ahead of the curve and release DCv4 soon after D3v6.

    (*) I continue to be opposed to transpilation, since we frequently need to debug incompatibilities using the devtools of every browser. In my experience, only the Chrome debugger works reliably for debugging transpiled code. However, if someone else wants to maintain the toolchain for transpiling dc.js 4.0, and debug any issues that arise, I am cool with that!

    opened by gordonwoodhull 25
  • Proposing a logo for dc.js

    Proposing a logo for dc.js

    A logo is not a necessary component but it definitely contributes to dc's perceived quality and adds some flair to it's identity. I looked around the issues etc. but couldn't find any logo yet. This is my recommendation. It is based on the "unofficial" Javascript logo and reference's dc's attachment to D3.js as well.

    The Javascript logo. js

    The D3.js logo screen shot 2014-06-15 at 6 26 07 pm

    So here's the logo I'd like to propose - dc charts - 152

    If this is acceptable, I'd like to adapt the logo in any relevant formats like SVG's and multiple dimensions to suitable contexts like favicons or for the Github README page etc.

    Awaiting criticism/suggestions. Thanks :)

    enhancement docs 
    opened by kadimisetty 25
  • Guidelines on choropleth - mapping library integration (e.g., leaflet)

    Guidelines on choropleth - mapping library integration (e.g., leaflet)

    First of all props for releasing this nice lib. I love the choropleth support and a natural extension is to render it as some kind of layer in a mapping lib like leaflet, cartodb, ..

    So I was looking for something like this but linked into dc and that I can extend to multiple layers, each binding to a different set of dimensions/groups.

    Advice from Google seems to be to look at the snack dashboard by @jeroenooms but I failed to find the unminified source with the relevant code.

    @yurukov mentions he did something similar in #119 and @NickQiZhu in #14. Im sure it cant be that hard but would appreciate some pointers or example code.

    opened by dgorissen 23
  • add a new data-grid widget

    add a new data-grid widget

    as suggested by Nick, PR for inclusion.

    I didn't succeed to have grunt make working, so I included manually src/data-grid.js in the example, it shouldn't be needed with a normal make.

    I will document it in the wiki after code review (I'm assuming you'll suggest improvements, I'll document only when it's "stable" and pulled)

    In the ep example, I did use jquery for lazyloading the images and underscore for the templating. Neither are requirements, but obviously loading 800 images isn't good usability and using a template for generating html fragment is more convenient.

    opened by tttp 23
  • feat: isolate d3js compatility layers

    feat: isolate d3js compatility layers

    Enable es module users to specify d3js compatibility layer while maintaining dynamic adaptation to run-time d3js version for UMD users.


    • [x] html-legend has a hard dependency on d3v5 selection
    • [x] possibly have a better import than 'dc/src/core/..' for es module users
    • [x] fix units.js:47 Uncaught (in promise) Error: dc.units.ordinal should not be called - it is a placeholder
    • [x] move compat helpers out of config to d3compat to avoid clash with upcoming [email protected] config

    Fixes #1822 Fixes #1823

    opened by nomego 22
  • Enhanced BoxPlot chart

    Enhanced BoxPlot chart

    I plan to submit an enhanced BoxPlot chart that is fully backward compatible. This enhancement will also fix issue #1120. I have never submitted a pull request, but would like to learn so I can help maintain this chart and potentially help with others.

    Currently I am using a different name for this chart (BoxPlotJitter), but I will change it back to BoxPlot. It looks like I need to submit changes for src/box-plot.js, src/ and style/dc.scss.

    We are currently running against dc.js 2.1.9.

    I will build a jsfiddle example and post the link later today to show the enhancements.

    opened by cwolcott 21
  • Error: No d3.js compatbility nester registered, load v5 or v6 compability layer.

    Error: No d3.js compatbility nester registered, load v5 or v6 compability layer.

    Got this error No d3.js compatbility nester registered, load v5 or v6 compability layer. when trying to render a series chart. I include the part of the code that does the chart render.

    import { SeriesChart, LineChart, units } from "dc";
    import { curveCardinal } from "d3-shape";
    import { scaleLinear, scaleTime } from "d3-scale";
    let height = "280";
    let width = "";
    let style = "width:100%";
     let dimension = data.dimension((d) => [d.gender, d.height]);
     let group =;
     let valueAccessor = "";
     let keyAccessor = "";
     let seriesAccessor = "";
     let x = "";
    let from = new Date(new Date().setDate(today.getDate() - 30));
    let to = new Date() - 
    let chart = new SeriesChart(e);
          .chart((c) => {
            return new LineChart(c).curve(curveCardinal);
          .valueAccessor((d) => +d.value)
          .seriesAccessor((d) => d.key[1])
          .keyAccessor((d) => d.key[0])
    opened by rodryquintero 2
  • Line chart- multiple lines with multiple datasets

    Line chart- multiple lines with multiple datasets

    I'm currently building a angular project where i need to draw a line chart with multiple datasets.

    Angular 14 dc.js 4.2.7

    Example object format: { id: "string", datasets: [ id: "string", data: []; color: "string"; ] }

    I followed some examples and only could made a series chart where each line is an address. where's a clean run of what i've got: *in this example the data arrays start seperated from the color string

    Tried to change the dimension and tried colors with colorAcessor but nothing worked.

    Is it possible to make a line chart where each line is a address and the color of the line is the from the dataset ? Meaning multiple lines with same address but diferent colors and values.

    ** if not, is it possible to do something similiar with a bar chart too ?

    opened by TheAndre980 2
  • High vulnerability found in d3-color

    High vulnerability found in d3-color

    High vulnerability found (30.09.2022) from npm audit

    ┌───────────────┬──────────────────────────────────────────────────────────────┐ │ High │ d3-color vulnerable to ReDoS │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ d3-color │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=3.1.0 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ dc │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ dc > d3 > d3-color │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ │ └───────────────┴──────────────────────────────────────────────────────────────┘

    My guess would just be to update the d3 lib that has a d3-color fixed

    opened by TheAndre980 0
  • vulnerability: d3-color:2.0.0: 1084597(10.0)

    vulnerability: d3-color:2.0.0: 1084597(10.0)

    dc(4.2.7) using d3(6.6.2) as required dependency , d3 has d3-color:2.0.0 vulnerability, it needs to update latest d3 version

    "dc": { "version": "4.2.7", "resolved": "", "integrity": "sha512-83vzVpBmXFCW7V2uVhBolcPX22d19k4GV7zJWu8jkyNhMstAb/XYl2Eld3Kp71eLD8YM9RsIRgtrmLViQeZTuQ==", "requires": { "d3": "^6.6.2" }, .... }

    opened by masterismet 0
  • Seeking new maintainers

    Seeking new maintainers

    Gordon Woodhull is stepping down from maintaining dc.js at the end of 2022. He may occasionally respond on Stack Overflow or on GitHub issues, but will no longer maintain or contribute to the project.

    Deepak Kumar (@kum-deepak) has volunteered to be the active maintainer, but he needs your help:

    • Beta testing new versions and features
    • Refactoring, adding features, and fixing bugs
    • Improving documentation
    • Answering questions on GitHub Issues, Stack Overflow, and mailing list

    Please reach out through this ticket or through our emails in bios if you are interested in becoming a maintainer.

    [email protected]

    Deepak is taking dc.js in a new direction in dc version 5, available in the dc-v5 branch.

    Design goals include:

    • Simplifying and modularizing code; separating concerns
    • Server-side filtering and aggregation directly supported without workarounds
    • Fully ported to Typescript
    • Saving and restoring filters

    Due to fixing longstanding issues with dc.js, the interface will not be backward compatible, but there are codemods to ease the transition.

    opened by gordonwoodhull 5
  • dc sunburst chart - externalLabels not working

    dc sunburst chart - externalLabels not working

    when i set the externalLabels on a sunburst chart all labels are displayed in the center of the chart.

    the problem is that startAngle and endAngle is not set on the d3Shape.arc in the function _labelPositon. when i change to

    _labelPosition (d, _arc) {
             let centroid;
             if (this._externalLabelRadius) {
                 centroid = d3Shape.arc()
                     .startAngle(d => d.x0)
                     .endAngle(d => d.x1)
                     .outerRadius(this._radius + this._externalLabelRadius)
                     .innerRadius(this._radius + this._externalLabelRadius)
             } else {
                 centroid = _arc.centroid(d);
             if (isNaN(centroid[0]) || isNaN(centroid[1])) {
                 return 'translate(0,0)';
             } else {
                 return `translate(${centroid})`;

    the labels are displayed but labels of each path in the tree overwrite each other. so the position in the path should be taken into account.

    versions: "d3": "^6.6.2", "dc": "^4.2.7"

    opened by rfx77 0
  • 4.0.0(Jan 29, 2020)

  • 3.0.2(May 11, 2018)

    Please see the Changelog for detailed release notes. We don't currently use GitHub Releases for release notes.

    Use dc.js version 3.* if you want compatibility with d3 versions 4 and 5. Use dc.js version 2.* if you want compatibility with d3 version 3. 2.* will be maintained for a limited time.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.2(Mar 30, 2017)

  • 2.0.1(Jan 13, 2017)

  • 2.0.0(Jan 5, 2017)

  • 2.0.0-beta.26(Feb 12, 2016)

  • 1.7.5(Oct 31, 2015)

    Requested in #1023 - and until 2.0 goes live, we have to update the 1.7 branch in order to add stuff to cdnjs.

    So, this still-unsupported branch gets another update.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-beta.19(Sep 18, 2015)

    dc.js 2.0 is very close to a release - please try out this beta!

    Among other changes, beta 19 is a lot faster, because it enables crossfilter optimizations which had been previously unused.

    See the changelog for complete details.

    Source code(tar.gz)
    Source code(zip)
  • 1.7.4(Sep 18, 2015)

    This release just brings the sourcemaps *.map into the distribution so that Chrome will stop complaining about them being missing.

    The 1.7.* branch is still unsupported and its tests fail. Release 2.0 is almost here, please try the latest beta.

    Source code(tar.gz)
    Source code(zip)
  • 1.7.3(Jan 4, 2015)

    • Some corrections to module support for browserify and other node-based modularization schemes
    • Note: tests are broken on this release, and will not be fixed (unless someone cares to contribute). This is mostly due to changes in d3.js. Tests work properly in 2.*
    Source code(tar.gz)
    Source code(zip)
  • 1.7.0(Jun 3, 2014)

  • 1.6.0(Sep 30, 2013)

    • Number Display
    • Axis Labels
    • Revamped slice capping with Pie Charts and new capping with Row Charts
    • Fixed ordinal bar chart spacing and rendering problems
    • New Grunt based build
    • API Docs are built from source comments
    • Numerous tweaks and bug-fixes

    Thanks to the contributions from

    Andrew Swan Bertrand Dechoux Calvin Sim Chaks Chigurupati Gordon Woodhull Jacob Rideout Jon von Gillern Lorcan Coyle Luca Pandini Mu Jing Nick Zhu Olivier Mornard Philippe Martinez Reinout Verkerk Stephen Cassidy

    Source code(tar.gz)
    Source code(zip)
  • 1.5.0(Sep 4, 2013)

    • enhanced focus and zoom capability
    • overhaul stacking logic to better support different stacking styles
    • introduced legend widget
    • various bug fixes and minor enhancements (see v1.5 issue log for details)
    Source code(tar.gz)
    Source code(zip)
  • v1.4.0(Sep 4, 2013)

  • v1.3(Sep 4, 2013)

  • v1.2(Sep 4, 2013)

    • overhaul how Coordinate Grid chart handles negative values
    • upgrade dc.js to d3 version 3
    • improve GeoJson layer control in Geo Choropleth Chart (thanks to Christophe Geiser's contribution)
    • introduced filter handler so custom filter logic can be implemented
    • many minor bug fixes (see issues details)
    Source code(tar.gz)
    Source code(zip)
  • v1.1(Sep 4, 2013)

    • context+focus ability on coordinate grid chart
    • updated NASDAQ example with focus and zoom demo
    • listeners support for {preRender, postRender, preRedraw, postRedraw, filtered} events
    • ordinal scale support on bar chart and line chart
    • fixed area chart drawing issue when new data is added in crossfilter - contribued by Steven Lindberg
    • many minor bug fixes and enhancement (see issue details)
    Source code(tar.gz)
    Source code(zip)
  • v1.0(Sep 4, 2013)

  • v0.9.1(Sep 4, 2013)

  • v0.9(Sep 4, 2013)

    • introduced bubble overlay chart
    • switch data-table widget from using block elements to table
    • updated dc.css structure for better re-usability
    • introduced brush off mode and tooltip support on all coordinate grid charts (line, bar, and bubble chart)
    • added crime in major Canadian cities example
    Source code(tar.gz)
    Source code(zip)
  • v0.8(Sep 5, 2013)

    • data driven coloring
    • renamed retriever to accessor
    • GeoJson based choropleth chart support
    • significant performance improvement
    • many minor bug fixes and enhancement
    Source code(tar.gz)
    Source code(zip)
  • v0.7.0(Sep 5, 2013)

    • elastic x axis support
    • improved bar chart position accuracy
    • renderlet support for injecting custom rendering logic
    • chart scoping support with update/redraw group
    • grid lines support on all coordinate charts
    Source code(tar.gz)
    Source code(zip)
  • v0.6.0(Sep 5, 2013)

  • 0.5.0(Sep 5, 2013)

  • 0.4.0(Sep 5, 2013)

  • 0.2.0(Sep 4, 2013)

  • 0.3.0(Sep 4, 2013)

  • 0.1.0(Sep 4, 2013)

A renderer agnostic two-dimensional drawing api for the web.

Two.js A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, c

Jono Brandel 7.9k Dec 31, 2022
Globe.GL - A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection

A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection. This library is a convenience wrap

Vasco Asturiano 1.3k Jan 3, 2023
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Highcharts JS, the JavaScript charting framework

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. Official website: D

Highsoft 10.9k Jan 9, 2023
A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Novus 7.2k Jan 3, 2023
:dango: An interactive and responsive charting library

English | 简体中文 G2Plot A charting library based on the Grammar of Graphics. G2Plot is an interactive and responsive charting library. Based on the gram

AntV team 2.3k Dec 30, 2022
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
:bar_chart: Declarative Charting Framework for Angular

ngx-charts Declarative Charting Framework for Angular! ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matte

Swimlane 4.2k Dec 27, 2022
📱📈An elegant, interactive and flexible charting library for mobile.

中文 README F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex an

AntV team 7.8k Dec 31, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023
Liquify charting library

Liquify Liquify: fast, multi-threaded visualization of stream data with ChartJS & Angular. The aim of Liquify is to provide a fast, customizable and e

null 4 Aug 23, 2022
React components for Chart.js, the most popular charting library

react-chartjs-2 React components for Chart.js, the most popular charting library. Supports Chart.js v3 and v2. Quickstart • Docs • Slack • Stack Overf

null 5.6k Jan 4, 2023
Chart.js module for charting financial securities

Chart.js Financial Charting Chart.js module for Candlestick and OHLC charts Roadmap Chart.js 2.7.0 added our timeseries scale as new option called dis

Chart.js 630 Dec 29, 2022
Simple yet flexible JavaScript charting for designers & developers

Simple yet flexible JavaScript charting for designers & developers Documentation All the links point to the new version 3 of the lib. Introduction Get

Chart.js 59.4k Jan 10, 2023
📱📈An elegant, interactive and flexible charting library for mobile.

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README 在此衷心感谢《The Grammar of Graphics》的作者

AntV team 7.8k Dec 27, 2022
An easy-to-use cross-framework JS charting library

Compact Chart Visualize your data under a minute, in any Javascript framework Table of Contents About How to use it Examples Demo Plain HTML Example w

Mireo 1 Jul 28, 2021
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Raphael Amorim 1.5k Jan 4, 2023