d3-ez : Donut Chart Example

Generated using d3-ez D3 Reusable Chart Library

A donut chart (also spelled doughnut) is functionally identical to a pie chart, with the exception of a blank center and the ability to support multiple statistics at once. Doughnut charts provide a better data intensity ratio to standard pie charts since the blank center can be used to display additional, related data.

FUNCTION: Comparison; Part to whole

Credit: Data Viz Project

<!DOCTYPE html>
<html>

<head>
  <title>d3-ez : Donut Chart Example</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>

<body>
  <div id="chartholder"></div>
  <br/>
  <div>Value: <span id="message"></span></div>

var chart = d3.ez.chart.donutChart().colors(d3.ez.palette.diverging(2));
    var legend = d3.ez.component.legend().title("Top 10");
    var title = d3.ez.component.title().mainText("Programming Languages").subText("Top 10 Languages Used By Developers");

// Create chart base
    var myChart = d3.ez.base()
      .width(750)
      .height(400)
      .chart(chart)
      .legend(legend)
      .title(title)
      .on("customValueMouseOver", function(d, i) {
        d3.select("#message").text(d.value);
      });

// Add to page
    function update() {
      var data = randomDataset();
      d3.select("#chartholder")
        .datum(data)
        .call(myChart);
    }

update();
    setInterval(update, 2000);
  </script>
</body>

</html>

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

https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js