JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<svg></svg>

CoffeeScript

dataset = [
  { label: 'Abulia', count: 10 }, 
  { label: 'Betelgeuse', count: 20 },
  { label: 'Cantaloupe', count: 30 },
  { label: 'Dijkstra', count: 40 }
];

O = 
  margin: {top: 85, bottom: 20, left: 88, right: 20}
  width: 600
  height: 400
  
O.W = O.width + O.margin.left + O.margin.right
O.H = O.height + O.margin.top + O.margin.bottom
  
  
svg = d3.select("svg")
  .attr("width", O.W)
  .attr("height", O.H)
  .append("g")
    .attr("transform", "translate(#{O.margin.left}, #{O.margin.top})")
    
 
arc = d3.svg.arc()
  .innerRadius(50)
  .outerRadius(70)
 
  
pie = d3.layout.pie()
  .value((d) -> d.count)
  .padAngle(0.03*Math.PI)
  .sort(d3.ascending)

color = d3.scale.category10()
  
 
svg.selectAll("path")
  .data(pie(dataset)).enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", (d, i) -> color(i))