<!DOCTYPE html>
<html>
<head>
<title>d3-ez : Punch Card Example</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="../build/d3-ez.js"></script>
<link rel="stylesheet" type="text/css" href="../build/d3-ez.css" />
</head>
<body>
<div id="chartholder"></div>
<br/>
<div>Value: <span id="message"></span></div>
<script type="text/javascript">
d3.json("data/netflix_isp_speed_index.json", function(error, json) {
// Netflix Speed ISP Speed Index Source: https://ispspeedindex.netflix.com/country/uk/
var chart = d3.ez.chart.punchCard();
var legend = d3.ez.component.legend().title("Speed Index");
var title = d3.ez.component.title().mainText(json.Metadata.Title).subText(json.Metadata.Detail);
// Convert json to d3-ez data format
var data = d3.nest().key(function(d) {
return d.ISP;
}).entries(json.Data).map(function(obj) {
obj.values = obj.values.map(function(values) {
return {
key: values.Month,
value: values.Value
};
});
return obj;
});
// Create chart base
var myChart = d3.ez.base()
.width(750)
.height(400)
.chart(chart)
.legend(legend)
.title(title)
.on("customValueMouseOver", function(d) {
d3.select("#message").text(d.value);
})
.on("customSeriesClick", function(d) {
console.log(d);
});
d3.select('#chartholder')
.datum(data)
.call(myChart);
});
</script>
</body>
</html>