d3-latency-heatmap
Version:
A reusable D3 latency heatmap chart.
69 lines (62 loc) • 2.29 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>Animated Heatmap</h1>
<p>Shows how a latency heatmap may be animated over time.</p>
<table>
<tr>
<td>
<div id="chart"></div>
<script>
(function() {
var nCols = 100;
var nRows = 50;
var data = [];
var dt = new Date(new Date().getTime() - nCols * 1000);
for (var i = 0; i < nCols; ++i) {
dt = new Date(dt.getTime() + 1000);
for (var j = 0; j < nRows; ++j) {
data.push({
date: dt,
bucket: j,
count: Math.random()
});
}
}
var chart = d3.latencyHeatmap()
.x(function (d) { return d.date; })
.y(function (d) { return d.bucket; })
.count(function (d) { return d.count; })
.rectSize([5, 5]);
setInterval(function() {
data = data.slice(nRows);
dt = new Date(dt.getTime() + 1000);
for (var i = 0; i < nRows; ++i) {
data.push({
date: dt,
bucket: i,
count: Math.random()
});
};
var svg = d3.select("#chart")
.datum(data)
.call(chart);
}, 1000);
})();
</script>
</td>
</tr>
</table>
</body>
</html>