Create a gist now

Instantly share code, notes, and snippets.

@mbostock /.block
Last active Feb 9, 2016

Download ZIP
Heatmap (2D Histogram, CSV)
Raw
.block
license: gpl-3.0
Raw
data.csv
date bucket count
2012-07-20 800 119
2012-07-20 900 123
2012-07-20 1000 173
2012-07-20 1100 226
2012-07-20 1200 284
2012-07-20 1300 257
2012-07-20 1400 268
2012-07-20 1500 244
2012-07-20 1600 191
2012-07-20 1700 204
2012-07-20 1800 187
2012-07-20 1900 177
2012-07-20 2000 164
2012-07-20 2100 125
2012-07-20 2200 140
2012-07-20 2300 109
2012-07-20 2400 103
2012-07-21 800 123
2012-07-21 900 165
2012-07-21 1000 237
2012-07-21 1100 278
2012-07-21 1200 338
2012-07-21 1300 306
2012-07-21 1400 316
2012-07-21 1500 269
2012-07-21 1600 271
2012-07-21 1700 241
2012-07-21 1800 188
2012-07-21 1900 174
2012-07-21 2000 158
2012-07-21 2100 153
2012-07-21 2200 132
2012-07-22 900 154
2012-07-22 1000 241
2012-07-22 1100 246
2012-07-22 1200 300
2012-07-22 1300 305
2012-07-22 1400 301
2012-07-22 1500 292
2012-07-22 1600 253
2012-07-22 1700 251
2012-07-22 1800 214
2012-07-22 1900 189
2012-07-22 2000 179
2012-07-22 2100 159
2012-07-22 2200 161
2012-07-22 2300 144
2012-07-22 2400 139
2012-07-22 2500 132
2012-07-22 2600 136
2012-07-22 2800 105
2012-07-23 800 120
2012-07-23 900 156
2012-07-23 1000 209
2012-07-23 1100 267
2012-07-23 1200 299
2012-07-23 1300 316
2012-07-23 1400 318
2012-07-23 1500 307
2012-07-23 1600 295
2012-07-23 1700 273
2012-07-23 1800 283
2012-07-23 1900 229
2012-07-23 2000 192
2012-07-23 2100 193
2012-07-23 2200 170
2012-07-23 2300 164
2012-07-23 2400 154
2012-07-23 2500 138
2012-07-23 2600 101
2012-07-23 2700 115
2012-07-23 2800 103
2012-07-24 800 105
2012-07-24 900 156
2012-07-24 1000 220
2012-07-24 1100 255
2012-07-24 1200 308
2012-07-24 1300 338
2012-07-24 1400 318
2012-07-24 1500 255
2012-07-24 1600 278
2012-07-24 1700 260
2012-07-24 1800 235
2012-07-24 1900 230
2012-07-24 2000 185
2012-07-24 2100 145
2012-07-24 2200 147
2012-07-24 2300 157
2012-07-24 2400 109
2012-07-25 800 104
2012-07-25 900 191
2012-07-25 1000 201
2012-07-25 1100 238
2012-07-25 1200 223
2012-07-25 1300 229
2012-07-25 1400 286
2012-07-25 1500 256
2012-07-25 1600 240
2012-07-25 1700 233
2012-07-25 1800 202
2012-07-25 1900 180
2012-07-25 2000 184
2012-07-25 2100 161
2012-07-25 2200 125
2012-07-25 2300 110
2012-07-25 2400 101
2012-07-26 1300 132
2012-07-26 1400 117
2012-07-26 1500 124
2012-07-26 1600 154
2012-07-26 1700 167
2012-07-26 1800 137
2012-07-26 1900 169
2012-07-26 2000 175
2012-07-26 2100 168
2012-07-26 2200 188
2012-07-26 2300 137
2012-07-26 2400 173
2012-07-26 2500 164
2012-07-26 2600 167
2012-07-26 2700 115
2012-07-26 2800 116
2012-07-26 2900 118
2012-07-26 3000 125
2012-07-26 3200 104
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.label {
font-weight: bold;
}
.tile {
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 90, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse,
formatDate = d3.time.format("%b %d");
var x = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
z = d3.scale.linear().range(["white", "steelblue"]);
// The size of the buckets in the CSV data file.
// This could be inferred from the data if it weren't sparse.
var xStep = 864e5,
yStep = 100;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, buckets) {
if (error) throw error;
// Coerce the CSV data to the appropriate types.
buckets.forEach(function(d) {
d.date = parseDate(d.date);
d.bucket = +d.bucket;
d.count = +d.count;
});
// Compute the scale domains.
x.domain(d3.extent(buckets, function(d) { return d.date; }));
y.domain(d3.extent(buckets, function(d) { return d.bucket; }));
z.domain([0, d3.max(buckets, function(d) { return d.count; })]);
// Extend the x- and y-domain to fit the last bucket.
// For example, the y-bucket 3200 corresponds to values [3200, 3300].
x.domain([x.domain()[0], +x.domain()[1] + xStep]);
y.domain([y.domain()[0], y.domain()[1] + yStep]);
// Display the tiles for each non-zero bucket.
// See http://bl.ocks.org/3074470 for an alternative implementation.
svg.selectAll(".tile")
.data(buckets)
.enter().append("rect")
.attr("class", "tile")
.attr("x", function(d) { return x(d.date); })
.attr("y", function(d) { return y(d.bucket + yStep); })
.attr("width", x(xStep) - x(0))
.attr("height", y(0) - y(yStep))
.style("fill", function(d) { return z(d.count); });
// Add a legend for the color values.
var legend = svg.selectAll(".legend")
.data(z.ticks(6).slice(1).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + (width + 20) + "," + (20 + i * 20) + ")"; });
legend.append("rect")
.attr("width", 20)
.attr("height", 20)
.style("fill", z);
legend.append("text")
.attr("x", 26)
.attr("y", 10)
.attr("dy", ".35em")
.text(String);
svg.append("text")
.attr("class", "label")
.attr("x", width + 20)
.attr("y", 10)
.attr("dy", ".35em")
.text("Count");
// Add an x-axis with label.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).ticks(d3.time.days).tickFormat(formatDate).orient("bottom"))
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.attr("text-anchor", "end")
.text("Date");
// Add a y-axis with label.
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left"))
.append("text")
.attr("class", "label")
.attr("y", 6)
.attr("dy", ".71em")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.text("Value");
});
</script>
@nisu13
nisu13 commented Oct 9, 2015

Hi Mike,
How do I decide yStep value when my bucket values in CSV are such as 1239416832, 1302331392, 1312817152, 1702887424? Values can range from 0 to around 5000000000.
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment