Skip to content

Instantly share code, notes, and snippets.

@MNoichl

MNoichl/.block

Created June 18, 2018 20:01
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Heatmap (2D Histogram, CSV)
Raw
.block
license: gpl-3.0
Raw
data.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
day value hour
0 0 0
0 0.499360828808073 2
0 0.646171462386778 3
0 0.724537971482451 4
0 0.772915346313415 5
0 0.790597450604855 6
0 0.605258082408502 7
0 0.593994843379318 8
0 0.771302823531314 9
0 0.898414417801664 10
0 0.700507697192271 11
0 0.881279129608788 12
0 0.814885659133107 13
1 0.499360828808073 1
1 0 2
1 0.629250564718281 3
1 0.483979702863399 4
1 0.654017537365611 5
1 0.716134375153161 6
1 0.489573491886926 7
1 0.543687669746093 8
1 0.490339290418001 9
1 0.844450725810197 10
1 0.602767393044145 11
1 0.666763914460639 12
1 0.772632799560219 13
2 0.646171462386778 1
2 0.629250564718281 2
2 0 3
2 0.752089560063444 4
2 0.701066268308364 5
2 0.873034222976729 6
2 0.696382388454511 7
2 0.687659933186817 8
2 0.785982799492429 9
2 0.951744830846131 10
2 0.810798331425467 11
2 0.948790278602744 12
2 0.877139166869436 13
3 0.724537971482451 1
3 0.483979702863399 2
3 0.752089560063444 3
3 0 4
3 0.857787757488206 5
3 0.87161267863574 6
3 0.778681732947048 7
3 0.726511615833749 8
3 0.636753841464479 9
3 0.949265957685621 10
3 0.838461628002143 11
3 0.821271301196426 12
3 0.903085355136475 13
4 0.772915346313415 1
4 0.654017537365611 2
4 0.701066268308364 3
4 0.857787757488206 4
4 0 5
4 0.691913492115269 6
4 0.684803081088696 7
4 0.584001680861031 8
4 0.851330722840482 9
4 0.910213994679453 10
4 0.647466826043069 11
4 0.967768149042121 12
4 0.796292904486306 13
5 0.790597450604855 1
5 0.716134375153161 2
5 0.873034222976729 3
5 0.87161267863574 4
5 0.691913492115269 5
5 0 6
5 0.770609146311489 7
5 0.713571188000068 8
5 0.917268762957185 9
5 0.875317301858386 10
5 0.590161843097976 11
5 0.945591079994638 12
5 0.904540746864066 13
6 0.605258082408502 1
6 0.489573491886926 2
6 0.696382388454511 3
6 0.778681732947048 4
6 0.684803081088696 5
6 0.770609146311489 6
6 0 7
6 0.573847099749542 8
6 0.849852236803839 9
6 0.692409483963428 10
6 0.743941946001007 11
6 0.931052642353079 12
6 0.627253461895036 13
7 0.593994843379318 1
7 0.543687669746093 2
7 0.687659933186817 3
7 0.726511615833749 4
7 0.584001680861031 5
7 0.713571188000068 6
7 0.573847099749542 7
7 0 8
7 0.830837782142027 9
7 0.917170381203069 10
7 0.754288057094977 11
7 0.956768214556707 12
7 0.793644308874264 13
8 0.771302823531314 1
8 0.490339290418001 2
8 0.785982799492429 3
8 0.636753841464479 4
8 0.851330722840482 5
8 0.917268762957185 6
8 0.849852236803839 7
8 0.830837782142027 8
8 0 9
8 0.968259604544775 10
8 0.875220786601587 11
8 0.883975095852201 12
8 0.936706102546991 13
9 0.898414417801664 1
9 0.844450725810197 2
9 0.951744830846131 3
9 0.949265957685621 4
9 0.910213994679453 5
9 0.875317301858386 6
9 0.692409483963428 7
9 0.917170381203069 8
9 0.968259604544775 9
9 0 10
9 0.886354318248595 11
9 0.963336912689863 12
9 0.897770085188581 13
10 0.700507697192271 1
10 0.602767393044145 2
10 0.810798331425467 3
10 0.838461628002143 4
10 0.647466826043069 5
10 0.590161843097976 6
10 0.743941946001007 7
10 0.754288057094977 8
10 0.875220786601587 9
10 0.886354318248595 10
10 0 11
10 0.924929831981997 12
10 0.895363090812114 13
11 0.881279129608788 1
11 0.666763914460639 2
11 0.948790278602744 3
11 0.821271301196426 4
11 0.967768149042121 5
11 0.945591079994638 6
11 0.931052642353079 7
11 0.956768214556707 8
11 0.883975095852201 9
11 0.963336912689863 10
11 0.924929831981997 11
11 0 12
11 0.971220333741755 13
12 0.814885659133107 1
12 0.772632799560219 2
12 0.877139166869436 3
12 0.903085355136475 4
12 0.796292904486306 5
12 0.904540746864066 6
12 0.627253461895036 7
12 0.793644308874264 8
12 0.936706102546991 9
12 0.897770085188581 10
12 0.895363090812114 11
12 0.971220333741755 12
12 0 13
Raw
data.tsv
day value hour
0 0 0
0 0.499360828808073 2
0 0.646171462386778 3
0 0.724537971482451 4
0 0.772915346313415 5
0 0.790597450604855 6
0 0.605258082408502 7
0 0.593994843379318 8
0 0.771302823531314 9
0 0.898414417801664 10
0 0.700507697192271 11
0 0.881279129608788 12
0 0.814885659133107 13
1 0.499360828808073 1
1 0 2
1 0.629250564718281 3
1 0.483979702863399 4
1 0.654017537365611 5
1 0.716134375153161 6
1 0.489573491886926 7
1 0.543687669746093 8
1 0.490339290418001 9
1 0.844450725810197 10
1 0.602767393044145 11
1 0.666763914460639 12
1 0.772632799560219 13
2 0.646171462386778 1
2 0.629250564718281 2
2 0 3
2 0.752089560063444 4
2 0.701066268308364 5
2 0.873034222976729 6
2 0.696382388454511 7
2 0.687659933186817 8
2 0.785982799492429 9
2 0.951744830846131 10
2 0.810798331425467 11
2 0.948790278602744 12
2 0.877139166869436 13
3 0.724537971482451 1
3 0.483979702863399 2
3 0.752089560063444 3
3 0 4
3 0.857787757488206 5
3 0.87161267863574 6
3 0.778681732947048 7
3 0.726511615833749 8
3 0.636753841464479 9
3 0.949265957685621 10
3 0.838461628002143 11
3 0.821271301196426 12
3 0.903085355136475 13
4 0.772915346313415 1
4 0.654017537365611 2
4 0.701066268308364 3
4 0.857787757488206 4
4 0 5
4 0.691913492115269 6
4 0.684803081088696 7
4 0.584001680861031 8
4 0.851330722840482 9
4 0.910213994679453 10
4 0.647466826043069 11
4 0.967768149042121 12
4 0.796292904486306 13
5 0.790597450604855 1
5 0.716134375153161 2
5 0.873034222976729 3
5 0.87161267863574 4
5 0.691913492115269 5
5 0 6
5 0.770609146311489 7
5 0.713571188000068 8
5 0.917268762957185 9
5 0.875317301858386 10
5 0.590161843097976 11
5 0.945591079994638 12
5 0.904540746864066 13
6 0.605258082408502 1
6 0.489573491886926 2
6 0.696382388454511 3
6 0.778681732947048 4
6 0.684803081088696 5
6 0.770609146311489 6
6 0 7
6 0.573847099749542 8
6 0.849852236803839 9
6 0.692409483963428 10
6 0.743941946001007 11
6 0.931052642353079 12
6 0.627253461895036 13
7 0.593994843379318 1
7 0.543687669746093 2
7 0.687659933186817 3
7 0.726511615833749 4
7 0.584001680861031 5
7 0.713571188000068 6
7 0.573847099749542 7
7 0 8
7 0.830837782142027 9
7 0.917170381203069 10
7 0.754288057094977 11
7 0.956768214556707 12
7 0.793644308874264 13
8 0.771302823531314 1
8 0.490339290418001 2
8 0.785982799492429 3
8 0.636753841464479 4
8 0.851330722840482 5
8 0.917268762957185 6
8 0.849852236803839 7
8 0.830837782142027 8
8 0 9
8 0.968259604544775 10
8 0.875220786601587 11
8 0.883975095852201 12
8 0.936706102546991 13
9 0.898414417801664 1
9 0.844450725810197 2
9 0.951744830846131 3
9 0.949265957685621 4
9 0.910213994679453 5
9 0.875317301858386 6
9 0.692409483963428 7
9 0.917170381203069 8
9 0.968259604544775 9
9 0 10
9 0.886354318248595 11
9 0.963336912689863 12
9 0.897770085188581 13
10 0.700507697192271 1
10 0.602767393044145 2
10 0.810798331425467 3
10 0.838461628002143 4
10 0.647466826043069 5
10 0.590161843097976 6
10 0.743941946001007 7
10 0.754288057094977 8
10 0.875220786601587 9
10 0.886354318248595 10
10 0 11
10 0.924929831981997 12
10 0.895363090812114 13
11 0.881279129608788 1
11 0.666763914460639 2
11 0.948790278602744 3
11 0.821271301196426 4
11 0.967768149042121 5
11 0.945591079994638 6
11 0.931052642353079 7
11 0.956768214556707 8
11 0.883975095852201 9
11 0.963336912689863 10
11 0.924929831981997 11
11 0 12
11 0.971220333741755 13
12 0.814885659133107 1
12 0.772632799560219 2
12 0.877139166869436 3
12 0.903085355136475 4
12 0.796292904486306 5
12 0.904540746864066 6
12 0.627253461895036 7
12 0.793644308874264 8
12 0.936706102546991 9
12 0.897770085188581 10
12 0.895363090812114 11
12 0.971220333741755 12
12 0 13
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment