d3-ez : Bar Chart (Clustered) Example

Generated using d3-ez D3 Reusable Chart Library

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

Credit: Data Viz Project

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

<!DOCTYPE html>
<html>

<head>
  <title>d3-ez : Bar Chart (Clustered) 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>

d3.json("uk_elections.json").then(function(data) {
			// UK Election Results Source: https://www.ukpolitical.info/2015.htm
			var chart = d3.ez.chart.barChartClustered()
				.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>

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

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