JSFiddle - React, Tailwind, and code Playground

by esbullington

HTML

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

    </style> 
  </head> 
  <body> 
    <script type="text/javascript"> 


    </script> 
  </body> 
</html>

CoffeeScript

arcs = (data0, data1) ->
  arcs0 = donut(data0)
  arcs1 = donut(data0)
  i = -1
  arc = undefined
  while ++i < n
    arc = arcs0[i]
    arc.innerRadius = r0
    arc.outerRadius = r1
    arc.next = arcs0[i]
  arcs0

swap = (d, i) ->
  angTr = (Math.PI / 2) - (d.endAngle + d.startAngle) / 2
  angTr = 2 * Math.PI - ((d.endAngle + d.startAngle) / 2) + Math.PI / 2  if (d.endAngle + d.startAngle) / 2 > (Math.PI * 3 / 2)
  angTrans.chg angTr
  d3.selectAll("g.arc > path").each transitionRotatealone
 
transitionRotatealone = (d, i) ->
  a0 = d.startAngle + d.endAngle + 2 * angTrans.value()
  a1 = d.startAngle - d.endAngle
  d3.select(this).transition().duration(2500).attrTween "d", tweenArc(
    startAngle: (a0 + a1) / 2
    endAngle: (a0 - a1) / 2
  )

tweenArc = (b) ->
  (a) ->
    i = d3.interpolate(a, b)
    for key of b # update data
      a[key] = b[key]
    (t) ->
      arc i(t)
w = 400
h = 400
r1 = Math.min(w, h) / 2
r0 = 0 #r1 * .6
n = 10
q = 0
data0 = d3.range(n).map(Math.random)
data1 = data0
data = undefined
color = d3.scale.category20()
arc = d3.svg.arc()
donut = d3.layout.pie()
vis = d3.select("body").append("svg:svg")
  .attr("width", w)
  .attr("height", h)
  .on("mousedown", test)

curKey = (myVal) ->
  changeBy = (val) ->
    privateString = val
  privateString = ""
  chg: (Val) ->
    changeBy Val
  value: ->
    privateString

angTrans = curKey()

vis.selectAll("g.arc")
    .data(arcs(data0, data1))
    .enter().append("svg:g")
    .attr("class", "arc")
    .attr("transform", "translate(" + r1 + "," + r1 + ")")
    .append("svg:path")
    .attr("fill", (d, i) ->
      color i
    )
    .attr("d", arc)
    .text((d) ->
      d.value
    )
    .on "mousedown", test
    
test = (evt)->
    alert "works"