!!! rumble-charts was moved
https://github.com/rumble-charts/rumble-charts
rumble-charts
React components for building composable and flexible charts.
It's based on D3.js under the hood, but most of the time you will not feel that.
Documentation
All examples are editable. You can see a result right on the page.
https://rumble-charts.github.io
Demo / live edit
rosko.github.io/slides/2016-04-declarative-charts/#/liveedit
Installation
NPM
npm install --save rumble-charts
Usage
Just include it:
const { // main component Chart, // graphs Bars, Cloud, Dots, Labels, Lines, Pies, RadialLines, Ticks, Title, // wrappers Layer, Animate, Transform, Handlers, // helpers helpers, DropShadow, Gradient } = require('rumble-charts');
And use:
const series = [{ data: [1, 2, 3] }, { data: [5, 7, 11] }, { data: [13, 17, 19] }]; class Demo extends Component { render() { return <Chart width={400} height={400} series={series} minY={0}> <Bars /> <Lines /> <Dots /> </Chart>; } }
Road map
- Write unit tests for graphics components
- Make a first version of documentation with examples
- Update to React 15.x
- Update to lodash 4.x
- Write unit tests for wrappers and helpers components
- Support React ART
- Support morphing between graphics types (Pies <=> Bars)
Similar projects
Mainly there are 3 approaches to integrate React and D3:
- React wraps D3
- D3 prepares virtual DOM for React
- react-faux-dom
- d3-react-sparkline - based on react-faux-dom
- React builds virtual DOM, D3 makes math (
rumble-charts
is here)- react-d3-components
- react-d3 and rd3 as a fork
- react-vis
- victory
License
MIT