JSFiddle - React, Tailwind, and code Playground

by esbullington

HTML

<html> 
  <head> 
    <title>D3</title> 
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script> 
    <style type="text/css">

    </style> 
  </head> 
  <body> 
      
      <div id="chart"></div>

  </body> 
</html>

CoffeeScript

DATA = []
for x in [0..99]
    DATA.push(Math.floor(Math.random()*100))

console.log DATA
width = 400
height = 400

dataDomain = d3.extent(DATA)
xScale = d3.scale.linear().domain([0, DATA.length]).range([0,width])
yScale = d3.scale.linear().domain(dataDomain).range([height,0])

vis = d3.select("#chart")
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height)

render = ()->
    console.log "working"
    pulse = ()->
      d3.select(this)
          .transition()
          .duration(500)
          .delay(1000)
          .attr("r", 0)
          .remove()

    circles = vis.selectAll("circle")
            .data(DATA)
            .enter()
            .append("svg:circle")
            .attr("class", "circles")
            .attr("fill", "black")
            .attr("cx", (d,i)-> xScale(i))
            .attr("cy", (d,i)-> yScale(d))
            .attr("r", 0)
            .transition()
            .duration(500)
            .delay(1000)
            .attr("r", 5)
            .each("end", pulse)
    false

            
d3.timer(render)