johan · October 28, 2011 22:37
diff --git a/README.md b/README.md
diff --git a/histogram.csv b/histogram.csv
diff --git a/index.html b/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>
diff --git a/vis.js b/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;
 }
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
	<!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>
	// 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;
	}