examples/DonutChartExample.html

<!DOCTYPE html>
<html>

  <head>
    <title>d3-ez : Donut Chart Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="../dist/d3-ez.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/d3-ez.css" />
  </head>

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

    <script type="text/javascript">
      d3.json("data/uk_elections.json").then(function(data) {
        // UK Election Results Source: http://www.ukpolitical.info/2015.htm

        // Create chart base
        var colors = ["#CC0000", "#3366CC", "#FF9900", "#FFCC00", "#03CC14", "#FF18C0"];
        var myChart = d3.ez.chart.donutChart()
          .width(1000)
          .height(600)
          .colors(colors)
          .title("UK Election Results")
          .subTitle("Seats 1992 - 2015")
          .showLegend(true)
          .on("customValueMouseOver", function(e, d) {
            d3.select("#message").text(d.value);
          })
          .on("customSeriesClick", function(e, d) {
            console.log(d);
          });

        d3.select("#chartholder")
          .datum(data)
          .call(myChart);
      });
    </script>
  </body>

</html>