github.com/CSNW/d3.compose @v0.15.21
Chat with this repoWhat it actually does AI analysis from the code graph — generated when you open this
README
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
ChartandComponentbases 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
-
Download the dependencies:
-
Add d3.compose and dependencies to your html:
```html <!doctype html>
<link rel="stylesheet" type="text/css" href="https://github.com/CSNW/d3.compose/raw/v0.15.21/d3.compose.css"><script src="https://github.com/CSNW/d3.compose/raw/v0.15.21/d3.js"></script> <script src="https://github.com/CSNW/d3.compose/raw/v0.15.21/d3.chart.js"></script> <script src="https://github.com/CSNW/d3.compose/raw/v0.15.21/d3.compose.js"></script>```
-
Create your first chart
```js 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
- Install modules
npm install - Test with
npm testornpm 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-pagesbranch - Navigate to
_tasksdirectory (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.
Core symbols most depended-on inside this repo
Shape
Languages
Modules by API surface
For agents
$ claude mcp add d3.compose \
-- python -m otcore.mcp_server <graph>