d3-latency-heatmap
Version:
A reusable D3 latency heatmap chart.
60 lines (56 loc) • 1.99 kB
HTML
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
font-size: 12px;
}
td {
vertical-align: top;
}
</style>
<body>
<script src="//unpkg.com/d3-array@1"></script>
<script src="//unpkg.com/d3-axis@1"></script>
<script src="//unpkg.com/d3-collection@1"></script>
<script src="//unpkg.com/d3-color@1"></script>
<script src="//unpkg.com/d3-dispatch@1"></script>
<script src="//unpkg.com/d3-format@1"></script>
<script src="//unpkg.com/d3-interpolate@1"></script>
<script src="//unpkg.com/d3-latency-heatmap@1"></script>
<script src="//unpkg.com/d3-request@1"></script>
<script src="//unpkg.com/d3-scale@1"></script>
<script src="//unpkg.com/d3-selection@1"></script>
<script src="//unpkg.com/d3-time@1"></script>
<script src="//unpkg.com/d3-time-format@2"></script>
<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; })
.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.select("#chart")
.datum(data)
.call(chart);
})();
</script>
</body>