React &

Data Visualization

@fraserxu

Wiredcraft

This talk is not about

React tutorial
Data visualisation tutorial
D3 introduction

React

A JavaScript library for building user interfaces

Process of Data Visualization

Analysis data
Data aggregation
Visualize data(rendering)

Raw Data

Data aggregation

d3.csv('data/shanghai_air.csv', function(data) {
  d3.select('#area')
    .on('change', function() {
      redraw(data, this.value)
    })
    .selectAll('option')
    .data(data
      .map(function(d) { return d['监测点'] })
      .filter(function(e, i, arr) {
        return arr.lastIndexOf(e) === i
    }))
    .enter().append('option')
    .attr('value', function(d) { return d })
    .attr('selected', function(d) { if (d === '') return true})
    .text(function(d) {
      if (d === '') {
        return '全市'
      } else {
        return d
      }
    })

  redraw(data)
})

Visualize data(rendering)

How?

What?

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Prepare HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>D3 Demo</title>
  <script type="text/javascript" src="../node_modules/d3/d3.min.js"></script>
</head>
<body>
  <script>  
  </script>
</body>
</html>

Append SVG

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Set Scale

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "%");

Load Data

d3.tsv("../data/letter.tsv", type, function(error, data) {
  // do something here with data

  // set domain
  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
});

Append Bar

svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); });

Append Axis

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

D3 Demo

How?

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

This talk is not about

React

A JavaScript library for building user interfaces

Process of Data Visualization

Raw Data

Data aggregation

Visualize data(rendering)

How?

What?

Prepare HTML

Append SVG

Set Scale

Load Data

Append Bar

Append Axis

D3 Demo

How?

Three simple guidelines

A React App

What we want

With D3

With Chart Library

A chart component With D3

Use D3 build DOM

Use SVG build DOM

The D3 way redenering logic

How to use

The React(SVG) way redenering logic

React + D3 Demo

React + SVG Demo

With chart Library(react-chartist)

React Chartist Demo

Disclaimer

Conclusion

Choose the way you like!

Further reading

QA?

React &

Data Visualization

This talk is *not* about

React

A JavaScript library for building user interfaces

Process of Data Visualization

Raw Data

Data aggregation

Visualize data(rendering)

How?

What?

Prepare HTML

Append SVG

Set Scale

Load Data

Append Bar

Append Axis

D3 Demo

How?

Three simple guidelines

A React App

What we want

With D3

With Chart Library

A chart component With D3

Use D3 build DOM

Use SVG build DOM

The D3 way redenering logic

How to use

The React(SVG) way redenering logic

React + D3 Demo

React + SVG Demo

With chart Library(react-chartist)

React Chartist Demo

Disclaimer

Conclusion

Choose the way you like!

Further reading

QA?

This talk is not about