examples/pie.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src="../web_modules/d3/d3.js"></script>
  <style type="text/css">
    body {
      width: 800px;
      margin: 25px auto;
      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
  </style>
</head>

<body>
  <h1>D3 Pie Example</h1>

  <script type="text/javascript">
    const width = 800;
    const height = 600;

    // Creates sources <svg> element
    const svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);

    const g = svg.append('g')
      .attr('transform', `translate(${width/2}, ${height/2})`);

    const data = [1, 2, 0.5, 1, 1.5];

    const radius = Math.min(width, height) / 2;

    const color = d3.scaleOrdinal(d3.schemeCategory10); // compare https://github.com/d3/d3-scale-chromatic

    const arc = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(0);

    const pie = d3.pie(); // compare https://github.com/d3/d3-shape#pies

    const pied_data = pie(data);

    const arcs = g.selectAll('.arc').data(pied_data).join(
      (enter) => enter.append('path')
        .attr('class', 'arc')
        .style('stroke', 'white')
    );

    arcs.attr('d', arc)
      .style('fill', (d, i) => color(i));
  </script>
</body>

</html>