React with D3 Basic Example

by ramnathv

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<div id="main">
    
</div>

CSS

#main{margin: 30px;}

CoffeeScript

d3Scatter = ->
  exports = (selection) ->
    selection.each (data) ->
      S =
        x: d3.scale.linear()
        y: d3.scale.linear()
      A =
        x: (d) -> d.x
        y: (d) -> d.y
      S.x.range([0, 300])
      S.y.range([200, 0])
      circles = d3.select(@)
        .selectAll("circle")
        .data(data)
      circles.enter().append('circle')
        .attr "fill", "green"
      circles.attr
           cx: (d) -> S.x A.x(d)
           cy: (d) -> S.y A.y(d)
           r: 4
        .transition().duration(3000).attr
          fill: "steelblue"
      circles.exit().remove()
  
random_data = (N) ->
  N = Math.round(Math.random()*40)
  d3.range(N).map (i) ->
    x: Math.random(), y: Math.random()
  
R = React.DOM
Rc = React.createElement

d3Chart = React.createClass
  draw: ->
    d3.select(@refs.chart)
      .datum(@props.data)
      .call @props.chart()
  componentDidMount: -> @draw()
  componentDidUpdate: -> @draw()
  render: ->
    R.svg {ref: 'chart', width: 340, height: 240}
    

Hello = React.createClass
  componentDidMount: -> 
    d3.select(@refs.chart)
      .datum(@props.data)
      .call d3Scatter()
  componentDidUpdate: ->
    d3.select(@refs.chart)
      .datum(@props.data)
      .call d3Scatter()
  render: ->
   R.svg {ref: 'chart', width: 340, height: 240}
            
App = React.createClass
  getInitialState: -> {data: random_data(10)}
  handleClick: (e) -> @setState data: random_data(20)
  render: ->
    R.div {},
      R.button {onClick: @handleClick}, "Update"
      R.br()
      #Rc(Hello, {data: @state.data})
      Rc(d3Chart, {data: @state.data, chart: d3Scatter})
    
ReactDOM.render(
  Rc(App),
  document.getElementById("main")
)