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

d3-ez : Bar Chart (Stacked) Example

Grouped Bar Charts are used when two or more data sets are displayed side-by-side and grouped together under categories on the same axis. Basically, it’s the most simple bar chart with two or more graphs.

FUNCTION: Comparison; Part to whole

Data Source: http://www.ukpolitical.info/2015.htm

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <title>d3-ez : Bar Chart (Stacked) 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">
​
        d3.json("uk_elections.json").then(function(data) {
            // UK Election Results Source: https://www.ukpolitical.info/2015.htm
            var chart = d3.ez.chart.barChartStacked()
                .yAxisLabel("Seats")
                .colors(['#c00', '#36c', '#f90', '#fc0']);
            var legend = d3.ez.component.legend().title("Party");
            var title = d3.ez.component.title().mainText("UK Election Results").subText("Seats 1992 - 2015");
​
            // 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
            d3.select("#chartholder")
                .datum(data)
                .call(myChart);
        });
​
  </script>
</body>
​
</html>
    