Skip to content

Instantly share code, notes, and snippets.

@nrrb

nrrb/README.md

Forked from tommaybe/LICENSE.md
Last active August 29, 2015 13:56
Show Gist options
  • Save nrrb/8918247 to your computer and use it in GitHub Desktop.
Save nrrb/8918247 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Inspired by Trulia Trends - but with code and using SVG.

Example data shows concurrent user sessions over time, taken from a development environment.

Raw
data.tsv
day hour value
1 1 18
1 2 16
1 3 7
1 4 13
1 5 45
1 6 21
1 7 24
1 8 4
1 9 57
1 10 47
1 11 37
1 12 14
1 13 36
1 14 36
1 15 53
1 16 35
1 17 22
1 18 27
1 19 8
1 20 58
1 21 33
1 22 5
1 23 6
1 24 46
1 25 31
1 26 37
1 27 29
1 28 23
1 29 47
1 30 16
1 31 6
1 32 49
1 33 18
1 34 17
1 35 44
1 36 33
1 37 59
1 38 51
1 39 14
1 40 39
1 41 16
1 42 2
1 43 39
1 44 22
1 45 29
1 46 10
1 47 25
1 48 1
1 49 40
1 50 37
1 51 31
1 52 13
1 53 5
1 54 15
1 55 49
1 56 36
1 57 26
1 58 16
1 59 50
1 60 44
1 61 11
1 62 17
1 63 10
1 64 49
1 65 55
1 66 18
1 67 8
1 68 41
1 69 30
1 70 53
1 71 59
1 72 24
1 73 46
1 74 10
1 75 42
1 76 55
1 77 41
1 78 7
1 79 13
1 80 55
1 81 28
1 82 49
1 83 52
1 84 5
1 85 45
1 86 11
1 87 52
1 88 7
1 89 44
1 90 41
1 91 19
1 92 41
1 93 19
1 94 16
1 95 53
1 96 41
1 97 40
1 98 22
1 99 14
1 100 46
1 101 6
1 102 8
1 103 25
1 104 8
1 105 59
1 106 25
1 107 27
1 108 53
1 109 42
1 110 21
1 111 47
1 112 43
1 113 55
1 114 42
1 115 8
1 116 32
1 117 50
1 118 49
1 119 20
1 120 16
2 1 34
2 2 5
2 3 8
2 4 4
2 5 48
2 6 57
2 7 1
2 8 40
2 9 31
2 10 22
2 11 9
2 12 29
2 13 11
2 14 45
2 15 50
2 16 46
2 17 15
2 18 7
2 19 14
2 20 30
2 21 30
2 22 23
2 23 43
2 24 55
2 25 39
2 26 36
2 27 35
2 28 59
2 29 55
2 30 25
2 31 1
2 32 10
2 33 29
2 34 35
2 35 57
2 36 52
2 37 60
2 38 52
2 39 50
2 40 22
2 41 2
2 42 1
2 43 44
2 44 1
2 45 60
2 46 1
2 47 11
2 48 20
2 49 43
2 50 14
2 51 58
2 52 58
2 53 46
2 54 5
2 55 16
2 56 29
2 57 44
2 58 53
2 59 16
2 60 32
2 61 21
2 62 53
2 63 10
2 64 45
2 65 34
2 66 27
2 67 59
2 68 34
2 69 5
2 70 32
2 71 10
2 72 11
2 73 41
2 74 59
2 75 39
2 76 29
2 77 47
2 78 55
2 79 11
2 80 11
2 81 37
2 82 2
2 83 16
2 84 9
2 85 16
2 86 25
2 87 27
2 88 25
2 89 59
2 90 2
2 91 30
2 92 17
2 93 3
2 94 14
2 95 40
2 96 34
2 97 53
2 98 10
2 99 24
2 100 14
2 101 28
2 102 29
2 103 15
2 104 58
2 105 49
2 106 28
2 107 3
2 108 46
2 109 54
2 110 41
2 111 41
2 112 30
2 113 52
2 114 24
2 115 28
2 116 31
2 117 7
2 118 41
2 119 56
2 120 29
3 1 51
3 2 59
3 3 48
3 4 10
3 5 23
3 6 24
3 7 39
3 8 30
3 9 53
3 10 2
3 11 47
3 12 35
3 13 23
3 14 24
3 15 7
3 16 24
3 17 56
3 18 42
3 19 31
3 20 22
3 21 24
3 22 24
3 23 37
3 24 24
3 25 58
3 26 30
3 27 24
3 28 48
3 29 12
3 30 41
3 31 53
3 32 14
3 33 21
3 34 23
3 35 40
3 36 37
3 37 54
3 38 50
3 39 16
3 40 19
3 41 13
3 42 11
3 43 58
3 44 30
3 45 13
3 46 9
3 47 27
3 48 14
3 49 40
3 50 37
3 51 33
3 52 9
3 53 52
3 54 57
3 55 32
3 56 27
3 57 55
3 58 16
3 59 12
3 60 45
3 61 49
3 62 7
3 63 3
3 64 2
3 65 18
3 66 31
3 67 13
3 68 2
3 69 48
3 70 36
3 71 13
3 72 24
3 73 4
3 74 43
3 75 3
3 76 48
3 77 31
3 78 5
3 79 11
3 80 25
3 81 27
3 82 28
3 83 39
3 84 34
3 85 4
3 86 49
3 87 22
3 88 34
3 89 57
3 90 57
3 91 44
3 92 31
3 93 49
3 94 6
3 95 10
3 96 29
3 97 38
3 98 45
3 99 38
3 100 55
3 101 44
3 102 11
3 103 7
3 104 39
3 105 50
3 106 3
3 107 8
3 108 21
3 109 41
3 110 23
3 111 40
3 112 24
3 113 46
3 114 27
3 115 9
3 116 3
3 117 55
3 118 12
3 119 39
3 120 50
4 1 21
4 2 44
4 3 10
4 4 57
4 5 42
4 6 50
4 7 33
4 8 41
4 9 7
4 10 39
4 11 4
4 12 28
4 13 55
4 14 9
4 15 12
4 16 27
4 17 1
4 18 51
4 19 11
4 20 21
4 21 45
4 22 20
4 23 38
4 24 4
4 25 13
4 26 15
4 27 33
4 28 56
4 29 59
4 30 28
4 31 41
4 32 3
4 33 47
4 34 26
4 35 25
4 36 16
4 37 60
4 38 39
4 39 3
4 40 60
4 41 1
4 42 3
4 43 5
4 44 28
4 45 43
4 46 7
4 47 51
4 48 38
4 49 4
4 50 17
4 51 3
4 52 50
4 53 6
4 54 32
4 55 44
4 56 38
4 57 60
4 58 36
4 59 47
4 60 17
4 61 55
4 62 50
4 63 2
4 64 31
4 65 15
4 66 26
4 67 16
4 68 46
4 69 29
4 70 24
4 71 4
4 72 12
4 73 4
4 74 53
4 75 50
4 76 30
4 77 49
4 78 3
4 79 11
4 80 24
4 81 56
4 82 5
4 83 28
4 84 35
4 85 12
4 86 19
4 87 1
4 88 21
4 89 35
4 90 52
4 91 49
4 92 27
4 93 57
4 94 6
4 95 45
4 96 39
4 97 25
4 98 55
4 99 16
4 100 49
4 101 50
4 102 37
4 103 43
4 104 48
4 105 37
4 106 4
4 107 33
4 108 27
4 109 1
4 110 55
4 111 31
4 112 29
4 113 44
4 114 29
4 115 22
4 116 10
4 117 1
4 118 4
4 119 13
4 120 25
5 1 18
5 2 41
5 3 46
5 4 46
5 5 37
5 6 50
5 7 10
5 8 4
5 9 26
5 10 31
5 11 59
5 12 39
5 13 26
5 14 14
5 15 3
5 16 21
5 17 45
5 18 34
5 19 12
5 20 36
5 21 39
5 22 44
5 23 39
5 24 28
5 25 54
5 26 14
5 27 45
5 28 49
5 29 8
5 30 48
5 31 5
5 32 2
5 33 14
5 34 50
5 35 39
5 36 47
5 37 47
5 38 53
5 39 43
5 40 5
5 41 10
5 42 42
5 43 36
5 44 28
5 45 36
5 46 8
5 47 19
5 48 48
5 49 40
5 50 56
5 51 5
5 52 43
5 53 3
5 54 53
5 55 48
5 56 39
5 57 59
5 58 1
5 59 32
5 60 14
5 61 26
5 62 33
5 63 1
5 64 60
5 65 33
5 66 57
5 67 38
5 68 23
5 69 32
5 70 52
5 71 8
5 72 41
5 73 53
5 74 16
5 75 53
5 76 14
5 77 30
5 78 44
5 79 15
5 80 60
5 81 14
5 82 40
5 83 15
5 84 36
5 85 33
5 86 1
5 87 56
5 88 33
5 89 3
5 90 23
5 91 32
5 92 44
5 93 17
5 94 36
5 95 39
5 96 21
5 97 10
5 98 46
5 99 7
5 100 12
5 101 43
5 102 50
5 103 60
5 104 41
5 105 44
5 106 56
5 107 55
5 108 21
5 109 8
5 110 17
5 111 35
5 112 30
5 113 47
5 114 49
5 115 2
5 116 53
5 117 45
5 118 5
5 119 43
5 120 8
6 1 9
6 2 57
6 3 29
6 4 29
6 5 10
6 6 51
6 7 1
6 8 42
6 9 11
6 10 52
6 11 33
6 12 46
6 13 56
6 14 29
6 15 19
6 16 60
6 17 31
6 18 29
6 19 31
6 20 25
6 21 23
6 22 47
6 23 60
6 24 58
6 25 54
6 26 42
6 27 5
6 28 46
6 29 11
6 30 57
6 31 8
6 32 27
6 33 57
6 34 29
6 35 34
6 36 5
6 37 1
6 38 53
6 39 10
6 40 6
6 41 31
6 42 49
6 43 48
6 44 36
6 45 19
6 46 35
6 47 37
6 48 16
6 49 54
6 50 56
6 51 43
6 52 16
6 53 44
6 54 45
6 55 28
6 56 13
6 57 20
6 58 36
6 59 58
6 60 32
6 61 50
6 62 21
6 63 50
6 64 34
6 65 10
6 66 39
6 67 27
6 68 60
6 69 12
6 70 50
6 71 12
6 72 35
6 73 40
6 74 33
6 75 22
6 76 51
6 77 35
6 78 23
6 79 17
6 80 53
6 81 31
6 82 8
6 83 44
6 84 35
6 85 10
6 86 28
6 87 16
6 88 52
6 89 8
6 90 49
6 91 56
6 92 45
6 93 1
6 94 25
6 95 50
6 96 51
6 97 8
6 98 51
6 99 27
6 100 23
6 101 55
6 102 24
6 103 2
6 104 51
6 105 17
6 106 34
6 107 57
6 108 53
6 109 3
6 110 30
6 111 3
6 112 1
6 113 31
6 114 52
6 115 32
6 116 39
6 117 41
6 118 44
6 119 50
6 120 40
7 1 35
7 2 53
7 3 22
7 4 48
7 5 49
7 6 13
7 7 48
7 8 8
7 9 27
7 10 42
7 11 1
7 12 37
7 13 58
7 14 17
7 15 10
7 16 26
7 17 36
7 18 56
7 19 5
7 20 44
7 21 51
7 22 18
7 23 7
7 24 30
7 25 48
7 26 15
7 27 25
7 28 11
7 29 7
7 30 9
7 31 34
7 32 54
7 33 2
7 34 14
7 35 5
7 36 5
7 37 6
7 38 37
7 39 36
7 40 12
7 41 33
7 42 20
7 43 46
7 44 17
7 45 1
7 46 26
7 47 4
7 48 7
7 49 32
7 50 28
7 51 14
7 52 13
7 53 51
7 54 37
7 55 10
7 56 52
7 57 25
7 58 56
7 59 31
7 60 15
7 61 35
7 62 24
7 63 9
7 64 5
7 65 52
7 66 29
7 67 23
7 68 15
7 69 40
7 70 28
7 71 27
7 72 27
7 73 36
7 74 47
7 75 55
7 76 24
7 77 12
7 78 36
7 79 28
7 80 32
7 81 42
7 82 35
7 83 6
7 84 45
7 85 36
7 86 26
7 87 4
7 88 51
7 89 6
7 90 17
7 91 28
7 92 29
7 93 16
7 94 18
7 95 39
7 96 6
7 97 39
7 98 47
7 99 43
7 100 18
7 101 19
7 102 37
7 103 40
7 104 2
7 105 45
7 106 44
7 107 9
7 108 9
7 109 28
7 110 13
7 111 48
7 112 22
7 113 35
7 114 2
7 115 27
7 116 37
7 117 13
7 118 20
7 119 52
7 120 16
Raw
index.html
<!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>
<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 / 120),
legendElementWidth = gridSize*2,
buckets = 9,
colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
d3.tsv("data.tsv",
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 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 heatMap = svg.selectAll(".hour")
.data(data)
.enter().append("rect")
.attr("x", function(d) { return (d.hour - 1) * gridSize; })
.attr("y", function(d) { return (d.day - 1) * gridSize; })
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", colors[0]);
heatMap.transition().duration(1000)
.style("fill", function(d) { return colorScale(d.value); });
heatMap.append("title").text(function(d) { return d.value; });
var legend = svg.selectAll(".legend")
.data([0].concat(colorScale.quantiles()), function(d) { return d; })
.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);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment