D3 Examples - d3-ez : Polar Area Chart Example

d3-ez : Polar Area Chart Example

The Polar Area chart is similar to a usual pie chart, except sectors are equal angles and differ rather in how far each sector extends from the center of the circle. The polar area diagram is used to plot cyclic phenomena (e.g., count of deaths by month).

FUNCTION: Comparison; Trend over time

Credit: Peter Cook for giving permission to use code from his Radial Bar Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <title>d3-ez : Polar Area 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>
​
  <script type="text/javascript">
    // Generate some data
    function randomDataset() {
      var _randomNum = function() {
        return Math.floor(Math.random() * 10);
      };
      var data = {
        "key": "Languages",
        "values": [{
          "key": "JavaScript",
          "value": _randomNum()
        }, {
          "key": "C++",
          "value": _randomNum()
        }, {
          "key": "Java",
          "value": _randomNum()
        }, {
          "key": "Ruby",
          "value": _randomNum()
        }, {
          "key": "Python",
          "value": _randomNum()
        }, {
          "key": "PHP",
          "value": _randomNum()
        }, {
          "key": "Perl",
          "value": _randomNum()
        }, {
          "key": "Basic",
          "value": _randomNum()
        }, {
          "key": "Assembly",
          "value": _randomNum()
        }]
      };
      return data;
    }
​
    var chart = d3.ez.chart.polarAreaChart().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>
​
    