Skip to content

Instantly share code, notes, and snippets.

@jamesleesaunders
Last active July 16, 2019 20:09
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jamesleesaunders/0d4cf768065e8e7e9bfb to your computer and use it in GitHub Desktop.
d3-ez : Bar Chart (Clustered) Example
<!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="http://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: http://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>
[
{
"key": "1992",
"values": [
{
"key": "Conservative",
"value": 336
},
{
"key": "Labour",
"value": 271
},
{
"key": "Liberal Democrat",
"value": 20
},
{
"key": "Scottish National",
"value": 3
}
]
},
{
"key": "1997",
"values": [
{
"key": "Conservative",
"value": 165
},
{
"key": "Labour",
"value": 418
},
{
"key": "Liberal Democrat",
"value": 46
},
{
"key": "Scottish National",
"value": 6
}
]
},
{
"key": "2001",
"values": [
{
"key": "Conservative",
"value": 412
},
{
"key": "Labour",
"value": 166
},
{
"key": "Liberal Democrat",
"value": 52
},
{
"key": "Scottish National",
"value": 5
}
]
},
{
"key": "2005",
"values": [
{
"key": "Conservative",
"value": 356
},
{
"key": "Labour",
"value": 198
},
{
"key": "Liberal Democrat",
"value": 62
},
{
"key": "Scottish National",
"value": 6
}
]
},
{
"key": "2010",
"values": [
{
"key": "Conservative",
"value": 306
},
{
"key": "Labour",
"value": 258
},
{
"key": "Liberal Democrat",
"value": 57
},
{
"key": "Scottish National",
"value": 6
}
]
},
{
"key": "2015",
"values": [
{
"key": "Conservative",
"value": 331
},
{
"key": "Labour",
"value": 232
},
{
"key": "Liberal Democrat",
"value": 8
},
{
"key": "Scottish National",
"value": 56
}
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment