Compose complex, data-driven visualizations from reusable charts and components with d3

Usage no npm install needed!

<script type="module">
  import d3Compose from 'https://cdn.skypack.dev/d3.compose';



Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart.

  • Advanced layout engine automatically positions and sizes charts and components, layers by z-index, and is responsive by default with automatic scaling
  • Standard library of charts and components for quickly creating beautiful charts
  • Chart and Component bases for creating composable and reusable charts and components
  • Includes helpers and mixins that cover a range of standard functionality
  • CSS class-based styling is extensible and easy to customize to match your site

npm version Code Climate

Getting Started

  1. Download the latest release

    • d3.compose-all Includes all charts, components, extensions, and mixins
    • d3.compose-mixins Use if you're creating your own charts/components and want to use d3.compose's mixins to help
    • d3.compose Use if you're using your own charts/components and don't need mixins, charts, or components provided by d3.compose
  2. Download the dependencies:

  3. Add d3.compose and dependencies to your html:

    <!doctype html>
        <!-- ... -->
        <link rel="stylesheet" type="text/css" href="d3.compose.css">
        <!-- ... -->
        <script src="d3.js"></script>
        <script src="d3.chart.js"></script>
        <script src="d3.compose-all.js"></script>
        <!-- Your code -->
  4. Create your first chart

    var chart = d3.select('#chart')
      .chart('Compose', function(data) {
        var scales = {
          x: {type: 'ordinal', data: data, key: 'x'},
          y: {data: data, key: 'y'}
        var charts = [
            data: data,
            xScale: scales.x,
            yScale: scales.y
        var yAxis = d3c.axis({scale: scales.y});
        return [
          [yAxis, d3c.layered(charts)]
    chart.draw([{x: 0, y: 10}, {x: 10, y: 50}, {x: 20, y: 30}]);

Examples and Docs

See http://CSNW.github.io/d3.compose/ for live examples and docs.


  1. Install modules npm install
  2. Test with npm test or npm run test:watch
  3. Build with npm run build

Note on testing: Requires Node 4+ (for latest jsdom) and d3.chart doesn't currently support running from within node and requires the following line be added inside the IIFE in node_modules/d3.chart.js: window = this; (before use strict). This will be resolved by a pending PR to fix this issue with d3.chart (also, the dependency on d3.chart is likely to be removed in a later version of d3.compose).


(With all changes merged to master and on master branch)

  1. npm version {patch|minor|major|version}
  2. npm publish


  1. On master, run npm run docs
  2. Switch to gh-pages branch
  3. Navigate to _tasks directory (cd _tasks)
  4. (npm install _tasks, if necessary)
  5. Run docs task npm run docs
  6. Navigate back to root
  7. View site with bundle exec jekyll serve

Note: For faster iteration, create a separate clone, switch to gh-pages branch, set docs_path environment variable to original clone (e.g. Windows: SET docs_path=C:\...\d3.compose\_docs\), and then run steps 3-6.