Pie Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    var size = 400
    var padding = 40
    var data = [1, 1, 2, 5, 8, 12, 15, 21]
    
    var colors = d3.scaleOrdinal(d3.schemeCategory20);
    
    // create pie angles from data
    var pie = d3.pie()(data)
    console.log(pie)
    
    // setup arc function
    var arc = d3.arc()
    	.innerRadius(0)
    	.outerRadius(size / 2 - padding)
    	.startAngle(d => d.startAngle)
    	.endAngle(d => d.endAngle)
    
    // render to svg
    var svg = d3.select("svg")
      .attr("width", size)
      .attr("height", size)

svg.append("g")
    	.attr('transform', 'translate('+size/2+', '+size/2+')')
      .selectAll('path')
    	.data(pie).enter().append('path')
    	.attr('d', arc)
	    .attr('fill', d => colors(d.index))
    	.attr('stroke', '#fff')

</script>
</body>

https://d3js.org/d3.v4.min.js