examples/pie.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>D3 Pie Chart</title>
    <meta name="description" content="Sample D3 Chart" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script src="../web_modules/d3/dist/d3.js"></script>
    <link href="./style.css" rel="stylesheet" />
    <style></style>
  </head>

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

    <script>
      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);

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

      const pie = d3.pie();

      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>