d3-ez : Bar Chart (Vertical) Example

Generated using d3-ez D3 Reusable Chart Library

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

Credit: Data Viz Project

<!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>

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>

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

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