Seamless D3 and React

Transform your existing D3 charts (or make new ones) and take advantage of React's advanced DOM manipulation and diff capabilitites. Simply include the VirtualDOM class and pass that off to the D3.select and D3 will emit React nodes instead of using document.createElement.

And the ES6sourcefor this example

//Copyright (c) 2016 TimTheSinner All Rights Reserved.
import React, { Component } from 'react';

import * as d3 from 'd3';
import VirtualDOM from '../../src';

export default class SimpleExample extends Component {
  render() {
    //Initialize a new VirtualDOM tree with a root tag of svg and some direct attributes
    const dom = new VirtualDOM('svg', {width:375, className:'center', style:{display:'block'}});

    d3.select(dom) //The magic happens here, D3 is emitting React Nodes instead of Elements
      .selectAll("circle").data([32, 57, 112, 293])
      .enter().append("circle")
        .style("fill", "steelblue")
        .attr("cy", 60)
        .attr("cx", (d, i) => i * 100 + 30)
        .attr("r", (d) => Math.sqrt(d));

    //Return the virtual dom as a React tree rooted at the 'tag' in this case svg.
    //React will diff this tree and update only nodes that need to be refreshed!
    return dom.render();
  }
}