dc-react
React Components for DC.js
Usage
class App extends Component { constructor(props) { super(props); this._crossfilterContext = null; } crossfilterContext = (callback) => { if (!callback) { return this._crossfilterContext; } d3.csv('../ndx.csv', (data) => { for (let d of data) { d.dd = dateFormat.parse(d.date); d.month = d3.time.month(d.dd); d.close = +d.close; d.open = +d.open; } this._crossfilterContext = new CrossfilterContext(data); callback(this._crossfilterContext); }); }; render() { return ( <ChartContainer className="container" crossfilterContext={this.crossfilterContext}> <BubbleChart className="row" dimension={ctx => ctx.yearlyDimension} group={ctx => ctx.yearlyPerformanceGroup} width={990} height={250} colorAccessor={d => d.value.absGain} keyAccessor={p => p.value.absGain} valueAccessor={p => p.value.percentageGain} radiusValueAccessor={p => p.value.fluctuationPercentage} x={d3.scale.linear().domain([-2500, 2500])} y={d3.scale.linear().domain([-100, 100])} r={d3.scale.linear().domain([0, 4000])} colorDomain={[-500, 500]} /> <div className="row"> <PieChart dimension={ctx => ctx.gainOrLossDimension} group={ctx => ctx.gainOrLossGroup} width={280} height={180} radius={80} label={(d) => { let percent = numberFormat(d.value / this.crossfilterContext().groupAll.value() * 100); return `${d.key} (${percent}%)`; }} /> <PieChart dimension={ctx => ctx.quarterDimension} group={ctx => ctx.quarterGroup} width={280} height={180} radius={80} innerRadius={30} /> <RowChart dimension={ctx => ctx.dayOfWeekDimension} group={ctx => ctx.dayOfWeekGroup} width={280} height={180} elasticX={true} label={d => d.key.split('.')[1]} /> </div> <DataCount dimension={ctx => ctx.crossfilter} group={ctx => ctx.groupAll} /> <DataTable dimension={ctx => ctx.dateDimension} group={d => `${d.dd.getFullYear()}/${d.dd.getMonth()+1}`} columns={[ 'date', 'open', 'close', 'volume' ]} /> <div className="clearfix" /> </ChartContainer> ); }}
For the concrete example, please check: https://github.com/soloman1124/dc-react-example