Clickabl

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

gridHeight = d3.range(10)
numBins = d3.range(10)

expand_grid = (x, y) ->
  d3.merge(x.map (x_) -> y.map (y_) -> {x: x_, y: y_})

data = expand_grid(numBins, gridHeight)



Grid = (props) ->
  {data, W, H} = props
  S =
    x: d3.scale.ordinal()
    y: d3.scale.ordinal()
  A =
    x: (d) -> d.x
    y: (d) -> d.y
  S.x.rangeRoundBands([0, W]).domain(data.map(A.x), 0, 0.01)
  S.y.rangeRoundBands([H, 0]).domain(data.map(A.y), 0, 0.01)
  render: ->
    R.svg {width: W*1.1, height: H*1.1},
      R.g {transform: "translate(20, 20)"},
        data.map (d, i) ->
          R.rect {
             key: i
             x: S.x A.x(d)
             y: S.y A.y(d)
             height: S.x.rangeBand()
             width: S.y.rangeBand()
             fill: "#eee"
             stroke: "white"
            }
    
ReactDOM.render(
  Rc(Grid, {data: data, W: 300, H: 300}),
  document.getElementById("main")
)