Compose complex, data-driven visualizations from reusable charts and components with d3
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
integration
src
test
.codeclimate.yml
.eslintrc
.gitattributes
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
bower.json
gulpfile.js
index.js
package.json
rollup.config.js
yarn.lock
yuidoc.json

README.md

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

  2. Download the dependencies:

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

    <!doctype html>
    <html>
      <head>
        <!-- ... -->
    
        <link rel="stylesheet" type="text/css" href="d3.compose.css">
      </head>
      <body>
        <!-- ... -->
    
        <script src="d3.js"></script>
        <script src="d3.chart.js"></script>
    
        <script src="d3.compose.js"></script>
    
        <!-- Your code -->
      </body>
    </html>
  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 = [
          d3c.lines({
            data: data,
            xScale: scales.x,
            yScale: scales.y
          })
        ];
    
        var yAxis = d3c.axis({scale: scales.y});
    
        return [
          [yAxis, d3c.layered(charts)]
        ];
      })
      .width(600)
      .height(400);
    
    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.

Development

  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).

Release

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

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

Docs

  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.