React with D3

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>

CoffeeScript

R = React.DOM
Rc = React.createElement

d3Circles = ->
  exports = (selection) ->
    selection.each (data) ->
      items = d3.select(@)
        .selectAll(".item")
        .data(data)
      items.select("circle")
        .attr
          cx: (d, i) -> i*20 + 10
          cy: 40
          r: 0
          fill: 'steelblue'
        .transition()
        .delay((d, i) -> i*100)
        .attr
          r: 10

d3Text = ->
  exports = (selection) ->
    selection.each (data) ->
      items = d3.select(@)
        .selectAll(".item")
        .data(data)
      items.select("text")
        .attr
           x: (d, i) -> i*20 + 10
           y: 70
        .style
            "font-size": 0
            "text-anchor": "middle"
        .text((d) -> d)
        .transition()
        .delay((d, i) -> i*100)
        .style
           "font-size": 13
        
            
            

Scatter = React.createClass
  componentDidMount: ->
    d3.select(@refs.chart)
      .datum(@props.data)
      .call(d3Circles())
    d3.select(@refs.chart)
      .datum(@props.data)
      .call(d3Text()) 
  render: ->
    R.svg {ref: 'chart', width: 400, height: 300},
      R.g {className: "scatter"},
        @props.data.map (d, i) -> 
          R.g {key: i, className: 'item'},
            R.circle {}
            R.text {}



ReactDOM.render(
  Rc(Scatter, {data: d3.range(10)}),
  document.getElementById("main")
)