JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-10">
           <button id="update" class='btn btn-default'>Update</button>
           <svg></svg> 
        </div>
    </div>
</div>

CoffeeScript

W = 300
H = 300
margin = {top: 150, left: 150, right: 20, bottom: 20}

arcTween = (transition, newAngle) ->
  transition.attrTween "d", (d) ->
    interpolate = d3.interpolate(d.endAngle, newAngle)
    (t) -> 
      d.endAngle = interpolate(t)
      arc(d)
    


svg = d3.select("svg")
  .attr("width", W)
  .attr("height", H)
  .append("g")
    .attr("transform", "translate(#{W/2}, #{H/2})")  

arc = d3.svg.arc()
  .innerRadius(90)
  .outerRadius(120)
  .startAngle(0)
    
background = svg.append("path")
  .datum({endAngle: 2 * Math.PI})
  .style("fill", "#ddd")
  .attr("d", arc)
    
foreground = svg.append("path")
  .datum({endAngle: 0.127 * 2 * Math.PI})
  .style("fill", "darkorange")
  .attr("d", arc)
    
d3.select("#update").on "click", ->
  foreground
    .transition()
    .duration(750)
    .call(arcTween, Math.random() * 2 * Math.PI)