d3-ez : Bar Chart (Circular) Example

Generated using d3-ez D3 Reusable Chart Library

A Radial/Circular Bar Chart simply refers to a typical Bar Chart displayed on a polar coordinate system, instead of a cartesian system.It is used to show comparisons among categories by using a circular shape.

FUNCTION: Comparison

Credit: Data Viz Project

<!DOCTYPE html>
<html>

<head>
  <title>d3-ez : Bar Chart (Circular) 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.barChartCircular().colors(d3.ez.palette.categorical(1));
    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