JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/radio/0.2.0/radio.min.js"></script>
<svg></svg>

CoffeeScript

data = d3.range(5)

svg = d3.select("svg")

circles = svg.append("g").selectAll('circle')
  .data(data).enter()
  .append('circle')
  .attr('cx', (d, i) -> i*32 + 30)
  .attr('cy', 20)
  .attr('r', 5)
  
circles.on "click", (d, i) ->    
  radio('event').broadcast(d)
    
   
update = () ->
  (selection) -> 
    selection.each (data) ->
      # update selection
      circles = selection
        .selectAll('circle')
        .data(data)
    
      # enter selection
      circles.enter().append('circle')
    
      # update + enter selection
      circles.transition()
        .delay((d, i) -> i/data.length*900)
        .attr('cx', (d, i) -> i*32 + 30)
        .attr('cy', 40)
        .attr('r', 5)
    
      # exit selection
      circles.exit().transition()
        .delay((d, i) ->  i/data.length*400)
        .remove()
  
circles2 = svg.append('g')
  .attr("id", "circles2")
  
  
#circles2.data([data]).call(update())
  
#update(circles2, data)
    
###  
circles2 = svg.append("g")
  .attr("id", "circles2")
  .selectAll('circle')
  .data(data)
    
circles2.enter()
  .append('circle')
  .attr('cx', (d, i) -> i*32 + 30)
  .attr('cy', 40)
  .attr('r', 5)
###
    
radio('event').subscribe (d) ->
  circles2
    .data([d3.range(2*(d + 1))])
    .call(update())