Three simple guidelines

One source of truth
Stateless all the things
Don't make to many assumptions

A React App

'use strict';

import React from 'react';

class App extends React.Component {

  displayName: 'App'

  constructor() {
    super();

    this.state = {
      name: 'Fraser Xu'
    };
  }

  render() {
    let { name } = this.state;
    return (
      <h1>Hi {name}</h1>
    )
  }

}

export default App;

What we want

'use strict';

import React from 'react';
import ChartComponent form './ChartComponent';

class App extends React.Component {

  displayName: 'App'

  constructor() {
    super();

    this.state = {
      data: [1, 2, 3, 4, 5]
    };
  }

  render() {
    let { data } = this.state;
    return (
      <ChartComponent data={data} />
    )
  }

}

export default App;

With D3

Low level API
Flexible code structure
Easy customisation
Lots of code

With Chart Library

High level API
Ready for use style
Hard to customisation

A chart component With D3

'use strict';

import React from 'react';
import d3 from 'd3';

class Barchart extends React.Component {
  displayName: 'Barchart'
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.renderBarChart();
  }
  renderBarChart() {
    // render chart
  }
  render() {
    return (
      <svg />
    )
  }
}

Barchart.defaultProps = {
  width: 800,
  height: 200,
  fillColor: '#d70206'
}

export default Barchart;

Use D3 build DOM

Powerful D3
Lost control of DOM by React
No Virtual DOM

Use SVG build DOM

Virtual DOM
Lost built-in D3 update and animation

Image Source

The D3 way redenering logic

let { width, height, fillColor, data } = this.props;

let values = data.slice();

let yScale = d3.scale.linear()
  .range([height, 0]);

yScale.domain([0, Math.max.apply(null, values)]);

let svg = React.findDOMNode(this);

let chart = d3.select(svg)
  .attr('width', this.props.width)
  .attr('height', this.props.height + 1);

let barWidth = width / values.length;

let bar = chart.selectAll('g')
    .data(values)
  .enter().append('g')
    .attr('transform', (d, i) => `translate(${i * barWidth}, 0)`);

bar.append('rect')
  .attr('y', (d) => yScale(d))
  .attr('height', (d) => height - yScale(d))
  .attr('width', (d) => barWidth - 1)
  .attr('fill', fillColor);

How to use

'use strict';

import React from 'react';

import Barchart from './Barchart';

class App extends React.Component {

  displayName: 'App'

  render() {
    let data = {
      series: [
        [1, 2, 4, 8, 6]
      ]
    };

    return (
      <div>
        <Barchart data={data.series[0]} />
      </div>
    )
  }

}

React.render(<App />, document.body);

The React(SVG) way redenering logic

'use strict';

import React from 'react';

class Chart extends React.Component {

  displayName: 'Chart'

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <svg width={this.props.width} height={this.props.height}>{this.props.children}</svg>
    )
  }
}

export default Chart;

'use strict';

import React from 'react';

class Bar extends React.Component {

  displayName: 'Bar'

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <rect fill={this.props.color}
        width={this.props.width} height={this.props.height}
        x={this.props.offset} y={this.props.availableHeight - this.props.height} />
    )
  }

}

Bar.defaultProps = {
  width: 800,
  height: 200,
  fillColor: '#d70206'
}

export default Bar;

'use strict';
import React from 'react';
import d3 from 'd3';
import Bar from './Bar';
class DataSeries extends React.Component {
  displayName: 'DataSeries'
  constructor(props) {
    super(props);
  }
  render() {
    let { data, width, height, color } = this.props;
    let yScale = d3.scale.linear().domain([0, d3.max(data)])
      .range([0, height]);
    let xScale = d3.scale.ordinal().domain(d3.range(data.length))
      .rangeRoundBands([0, width], 0.05);
    let bars = this.props.data.map((point, i) => {
      return (
        <Bar 
            height={yScale(point)}
            width={xScale.rangeBand()}
            offset={xScale(i)}
            availableHeight={height}
            color={color}
            key={i} 
        />
      )
    });
    return (
      <g>{bars}</g>
    );
  }
}
export default DataSeries;

'use strict';

import React from 'react';

import Chart from './Chart';
import DataSeries from './DataSeries';

class App extends React.Component {

  displayName: 'App'

  render() {
    return (
      <Chart width={this.props.width} heigh={this.props.heigh}>
        <DataSeries
          data={[ 30, 10, 5, 8, 15, 10 ]}
          width={this.props.width}
          height={this.props.height}
          color="cornflowerblue"
        />
      </Chart>
    )
  }

}

React.render(<App width={600} height={800} />, document.body);

React + D3 Demo

React + SVG Demo

With chart Library(react-chartist)

'use strict';

import React from 'react';
import ChartistGraph from 'react-chartist';
class App extends React.Component {
  displayName: 'App'
  render() {
    let data = {
      labels: ['W1', 'W2', 'W3', 'W4', 'W5'],
      series: [
        [1, 2, 4, 8, 6]
      ]
    };
    let options = {
      high: 10,
      axisX: {
        labelInterpolationFnc: function(value, index) {
          return index % 2 === 0 ? value : null;
        }
      }
    };
    let type = 'Bar'
    return (
      <div>
        <ChartistGraph data={data} options={options} type={type} />
      </div>
    )
  }
}
React.render(<App />, document.body);

React &

Data Visualization

deck

More from fraser xu