cubism-es is an ES6 module of cubism, based on D3V5.
IMPORTANT Version 1.1.0 contains api breaks. Please see below for details
- ES6 Usage
npm install cubism-es --save
import { context } from 'cubism-es';
Please note adding cubism-es will automatically add d3 as a dependency into your project.
From version 1.1.2, there's no need to declare d3 as globals in your project with the webpack ProvidePlugin
- Standalone Usage
<script src="lib/d3.v5.min.js" charset="utf-8" type="application/javascript"></script>
<script src="lib/cubism-es.standalone.js" charset="utf-8" type="application/javascript"></script>
| function | cubism | cubism-es |
|---|---|---|
| Context.axis | d3.select(...).call(context.axis) |
context.axis().render(d3.select(...)) |
| Context.rule | d3.select(...).call(context.rule) |
context.rule().render(d3.select(...)) |
| Context.horizon | d3.select(...).call(context.horizon) |
context.horizon().render(d3.select(...)) |
| function | cubism | cubism-es |
|---|---|---|
| Context | d3.select(...).call(cubism.context) |
const context = cubism.context(d3.select(...)).height(30) |
| Context.axis | d3.select(...).call(context.axis) |
context.axis(d3.select(...)) |
| Context.rule | d3.select(...).call(context.rule) |
context.rule(d3.select(...)) |
| Context.horizon | d3.select(...).call(context.horizon) |
context.horizon(d3.select(...)) |
the following samples work, you can try them by downloading this project and running npm install and npm run dev:
- Mike, Bostock's stock demo
- Patrick, Thompson's Discrete Cubism
- Square Inc's demo
- Mike, Bostock's random demo
- Comparison
- Clone repository
- Run commands
npm install // install dependencies
npm run dev // view demos in web browser at localhost:3004
npm run build // build
npm run test // run tests only
npm run test:cover // run tests and view coverage report
For more information, please visit square/cubism's home page and wiki
Graphite, Cube and GangliaWeb have not been verified yet.
Contributors of the original cubism.
This project is licensed under the MIT License - see the LICENSE file for details
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent