React D3 Library

Virtual DOM

All of your D3 will now be compiled into React Elements which allows the ability to use React's diffing algorithm for full optimization

Flexibility

React D3 Library also supports transitions, animations, tooltips, zoom, brush, event listeners, and the list goes on.

Templates

It's a simple process to create D3 elements in React and because of this we are able to make contributing or using templates easy.

React D3 Components

A library that will allow developers the ability to reroute D3's output to React’s virtual DOM. React-D3-Library will compile your code into React components, and it also comes with a series of D3 template charts converted to React components for developers who are unfamiliar with D3. Not only do we build fully functional React components, but they utilize the power of D3 to automate scaling ranges, normalizing data, and constructing legends.

Contributing

We are an open source library, so feel free to contribute or post any suggestions/ideas for the library!

Get Started

First off, install with:

npm install --save react-d3-library

Next, import into your React project:

const rd3 = require('react-d3-library');

import rd3 from 'react-d3-library'

import React from 'react';
import rd3 from 'react-d3-library';

Use With Existing D3 Code

Developers can now take their existing D3 code and use React-D3-Library to create React components. Below is an excerpt of using D3 to create a Bubble Chart with Mike Bostock's D3 code found here.

var node = document.createElement('div');

var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select(node).append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("flare.json", function(error, root) {
  if (error) throw error;

var bubbles = svg.selectAll(".node")
    .data(bubble.nodes(classes(flare))
    .filter(function(d) { return !d.children; }))
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

//etc...

Don't forget!

We need to create a div element for D3 to build upon before converting it to a React component, var div = document.createElement('div'); and this div is what we will have D3 select. We change the selection from d3.select('body') to our new div variable. d3.select(div)

Just one more step

Make sure to include our React Component.

const RD3Component = rd3.Component;

You will be passing your built up div to it as props.

Use the componentDidMount() React lifecycle method to make the state aware of your new D3 div. Then pass the state as props to the react-d3-library Component rd3.Component.

import rd3 from 'react-d3-library';
import node from 'd3file';
const RD3Component = rd3.Component;

class my_First_React_D3_Library_Component extends React.Component {

  constructor(props) {
    super(props);
    this.state = {d3: ''}
  }

  componentDidMount() {
    this.setState({d3: node});
  }

  render() {
    return (
      <div>
        <RD3Component data={this.state.d3} />
      </div>
    )
  }
};

Also we have templates!

Simple chart templates are also available under the rd3 namespace as shown below

var ScatterPlot = rd3.createScatterPlot;
var PieChart = rd3.createPieChart;
var LineChart = rd3.createLineChart;
var AreaChart = rd3.createAreaChart;
var BarChart = rd3.createBarChart;

Go to templates »