JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<body>
    
    <pre id="csvdata" hidden>
day,donut
Monday,91
Tuesday,23
Wednesday,7
Thursday,4
Friday,82
Saturday,39
Sunday,27
    </pre>
</body>

JavaScript

var raw = d3.select("#csvdata").text();
var parsed = d3.csv.parse(raw);
var dataset = parsed;

var width = 300;
var height = 300;
var radius = Math.min(width, height) / 2;
var donutWidth = 80;                           
var color = d3.scale.category10();
var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width / 2) + 
    ',' + (height / 2) + ')');

var arc = d3.svg.arc()
  .innerRadius(radius - donutWidth)             
  .outerRadius(radius);

var pie = d3.layout.pie()
  .value(function(d) { return d.donut; })
  .sort(null);
var path = svg.selectAll('path')
  .data(pie(dataset))
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', function(d, i) { 
    return color(d.data.day);
  });