Integrating D3 within React

d3-react.js

/*
 * A function for integrating D3 and React.
 *
 * Receives a reusable D3 chart as per https://bost.ocks.org/mike/chart/.
 *
 * Returns a React component which Renders the chart and updates it 
 * using the 'data' property from its 'props' object.
 */
 
// IMPLEMENTATION:
import {createClass, createElement, createFactory} from 'react'
import d3 from 'd3'

export default (d3Component) => {
    
    const svg = createFactory('svg')

    const renderD3 = (data) => (component) => {
         d3.select(component).datum(data).call(d3Component)
    }

    return createClass({
        render () {
            return svg({className:'graphic', ref:renderD3(this.props.data)})
        }
    })
        
}

//USAGE
//Configure the D3 chart
const myChart = chart().width(720).height(80);

//Use it in a layout
export default (props) => CreateElement(toD3(myChart), {data: props.chartData})