JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<svg></svg>

CSS

circle, rect {
  stroke: #aaa;
}

svg text {
  text-anchor: middle;
  alignment-baseline: middle; 
  font-family: "Helvetia";
}

CoffeeScript

svg = d3.select("svg")
  .attr("width", 600)
  .attr("height", 400)
  .append("g")
  .attr("transform", "translate(30, 100)")
  
  
update = (data) ->
  elem = svg.selectAll("g").data(data)
  elemEnter = elem.enter().append("g")
 
  circleEnter = elemEnter.append("circle")
  rectEnter = elemEnter.append("rect")
  textEnter = elemEnter.append("text")
  
  g = svg.selectAll("g")  
  g.select("circle")
    .attr("cx", (d, i) -> i*80 + 10)
    .attr("cy", 0)
    .attr("r", 20)
    .attr("fill", "#dbdbdb")
  
  g.select("text")
    .attr("x", (d, i) -> i*80 + 10)
    .text((d) -> d)
  
  
  H = 148
  
  g.select("rect")
    .attr("x", (d, i) -> i*80 - 10)
    .attr("y", (d) -> H - 2*d)
    .attr("width", 40)
    .attr("height", (d) -> 2*d)
    .attr("fill", "#dbdbdb")
    
    
draw = ->
  data = d3.range(4).map(Math.random).map((d) -> Math.round(50*d))
  console.log(data)
  update(data)
  return

draw()
#setInterval(draw, 1500)