Mobservable + D3

by ramnathv

HTML

<script src="//cdn.rawgit.com/mweststrate/mobservable/master/dist/mobservable.min.js"></script>
<button id='add-point'>Add</button>
<button id='remove-point'>Remove</button>
<input type='color' id='color' value='#ff0000' class='observable'/>
<input type="number" value=5 id='radius' class='observable'>

<div>
 <svg></svg> 
</div>

CSS

svg{
  width: 300px;
  height: 50px;
}

CoffeeScript

{observable, autorun} = mobservable

initObservables = ->
  window.input = {}
  bind = (id, event = 'change') ->
    el = document.getElementById(id)
    if (typeof input[id] is 'undefined')
      input[id] = observable(el.value)
    el.addEventListener event, (e) ->
      input[id](e.target.value)
      console.log input[id]()
    return input[id]()
  d3.selectAll('.observable').each ->
    bind d3.select(this).attr('id')
    
initObservables()

d3circles = (data, fill, r) ->
  console.log('rerendering...')
  svg = d3.select("svg")
  circles = svg.selectAll('circle').data(data)
  circles.enter().append("circle")
    .attr r: 0
  circles
    #.transition()
    #.delay((d, i) -> i/data.length*1000)
    .attr
      cx: (d, i) -> i*10 + 5
      cy: 25
      r: r
      fill: fill
  circles.exit().remove()

n = observable(10)
data = observable(-> d3.range(n()))
  

d3.select('#add-point').on 'click', ->
  n(n() + 1)
d3.select('#remove-point').on 'click', ->
  n(n() - 1)

autorun -> d3circles(data(), input.color(),input.radius())