Getting Started

Data Format

First prepare your data you want to show on your chart.

react-d3 only support one kind of data format, which is an array with objects (the objects have to have the same keys). Which means you have to have a data like below for example. (data source)

[
  {
    name: "Lavon Hilll I",
    BMI: 20.57,
    age: 12,
    birthday: "1994-10-26T00:00:00.000Z",
    city: "Annatown",
    married: true,
    index: 1
  },
  {
    name: "Clovis Pagac",
    BMI: 24.28,
    age: 26,
    birthday: "1995-11-10T00:00:00.000Z",
    city: "South Eldredtown",
    married: false,
    index: 3
  },
  {
    name: "Gaylord Paucek",
    BMI: 24.41,
    age: 30,
    birthday: "1975-06-12T00:00:00.000Z",
    city: "Koeppchester",
    married: true,
    index: 5
  },
  {
    name: "Ashlynn Kuhn MD",
    BMI: 23.77,
    age: 32,
    birthday: "1985-08-09T00:00:00.000Z",
    city: "West Josiemouth",
    married: false,
    index: 6
  },

  ...
]

The way to load you data

If you have a csv, tsv file, you can use a csv converter to convert it to JSON format. Or using webpack to require your csv via dsv-loader

var data = require('dsv?delimiter=\t!./data/letter.tsv')

// or

var data = require('csv?delimiter=,!./data/test.csv')

Install and setup react-d3 packages

Install and Setup React-d3 packages

Pick one react-d3 you want to install (see gallery). Here we are going to demo using react-d3-basic library to draw a simple line chart.

Install react-d3-basic:

npm install --save react-d3-basic

Set up build tools

react-d3 packages require to be bundled with webpack or browserify

Using Webpack

install wepback:

npm install webpack -g

Sample webpack setting:

'use strict';

var path = require('path');
var webpack = require('webpack');
var js_dist = path.join(__dirname, './dist');

module.exports = [{
  name: 'chartComponent',
  entry: {
    line: './line.jsx',
  },
  output: {
    path: js_dist,
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: [/\.jsx$/],
        loaders: ["jsx-loader?insertPragma=React.DOM&harmony"],
      }
    ],
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
  }
}];

Compile by run:

webpack

Using Browserify

You can use reactify to bundle your .jsx or .js file.

browserify -t reactify main.js

Write chart

Create a new file called line.jsx (which we have setup webpack to compile).

Require Libraries

We need to require some library we need to use:

// first of course react!
var React = require('react');
// require `react-d3-core` for Chart component, which help us build a blank svg and chart title.
var Chart = require('react-d3-core').Chart;
// require `react-d3-basic` for Line chart component.
var LineChart = require('react-d3-basic').LineChart;

Load

Load your data using webpack

var chartData = require('dsv?delimiter=,!../../data/garbage.csv');

Not using webpack

var chartData = [
  // put your data here!
]

Settings

your chart settings (such as settings for axis, legend, lines, chart basic settings)

var width = 700,
    height = 300,
    margins = {left: 100, right: 100, top: 50, bottom: 50},
    title = "User sample",
    // chart series,
    // field: is what field your data want to be selected
    // name: the name of the field that display in legend
    // color: what color is the line
    chartSeries = [
      {
        field: 'BMI',
        name: 'BMI',
        color: '#ff7f0e'
      }
    ],
    // your x accessor
    x = function(d) {
      return d.index;
    }

Render!

Render it in React!

ReactDOM.render(
    <Chart
      title={title}
      width={width}
      height={height}
      margins= {margins}
      >
      <LineChart
        margins= {margins}
        title={title}
        data={chartData}
        width={width}
        height={height}
        chartSeries={chartSeries}
        x={x}
      />
    </Chart>
  , document.getElementById('line-user')
  )

Full code in your javascript

"use strict"

var React = require('react');
var ReactDOM = require('react-dom');
var Chart = require('react-d3-core').Chart;
var LineChart = require('react-d3-basic').LineChart;

(function() {
  // load your general data
  var chartData = require('json!../data/user_sample.json');

  var width = 700,
    height = 300,
    margins = {left: 100, right: 100, top: 50, bottom: 50},
    title = "User sample",
    // chart series,
    // field: is what field your data want to be selected
    // name: the name of the field that display in legend
    // color: what color is the line
    chartSeries = [
      {
        field: 'BMI',
        name: 'BMI',
        color: '#ff7f0e'
      }
    ],
    // your x accessor
    x = function(d) {
      return d.index;
    }

  ReactDOM.render(
    <Chart
      title={title}
      width={width}
      height={height}
      margins= {margins}
      >
      <LineChart
        showXGrid= {false}
        showYGrid= {false}
        margins= {margins}
        title={title}
        data={chartData}
        width={width}
        height={height}
        chartSeries={chartSeries}
        x={x}
      />
    </Chart>
  , document.getElementById('line-user')
  )
})()

Load into your html

Load your bundle js file which webpack or browserify generated into your html.

<html>
  <head>
    <title>line example</title>
  </head>
  <body>
    <div id="line-user"></div>
    <script src="./dist/line.js"></script>
  </body>
</html>

Result

Happy :)

Enjoy your chart!

Code on Github

Code is available on Github