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
andComponent
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
Getting Started
-
Download the latest release
d3.compose-all
Includes all charts, components, extensions, and mixinsd3.compose-mixins
Use if you're creating your own charts/components and want to use d3.compose's mixins to helpd3.compose
Use if you're using your own charts/components and don't need mixins, charts, or components provided by d3.compose
-
Download the dependencies:
-
Add d3.compose and dependencies to your html:
<!-- ... --><!-- ... --><!-- Your code --> -
Create your first chart
var chart = d3width600height400;chart;
Examples and Docs
See http://CSNW.github.io/d3.compose/ for live examples and docs.
Development
- Install modules
npm install
- Test with
npm test
ornpm run test:watch
- 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)
npm version {patch|minor|major|version}
npm publish
Docs
- On master, run
npm run docs
- Switch to
gh-pages
branch - Navigate to
_tasks
directory (cd _tasks
) - (
npm install
_tasks, if necessary) - Run docs task
npm run docs
- Navigate back to root
- 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.