Skip to content

Instantly share code, notes, and snippets.

@bennetthardwick
Last active May 21, 2019 13:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bennetthardwick/0175aae102892b7df7105080298e03af to your computer and use it in GitHub Desktop.
Save bennetthardwick/0175aae102892b7df7105080298e03af to your computer and use it in GitHub Desktop.
Dev.to post frequency graph. Thanks: https://gist.github.com/tjdecke/5558084/
day hour value
1 1 59
1 2 62
1 3 55
1 4 48
1 5 30
1 6 75
1 7 50
1 8 39
1 9 37
1 10 41
1 11 66
1 12 64
1 13 62
1 14 58
1 15 46
1 16 50
1 17 51
1 18 54
1 19 47
1 20 46
1 21 42
1 22 49
1 23 38
1 24 52
2 1 49
2 2 44
2 3 58
2 4 40
2 5 47
2 6 32
2 7 35
2 8 37
2 9 69
2 10 36
2 11 51
2 12 70
2 13 73
2 14 48
2 15 55
2 16 52
2 17 56
2 18 57
2 19 62
2 20 41
2 21 45
2 22 46
2 23 45
2 24 41
3 1 61
3 2 54
3 3 46
3 4 41
3 5 65
3 6 45
3 7 45
3 8 53
3 9 38
3 10 35
3 11 43
3 12 57
3 13 61
3 14 58
3 15 53
3 16 52
3 17 60
3 18 47
3 19 46
3 20 43
3 21 58
3 22 52
3 23 59
3 24 73
4 1 67
4 2 57
4 3 40
4 4 41
4 5 30
4 6 43
4 7 41
4 8 63
4 9 52
4 10 47
4 11 61
4 12 60
4 13 56
4 14 45
4 15 48
4 16 49
4 17 46
4 18 42
4 19 42
4 20 43
4 21 58
4 22 49
4 23 42
4 24 44
5 1 48
5 2 41
5 3 32
5 4 47
5 5 47
5 6 55
5 7 41
5 8 46
5 9 41
5 10 31
5 11 69
5 12 49
5 13 52
5 14 43
5 15 41
5 16 58
5 17 39
5 18 42
5 19 44
5 20 40
5 21 55
5 22 48
5 23 47
5 24 40
6 1 47
6 2 33
6 3 42
6 4 56
6 5 45
6 6 37
6 7 40
6 8 39
6 9 38
6 10 74
6 11 61
6 12 54
6 13 52
6 14 60
6 15 41
6 16 52
6 17 46
6 18 53
6 19 53
6 20 57
6 21 50
6 22 33
6 23 42
6 24 54
7 1 52
7 2 40
7 3 36
7 4 48
7 5 55
7 6 56
7 7 37
7 8 41
7 9 26
7 10 47
7 11 41
7 12 51
7 13 60
7 14 57
7 15 58
7 16 40
7 17 57
7 18 60
7 19 56
7 20 45
7 21 49
7 22 58
7 23 42
7 24 43
day hour value
1 1 3229
1 2 2732
1 3 1981
1 4 1934
1 5 1070
1 6 5076
1 7 3774
1 8 2983
1 9 3444
1 10 3277
1 11 6658
1 12 9025
1 13 10761
1 14 11346
1 15 9471
1 16 9594
1 17 7551
1 18 9328
1 19 6479
1 20 6954
1 21 5529
1 22 5100
1 23 2437
1 24 3489
2 1 3500
2 2 2353
2 3 3395
2 4 1918
2 5 2082
2 6 1575
2 7 1804
2 8 3096
2 9 5960
2 10 2807
2 11 4623
2 12 7597
2 13 11072
2 14 7453
2 15 8662
2 16 6993
2 17 7144
2 18 7528
2 19 7307
2 20 5957
2 21 5837
2 22 4404
2 23 3636
2 24 2456
3 1 4101
3 2 3137
3 3 2398
3 4 2088
3 5 3600
3 6 2250
3 7 2452
3 8 4000
3 9 3141
3 10 2731
3 11 3754
3 12 6429
3 13 8238
3 14 9956
3 15 8497
3 16 10006
3 17 9350
3 18 5990
3 19 5552
3 20 4918
3 21 6946
3 22 5823
3 23 4803
3 24 5259
4 1 3804
4 2 3826
4 3 2156
4 4 2032
4 5 1542
4 6 2942
4 7 2248
4 8 4375
4 9 3646
4 10 4388
4 11 5449
4 12 6445
4 13 8885
4 14 6804
4 15 7060
4 16 7246
4 17 6607
4 18 6163
4 19 6181
4 20 4845
4 21 6044
4 22 4681
4 23 3221
4 24 2875
5 1 2675
5 2 2254
5 3 1827
5 4 2563
5 5 2434
5 6 3382
5 7 2363
5 8 3203
5 9 3375
5 10 2620
5 11 5948
5 12 5270
5 13 5901
5 14 5444
5 15 5856
5 16 8308
5 17 5259
5 18 5431
5 19 5162
5 20 5260
5 21 5754
5 22 4520
5 23 3337
5 24 1942
6 1 2042
6 2 1413
6 3 1894
6 4 1888
6 5 1648
6 6 1257
6 7 1475
6 8 1802
6 9 1808
6 10 4593
6 11 4606
6 12 3198
6 13 3980
6 14 4891
6 15 3650
6 16 5115
6 17 4195
6 18 4684
6 19 4466
6 20 4439
6 21 4327
6 22 3966
6 23 2665
6 24 3366
7 1 2972
7 2 1660
7 3 1283
7 4 1891
7 5 1981
7 6 2730
7 7 1186
7 8 1460
7 9 1223
7 10 2236
7 11 2688
7 12 3535
7 13 5911
7 14 5639
7 15 6292
7 16 3927
7 17 5944
7 18 6619
7 19 4845
7 20 4105
7 21 4097
7 22 4296
7 23 2281
7 24 2831
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
rect.bordered {
stroke: #E6E6E6;
stroke-width:2px;
}
text.mono {
font-size: 9pt;
font-family: Consolas, courier;
fill: #aaa;
}
text.axis-workweek {
fill: #000;
}
text.axis-worktime {
fill: #000;
}
</style>
<script src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<div id="chart"></div>
<div id="dataset-picker">
</div>
<script type="text/javascript">
var margin = { top: 50, right: 0, bottom: 100, left: 30 },
width = 960 - margin.left - margin.right,
height = 430 - margin.top - margin.bottom,
gridSize = Math.floor(width / 24),
legendElementWidth = gridSize*2,
buckets = 9,
colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"];
datasets = ["data.tsv", "average.tsv", "recent.tsv", "recent-average.tsv" ];
var svg = d3.select("#chart").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 + ")");
var dayLabels = svg.selectAll(".dayLabel")
.data(days)
.enter().append("text")
.text(function (d) { return d; })
.attr("x", 0)
.attr("y", function (d, i) { return i * gridSize; })
.style("text-anchor", "end")
.attr("transform", "translate(-6," + gridSize / 1.5 + ")")
.attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });
var timeLabels = svg.selectAll(".timeLabel")
.data(times)
.enter().append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return i * gridSize; })
.attr("y", 0)
.style("text-anchor", "middle")
.attr("transform", "translate(" + gridSize / 2 + ", -6)")
.attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });
var heatmapChart = function(tsvFile) {
d3.tsv(tsvFile,
function(d) {
return {
day: +d.day,
hour: +d.hour,
value: +d.value
};
},
function(error, data) {
var colorScale = d3.scale.quantile()
.domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
.range(colors);
var cards = svg.selectAll(".hour")
.data(data, function(d) {return d.day+':'+d.hour;});
cards.append("title");
cards.enter().append("rect")
.attr("x", function(d) { return (d.hour - 1) * gridSize; })
.attr("y", function(d) { return (d.day - 1) * gridSize; })
.attr("rx", 4)
.attr("ry", 4)
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", colors[0]);
cards.transition().duration(1000)
.style("fill", function(d) { return colorScale(d.value); });
cards.select("title").text(function(d) { return d.value; });
cards.exit().remove();
var legend = svg.selectAll(".legend")
.data([0].concat(colorScale.quantiles()), function(d) { return d; });
legend.enter().append("g")
.attr("class", "legend");
legend.append("rect")
.attr("x", function(d, i) { return legendElementWidth * i; })
.attr("y", height)
.attr("width", legendElementWidth)
.attr("height", gridSize / 2)
.style("fill", function(d, i) { return colors[i]; });
legend.append("text")
.attr("class", "mono")
.text(function(d) { return "≥ " + Math.round(d); })
.attr("x", function(d, i) { return legendElementWidth * i; })
.attr("y", height + gridSize);
legend.exit().remove();
});
};
heatmapChart(datasets[0]);
var datasetpicker = d3.select("#dataset-picker").selectAll(".dataset-button")
.data(datasets);
datasetpicker.enter()
.append("input")
.attr("value", function(d){ return "Dataset " + d })
.attr("type", "button")
.attr("class", "dataset-button")
.on("click", function(d) {
heatmapChart(d);
});
</script>
</body>
</html>
day hour value
1 1 87
1 2 37
1 3 96
1 4 59
1 5 58
1 6 81
1 7 69
1 8 39
1 9 63
1 10 48
1 11 99
1 12 153
1 13 114
1 14 87
1 15 69
1 16 76
1 17 110
1 18 94
1 19 81
1 20 62
1 21 84
1 22 89
1 23 58
1 24 89
2 1 55
2 2 87
2 3 52
2 4 65
2 5 59
2 6 64
2 7 44
2 8 78
2 9 76
2 10 58
2 11 61
2 12 98
2 13 159
2 14 80
2 15 83
2 16 81
2 17 78
2 18 83
2 19 134
2 20 57
2 21 58
2 22 83
2 23 58
2 24 74
3 1 126
3 2 69
3 3 68
3 4 72
3 5 173
3 6 50
3 7 124
3 8 121
3 9 68
3 10 73
3 11 55
3 12 64
3 13 92
3 14 135
3 15 123
3 16 73
3 17 104
3 18 74
3 19 70
3 20 84
3 21 93
3 22 60
3 23 83
3 24 77
4 1 88
4 2 74
4 3 43
4 4 28
4 5 57
4 6 91
4 7 99
4 8 161
4 9 98
4 10 107
4 11 134
4 12 84
4 13 78
4 14 74
4 15 77
4 16 70
4 17 63
4 18 82
4 19 62
4 20 93
4 21 141
4 22 80
4 23 54
4 24 67
5 1 58
5 2 54
5 3 47
5 4 30
5 5 68
5 6 94
5 7 50
5 8 78
5 9 68
5 10 31
5 11 134
5 12 90
5 13 84
5 14 50
5 15 44
5 16 79
5 17 58
5 18 58
5 19 55
5 20 39
5 21 95
5 22 50
5 23 69
5 24 49
6 1 74
6 2 28
6 3 41
6 4 50
6 5 42
6 6 43
6 7 20
6 8 51
6 9 50
6 10 97
6 11 114
6 12 64
6 13 51
6 14 57
6 15 46
6 16 103
6 17 61
6 18 89
6 19 78
6 20 97
6 21 94
6 22 97
6 23 44
6 24 102
7 1 108
7 2 62
7 3 40
7 4 105
7 5 66
7 6 104
7 7 62
7 8 75
7 9 38
7 10 81
7 11 67
7 12 60
7 13 126
7 14 97
7 15 87
7 16 59
7 17 82
7 18 103
7 19 62
7 20 65
7 21 77
7 22 159
7 23 53
7 24 40
day hour value
1 1 522
1 2 299
1 3 192
1 4 413
1 5 404
1 6 1220
1 7 693
1 8 393
1 9 820
1 10 813
1 11 2078
1 12 4746
1 13 3746
1 14 3554
1 15 2222
1 16 2196
1 17 2541
1 18 3118
1 19 2181
1 20 1539
1 21 1759
1 22 1866
1 23 875
1 24 975
2 1 1040
2 2 1039
2 3 412
2 4 517
2 5 528
2 6 445
2 7 351
2 8 934
2 9 1212
2 10 812
2 11 1838
2 12 2648
2 13 7015
2 14 2469
2 15 3139
2 16 2110
2 17 1873
2 18 2498
2 19 2681
2 20 1322
2 21 1329
2 22 1332
2 23 1106
2 24 663
3 1 1004
3 2 548
3 3 407
3 4 507
3 5 1381
3 6 503
3 7 1362
3 8 2185
3 9 881
3 10 801
3 11 875
3 12 1797
3 13 2218
3 14 3903
3 15 2465
3 16 3347
3 17 2692
3 18 2457
3 19 1466
3 20 1766
3 21 2145
3 22 1499
3 23 1404
3 24 1470
4 1 795
4 2 1261
4 3 387
4 4 141
4 5 398
4 6 1189
4 7 695
4 8 1928
4 9 1268
4 10 1718
4 11 2948
4 12 2600
4 13 2330
4 14 2213
4 15 1610
4 16 1749
4 17 1440
4 18 2053
4 19 1855
4 20 1214
4 21 2545
4 22 1607
4 23 1018
4 24 669
5 1 578
5 2 489
5 3 611
5 4 208
5 5 547
5 6 657
5 7 604
5 8 941
5 9 752
5 10 654
5 11 2955
5 12 1988
5 13 2439
5 14 1254
5 15 965
5 16 2618
5 17 1841
5 18 1509
5 19 1552
5 20 1163
5 21 2646
5 22 1392
5 23 1590
5 24 442
6 1 960
6 2 529
6 3 411
6 4 655
6 5 457
6 6 391
6 7 159
6 8 505
6 9 252
6 10 1649
6 11 1826
6 12 709
6 13 1028
6 14 1301
6 15 960
6 16 2473
6 17 1526
6 18 2407
6 19 1487
6 20 1840
6 21 1223
6 22 1448
6 23 799
6 24 1220
7 1 973
7 2 740
7 3 399
7 4 631
7 5 396
7 6 1038
7 7 369
7 8 300
7 9 150
7 10 648
7 11 1003
7 12 1194
7 13 3140
7 14 1931
7 15 2184
7 16 1129
7 17 1893
7 18 2878
7 19 1292
7 20 1238
7 21 1846
7 22 2386
7 23 634
7 24 396
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment