Skip to content

Instantly share code, notes, and snippets.

@johan

johan/README.md

Forked from mbostock/.block
Created October 28, 2011 22:37
Show Gist options
  • Save johan/1323758 to your computer and use it in GitHub Desktop.
Save johan/1323758 to your computer and use it in GitHub Desktop.
Download ZIP
Page load time histograms
Raw
README.md

An example of multiple pie (donut) charts created with D3. The data is represented as a tabular array of objects; each row in the table is mapped to an arc, and rows are grouped into pie charts using d3.nest.

Raw
histogram.csv
page time count
root 2 96
root 4 54
root 6 15
root 8 9
root 10 3
root 14 1
root 16 1
root 18 3
root 20 1
root 22 2
root 24 1
root 26 3
root 34 1
root 68 1
root 96 1
root 108 1
root 326 1
search 2 698
search 4 395
search 6 122
search 8 39
search 10 19
search 12 16
search 14 12
search 16 9
search 18 2
search 20 4
search 22 3
search 24 4
search 26 1
search 28 2
search 30 1
search 32 1
search 34 1
search 36 1
search 40 1
search 44 1
search 54 1
search 58 1
search 62 1
search 122 1
enable 2 38
enable 4 25
enable 6 5
enable 8 6
enable 10 3
enable 12 1
enable 14 2
enable 16 1
enable 18 1
enable 22 1
enable 34 1
enable 36 1
enable 50 1
enable 80 1
firstrun/a 2 418
firstrun/a 4 542
firstrun/a 6 367
firstrun/a 8 240
firstrun/a 10 167
firstrun/a 12 120
firstrun/a 14 94
firstrun/a 16 92
firstrun/a 18 67
firstrun/a 20 56
firstrun/a 22 38
firstrun/a 24 44
firstrun/a 26 36
firstrun/a 28 21
firstrun/a 30 26
firstrun/a 32 28
firstrun/a 34 20
firstrun/a 36 19
firstrun/a 38 17
firstrun/a 40 13
firstrun/a 42 12
firstrun/a 44 16
firstrun/a 46 7
firstrun/a 48 7
firstrun/a 50 11
firstrun/a 52 7
firstrun/a 54 8
firstrun/a 56 4
firstrun/a 58 3
firstrun/a 60 7
firstrun/a 62 3
firstrun/a 64 3
firstrun/a 66 4
firstrun/a 68 1
firstrun/a 70 7
firstrun/a 72 1
firstrun/a 74 7
firstrun/a 76 7
firstrun/a 78 3
firstrun/a 80 2
firstrun/a 82 1
firstrun/a 84 3
firstrun/a 90 3
firstrun/a 92 2
firstrun/a 94 4
firstrun/a 96 1
firstrun/a 102 1
firstrun/a 104 1
firstrun/a 108 3
firstrun/a 112 3
firstrun/a 116 1
firstrun/a 122 2
firstrun/a 128 1
firstrun/a 132 2
firstrun/a 134 1
firstrun/a 138 1
firstrun/a 146 1
firstrun/a 150 1
firstrun/a 160 1
firstrun/a 168 1
firstrun/a 178 1
firstrun/a 180 1
firstrun/a 182 1
firstrun/a 208 2
firstrun/a 216 2
firstrun/a 272 1
firstrun/a 312 1
firstrun/a 344 1
firstrun/a 348 1
firstrun/a 360 1
firstrun/a 380 1
firstrun/a 404 1
firstrun/a 430 1
firstrun/a 548 1
firstrun/a 662 1
firstrun/a 1688 1
firstrun/a 5758 1
firstrun/b 2 237
firstrun/b 4 222
firstrun/b 6 114
firstrun/b 8 58
firstrun/b 10 32
firstrun/b 12 21
firstrun/b 14 14
firstrun/b 16 10
firstrun/b 18 11
firstrun/b 20 13
firstrun/b 22 13
firstrun/b 24 11
firstrun/b 26 7
firstrun/b 28 4
firstrun/b 30 5
firstrun/b 32 7
firstrun/b 36 1
firstrun/b 38 6
firstrun/b 42 2
firstrun/b 44 1
firstrun/b 48 1
firstrun/b 50 2
firstrun/b 52 1
firstrun/b 54 1
firstrun/b 56 2
firstrun/b 62 2
firstrun/b 68 1
firstrun/b 78 1
firstrun/b 80 2
firstrun/b 86 1
firstrun/b 106 1
firstrun/b 108 1
firstrun/b 128 1
firstrun/b 130 1
firstrun/b 146 1
firstrun/b 190 1
firstrun/c 2 215
firstrun/c 4 208
firstrun/c 6 109
firstrun/c 8 75
firstrun/c 10 40
firstrun/c 12 18
firstrun/c 14 20
firstrun/c 16 16
firstrun/c 18 13
firstrun/c 20 6
firstrun/c 22 9
firstrun/c 24 9
firstrun/c 26 3
firstrun/c 28 2
firstrun/c 30 3
firstrun/c 32 4
firstrun/c 34 2
firstrun/c 36 3
firstrun/c 40 3
firstrun/c 42 2
firstrun/c 44 1
firstrun/c 46 2
firstrun/c 48 2
firstrun/c 50 1
firstrun/c 52 1
firstrun/c 54 1
firstrun/c 66 2
firstrun/c 68 1
firstrun/c 74 2
firstrun/c 78 1
firstrun/c 80 1
firstrun/c 82 2
firstrun/c 88 2
firstrun/c 130 1
firstrun/c 170 1
firstrun/c 254 1
firstrun/c 18836 1
firstrun/d 2 213
firstrun/d 4 217
firstrun/d 6 111
firstrun/d 8 63
firstrun/d 10 31
firstrun/d 12 39
firstrun/d 14 19
firstrun/d 16 20
firstrun/d 18 9
firstrun/d 20 13
firstrun/d 22 3
firstrun/d 24 5
firstrun/d 26 5
firstrun/d 28 4
firstrun/d 30 4
firstrun/d 32 2
firstrun/d 34 2
firstrun/d 36 1
firstrun/d 38 3
firstrun/d 40 3
firstrun/d 42 2
firstrun/d 46 4
firstrun/d 48 3
firstrun/d 50 2
firstrun/d 52 1
firstrun/d 56 1
firstrun/d 58 2
firstrun/d 60 2
firstrun/d 62 1
firstrun/d 66 1
firstrun/d 74 1
firstrun/d 76 1
firstrun/d 92 1
firstrun/d 98 1
firstrun/d 102 1
firstrun/d 142 1
firstrun/d 214 1
firstrun/d 336 1
firstrun/d 418 1
connected 2 3
connected 4 10
connected 6 8
connected 8 4
connected 10 3
connected 14 1
connected 18 1
welcome 2 112
welcome 4 44
welcome 6 15
welcome 8 8
welcome 10 4
welcome 12 2
welcome 14 2
welcome 16 2
welcome 20 1
welcome 28 2
welcome 30 2
welcome 46 1
welcome 136 1
about 2 22
about 4 17
about 6 5
about 8 3
about 10 1
about 12 3
faq 2 42
faq 4 5
faq 6 1
faq 10 1
faq 16 1
faq 20 1
faq 26 1
faq 28 1
terms 2 36
terms 4 7
terms 6 1
terms 8 1
terms 10 1
terms 18 1
privacy 2 10
new-tt 2 2751
new-tt 4 5788
new-tt 6 4037
new-tt 8 2831
new-tt 10 2165
new-tt 12 1693
new-tt 14 1364
new-tt 16 1206
new-tt 18 1045
new-tt 20 817
new-tt 22 672
new-tt 24 559
new-tt 26 486
new-tt 28 391
new-tt 30 303
new-tt 32 290
new-tt 34 262
new-tt 36 232
new-tt 38 198
new-tt 40 176
new-tt 42 148
new-tt 44 113
new-tt 46 100
new-tt 48 89
new-tt 50 104
new-tt 52 82
new-tt 54 78
new-tt 56 61
new-tt 58 55
new-tt 60 58
new-tt 62 52
new-tt 64 49
new-tt 66 42
new-tt 68 41
new-tt 70 34
new-tt 72 20
new-tt 74 25
new-tt 76 29
new-tt 78 21
new-tt 80 17
new-tt 82 18
new-tt 84 26
new-tt 86 15
new-tt 88 11
new-tt 90 8
new-tt 92 13
new-tt 94 13
new-tt 96 9
new-tt 98 15
new-tt 100 12
new-tt 102 6
new-tt 104 8
new-tt 106 10
new-tt 108 15
new-tt 110 12
new-tt 112 6
new-tt 114 3
new-tt 116 7
new-tt 118 1
new-tt 120 9
new-tt 122 6
new-tt 124 7
new-tt 126 10
new-tt 128 3
new-tt 130 4
new-tt 132 4
new-tt 134 6
new-tt 136 5
new-tt 138 4
new-tt 140 2
new-tt 142 3
new-tt 144 3
new-tt 146 6
new-tt 148 2
new-tt 150 2
new-tt 154 4
new-tt 156 1
new-tt 158 2
new-tt 160 1
new-tt 164 4
new-tt 166 4
new-tt 168 2
new-tt 170 3
new-tt 172 1
new-tt 174 1
new-tt 176 2
new-tt 178 1
new-tt 180 1
new-tt 182 2
new-tt 186 1
new-tt 188 1
new-tt 190 1
new-tt 192 2
new-tt 194 2
new-tt 196 2
new-tt 198 1
new-tt 202 3
new-tt 206 1
new-tt 208 1
new-tt 210 2
new-tt 216 1
new-tt 220 2
new-tt 222 1
new-tt 226 3
new-tt 228 3
new-tt 230 1
new-tt 234 1
new-tt 242 1
new-tt 246 1
new-tt 250 1
new-tt 252 1
new-tt 264 1
new-tt 268 1
new-tt 274 1
new-tt 276 1
new-tt 286 1
new-tt 288 1
new-tt 292 1
new-tt 304 1
new-tt 310 2
new-tt 316 1
new-tt 322 1
new-tt 328 1
new-tt 330 1
new-tt 346 1
new-tt 352 1
new-tt 360 1
new-tt 370 1
new-tt 380 1
new-tt 408 2
new-tt 430 1
new-tt 442 1
new-tt 448 1
new-tt 458 1
new-tt 514 1
new-tt 570 1
new-tt 650 1
new-tt 662 1
new-tt 718 1
new-tt 810 1
new-tt 840 1
new-tt 1096 1
new-tt 1276 1
new-tt 1282 1
new-tt 8646 1
new-tt 8688 1
new-tt 11388 1
new-tt 12518 1
new-tt 74008 1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Page load time histograms</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?2.4.5"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
<style type="text/css">
body {
text-align: center;
padding: 0.5em;
margin: 0;
}
svg {
font: 10px sans-serif;
}
</style>
</head>
<body>
<script src="vis.js"></script>
</body>
</html>
Raw
vis.js
// Define the margin, radius, and color scale. Colors are assigned lazily, so
// if you want deterministic behavior, define a domain for the color scale.
var m = 10
, r = 100
, z = d3.scale.category20c()
, csv, pie, arc, pages, svg, g; // handy for page inspection in dev tools
d3.csv('histogram.csv', function(hist) {
csv = hist;
// Define a pie layout: the pie angle encodes the count of flights. Since our
// data is stored in CSV, the counts are strings which we coerce to numbers.
pie = d3.layout.pie()
.value(function(d) { return +d.count; })
.sort(function(a, b) { return a.time - b.time; });
// Define an arc generator. Note the radius is specified here, not the layout.
arc = d3.svg.arc()
.innerRadius(r / 2)
.outerRadius(r);
// Nest the page load time data by page. Our data has page load time in
// 2-second resolution, upper bound, but we want to group counts by page.
pages = d3.nest()
.key(function(d) { return d.page; })
.entries(hist);
// Insert an svg element (with margin) for each page in our dataset. A
// child g element translates the origin to the pie center.
svg = d3.select('body').selectAll('div')
.data(pages)
// http://code.google.com/p/chromium/issues/detail?id=98951
.enter().append('div')
.style('display', 'inline-block')
.style('width', (r + m) * 2 + 'px')
.style('height', (r + m) * 2 + 'px')
.append('svg:svg')
.attr('width', (r + m) * 2)
.attr('height', (r + m) * 2)
.append('svg:g')
.attr('transform', 'translate(' + (r + m) + ',' + (r + m) + ')');
// Add a label for the page. The `key` comes from the nest operator.
svg.append('svg:text')
.attr('dy', '.35em')
.attr('text-anchor', 'middle')
.text(function(d) { return d.key; });
// Pass the nested per-page values to the pie layout. The layout computes
// the angles for each arc. Another g element will hold the arc and its label.
g = svg.selectAll('g')
.data(function(d) { return pie(d.values); })
.enter().append('svg:g');
// Add a colored arc path, with a mouseover title showing the count.
g.append('svg:path')
.attr('d', arc)
.style('fill', function(d) { return z(d.data.time); })
.append('svg:title')
.text(function(d) { return '<' + d.data.time + ': ' + d.data.count; });
// Add a label to the larger arcs, translated to the arc centroid and rotated.
g.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append('svg:text')
.attr('dy', '.35em')
.attr('text-anchor', 'middle')
.attr('transform', function(d) { return 'translate(' + arc.centroid(d) + ')rotate(' + angle(d) + ')'; })
.text(function(d) { return '<' + d.data.time; });
d3.select(self.frameElement).style('height', (document.body.offsetHeight) +'px');
});
// Computes the label angle of an arc, converting from radians to degrees.
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment