d3-latency-heatmap
Version:
A reusable D3 latency heatmap chart.
49 lines (43 loc) • 1.66 kB
HTML
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
font-size: 12px;
}
td {
vertical-align: top;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="../build/d3-latencyHeatmap.v1.js"></script>
<h1>Report Queue Latency</h1>
<p>Shows how to source data from a CSV, control the y-axis tick labels, color ranges, tooltips, and chart size.</p>
<table>
<tr>
<td>
<div id="chart"></div>
<script>
(function() {
var parseTime = d3.timeParse("%Y-%m");
var chart = d3.latencyHeatmap()
.x(function (d) { return parseTime(d.date); })
.y(function (d) { return +d.bucket; })
.yFormat(function(d) { return d + " s" })
.count(function (d) { return +d.count; })
.colorRange([d3.rgb('#FFFFFF'), d3.rgb('#5B82A1')])
.tooltipText(function (d) { return "YearMonth: " + d[0].toISOString().substring(0, 7) + "\nBucket: " + d[1] + "\nCount: " + d[2]; })
.rectSize([8, 8]);
d3.csv("report-queue-latency.csv", function (data) {
var svg = d3.select("#chart")
.datum(data)
.call(chart);
});
})();
</script>
</td>
</tr>
</table>
</body>
</html>