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>

CSS

.label {
    font-family: Arial;
    color: black;
    
}

CoffeeScript

fsec = d3.time.format("%S s")
fmin = d3.time.format("%M m")
fhou = d3.time.format("%H h")

fields = ->
  d = new Date()

  second = d.getSeconds()
  minute = d.getMinutes()
  hour = d.getHours() + minute/60

  window.data = [
    "unit": "seconds"
    "text": fsec(d)
    "numeric": second
  ,
    "unit": "minutes"
    "text": fmin(d)
    "numeric": minute
  ,
    "unit": "hours"
    "text": fhou(d)
    "numeric": hour
  ]

pi = Math.PI
data2 = [1,2,3,4,5,6,7,8,9,10,11,12]

#converting from degs to radians
angle = (n)-> n * pi/180


w = 400
h = 400
labelr = 10
r = 100
scaleSecs = d3.scale.linear().domain([0,60]).range([0,2*pi])
scaleHours = d3.scale.linear().domain([0,12]).range([0,2*pi])

vis = d3.select("body")
    .append("svg:svg") 
    .attr("width", w) 
    .attr("height", h)
    
arcGroup = vis
    .append("svg:g")
    .attr("transform", "translate(200,200)")    

arcGroup.append("svg:circle")
    .attr("r", 80)
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("stroke-width", 2)

arcGroup.append("svg:circle")
    .attr("r", 3)
    .attr("fill", "black")


render =(data)->
    arcGroup.selectAll(".secondhand").remove()

    secondArc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(70)
        .startAngle((d)-> scaleSecs(d.numeric))
        .endAngle((d)-> scaleSecs(d.numeric))

    minuteArc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(70)
        .startAngle((d)-> scaleSecs(d.numeric))
        .endAngle((d)-> scaleSecs(d.numeric))

    hourArc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(45)
        .startAngle((d)-> scaleHours(d.numeric%12))
        .endAngle((d)-> scaleHours(d.numeric%12))
        
    arcGroup.selectAll(".secondhand")
        .data(data)
        .enter()
        .append("path")
        .attr("d", (d)->
            if d.unit is "seconds"
                secondArc(d) 
            else if d.unit is "minutes"
                minuteArc(d)
            else if d.unit is "hours"
         ...