D3 Examples - d3-ez : Bar Chart (Vertical) Example

d3-ez : Bar Chart (Vertical) Example

A bar chart is a chart with rectangular bars with lengths proportional to the values that they represent. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. Bar charts provide a visual presentation of categorical data. Categorical data is a grouping of data into discrete groups, such as months of the year, age group, shoe sizes, and animals. These categories are usually qualitative. Bars on the chart may be arranged in any order.

FUNCTION: Comparison; Trend over time

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <title>d3-ez : Bar Chart (Vertical) 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.barChartVertical().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>
    