johan · November 8, 2011 10:14
diff --git a/2011-10-26.csv b/2011-10-26.csv
diff --git a/2011-10-27.csv b/2011-10-27.csv
diff --git a/2011-10-28.csv b/2011-10-28.csv
diff --git a/2011-10-29.csv b/2011-10-29.csv
diff --git a/2011-10-30.csv b/2011-10-30.csv
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">
 @import url("http://mbostock.github.com/d3/ex/button.css");

 body {
  text-align: center;
  padding: 0.5em;
  margin: 0;
 }

 svg {
  font: 10px sans-serif;
 }

 ul.date {
  margin: 0.5em auto;
  padding: 0;
 }

 ul.hor li {
  display:          inline-block;
  list-style-image: none;
  float:            left;
 }

 .clearfix:after {
  visibility: hidden;
  display:    block;
  clear:      both;
  content:    ".";
  height:     0;
 }

    </style>
  </head>
  <body>
    <ul class="date hor clearfix"></ul>
    <script src="index.js"></script>
  </body>
 </html>
diff --git a/index.js b/index.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
  , no = +top.location.hash.slice(1)
  , arc = d3.svg.arc().innerRadius(r / 2).outerRadius(r)
  , donut = d3.layout.pie()
              .value(function(d) { return +d.count; })
              .sort(function(a, b) { return a.time - b.time; })
  , color = d3.scale.category20c()
  , dates =
  [ '2011-10-26'
  , '2011-10-27'
  , '2011-10-28'
  , '2011-10-29'
  , '2011-10-30'
  ]
  , files, buts, data, arcs, pages, svg; // for page inspection in dev tools

 load(dates.map(function(f) { return f + '.csv'; }), d3.csv, loaded);

 // Store the currently-displayed angles in this._current.
 // Then, interpolate from this._current to the new angles.
 function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) { return arc(i(t)); };
 }

 function setData(d) {
  // 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(data = d);

  svg = d3.select('body').selectAll('div.page').data(pages);
  svg.selectAll('g.slice').data(pages)
     .selectAll('path').data(function(d) { return donut(d.values); });
  return svg;
 }

 function loaded(_files) {
  var ul = d3.select('ul.date'), w = 0;
  buts = ul.selectAll('li')
      .data(files = _files)
    .enter().append('li').append('button')
      .attr('class', function(d, i) {
        return (i === no ? 'active ' : '') +
               (i === files.length - 1 ? 'last' : i ? '' : 'first');
      })
      .text(function(d) { return d.url.split('.')[0]; })
      .each(function(d) { w += parseInt(d3.select(this).style('width'), 10); })
      .on('click', function(d, i) {
        top.location.hash = '#' + (no = i); // clicked data set #no
        buts.classed('active', function(d, j) { return no === j; });
        setData(data = d.data);
        arcs.selectAll('text').remove(); // remove the arc labels
        arcs = svg.selectAll('g.slice') // recompute angles and rebind the data
         .data(pages);
        arcs.selectAll('path')
          .transition().duration(750).attrTween("d", arcTween) // redraw arcs
          .each('end', function() {
            // label larger arcs, translated&rotated to the arc centroid
            arcs.filter(function(d) { return d.endAngle - d.startAngle > 0.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; });
          });
      });
  ul.style('width', w + 'px');
  console.log(w);

  // Insert an svg element (with margin) for each page in our dataset.
  // A child g element translates the origin to the donut center.
  svg = setData(data = files[no].data);

  svg.exit().remove();

  svg = svg.enter().append('div')
      .classed('page', true)
      .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')
      .classed('donut', true)
      .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.
  arcs = svg.selectAll('g.slice')
      .data(function(d) { return donut(d.values); })
    .enter().append('svg:g').classed('slice', true);

  // Add a colored arc path, with a mouseover title showing the count.
  arcs.append('svg:path')
      .style('fill', function(d) { return color(d.data.time); })
      .attr('d', arc)
      .each(function(d) { this._current = d; })
    .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.
  arcs.filter(function(d) { return d.endAngle - d.startAngle > 0.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;
 }

 function load(urls, loader, cb) {
  function fetch(url, n) {
    function loaded(data) {
      all[n] = { url: url, data: data };
      if (!--left) cb(all);
    }
    loader(url, loaded);
  }
  var all = [], left = urls.length;
  urls.forEach(fetch);
 }

 function I(i) { return i; }
page	time	count
root	2	80
root	4	38
root	6	16
root	8	3
root	10	2
root	12	1
root	14	1
root	16	3
root	20	2
root	22	1
root	26	1
root	32	1
root	48	1
search	2	484
search	4	244
search	6	72
search	8	41
search	10	10
search	12	12
search	14	5
search	16	4
search	18	4
search	20	1
search	22	1
search	26	1
search	30	2
search	32	1
search	38	1
search	40	1
search	46	1
search	48	2
search	58	2
search	64	1
search	76	1
search	100	1
enable	2	27
enable	4	7
enable	6	1
enable	8	5
enable	10	1
enable	28	2
enable	30	1
enable	80	1
new-tt	-214	1
new-tt	2	4359
new-tt	4	8864
new-tt	6	5394
new-tt	8	3223
new-tt	10	2024
new-tt	12	1383
new-tt	14	1102
new-tt	16	883
new-tt	18	688
new-tt	20	529
new-tt	22	429
new-tt	24	299
new-tt	26	258
new-tt	28	220
new-tt	30	183
new-tt	32	159
new-tt	34	140
new-tt	36	100
new-tt	38	90
new-tt	40	73
new-tt	42	50
new-tt	44	57
new-tt	46	59
new-tt	48	46
new-tt	50	44
new-tt	52	29
new-tt	54	32
new-tt	56	27
new-tt	58	19
new-tt	60	26
new-tt	62	19
new-tt	64	24
new-tt	66	9
new-tt	68	20
new-tt	70	15
new-tt	72	15
new-tt	74	9
new-tt	76	12
new-tt	78	9
new-tt	80	16
new-tt	82	10
new-tt	84	7
new-tt	86	4
new-tt	88	2
new-tt	90	6
new-tt	92	4
new-tt	94	3
new-tt	96	3
new-tt	98	5
new-tt	100	5
new-tt	104	2
new-tt	106	7
new-tt	108	5
new-tt	110	2
new-tt	112	3
new-tt	114	5
new-tt	116	4
new-tt	118	7
new-tt	120	4
new-tt	122	1
new-tt	124	1
new-tt	126	3
new-tt	128	1
new-tt	130	3
new-tt	132	2
new-tt	134	4
new-tt	136	2
new-tt	138	3
new-tt	140	2
new-tt	142	3
new-tt	144	1
new-tt	146	3
new-tt	150	1
new-tt	152	1
new-tt	156	1
new-tt	158	3
new-tt	160	2
new-tt	162	2
new-tt	168	1
new-tt	170	2
new-tt	176	2
new-tt	178	2
new-tt	180	3
new-tt	182	1
new-tt	192	1
new-tt	194	1
new-tt	196	1
new-tt	200	1
new-tt	204	1
new-tt	208	1
new-tt	212	1
new-tt	214	1
new-tt	232	1
new-tt	244	1
new-tt	248	1
new-tt	254	1
new-tt	262	1
new-tt	264	1
new-tt	282	1
new-tt	284	1
new-tt	326	1
new-tt	328	1
new-tt	330	1
new-tt	332	1
new-tt	338	1
new-tt	350	1
new-tt	358	1
new-tt	368	1
new-tt	418	1
new-tt	424	1
new-tt	494	1
new-tt	502	2
new-tt	542	1
new-tt	808	1
new-tt	818	1
new-tt	840	1
new-tt	944	1
new-tt	1416	1
new-tt	1692	1
new-tt	1744	1
new-tt	15566	1
about	2	19
about	4	16
about	6	4
about	8	2
about	10	1
about	12	1
about	24	1
faq	2	58
faq	4	8
faq	10	1
terms	2	16
terms	4	4
terms	6	3
terms	14	1
privacy	2	8
privacy	4	2
privacy	8	1
privacy	10	1
privacy	82	1
firstrun/a	2	258
firstrun/a	4	344
firstrun/a	6	196
firstrun/a	8	117
firstrun/a	10	93
firstrun/a	12	63
firstrun/a	14	49
firstrun/a	16	46
firstrun/a	18	33
firstrun/a	20	31
firstrun/a	22	22
firstrun/a	24	25
firstrun/a	26	9
firstrun/a	28	20
firstrun/a	30	16
firstrun/a	32	14
firstrun/a	34	12
firstrun/a	36	6
firstrun/a	38	6
firstrun/a	40	12
firstrun/a	42	9
firstrun/a	44	6
firstrun/a	46	9
firstrun/a	48	6
firstrun/a	50	7
firstrun/a	52	2
firstrun/a	54	3
firstrun/a	56	4
firstrun/a	58	1
firstrun/a	60	2
firstrun/a	62	3
firstrun/a	64	5
firstrun/a	66	2
firstrun/a	68	2
firstrun/a	70	2
firstrun/a	72	3
firstrun/a	74	4
firstrun/a	78	1
firstrun/a	80	3
firstrun/a	82	1
firstrun/a	84	3
firstrun/a	86	2
firstrun/a	92	1
firstrun/a	118	1
firstrun/a	122	1
firstrun/a	128	1
firstrun/a	132	1
firstrun/a	138	1
firstrun/a	164	1
firstrun/a	186	1
firstrun/a	194	1
firstrun/a	198	1
firstrun/a	220	1
firstrun/a	256	1
firstrun/a	266	1
firstrun/a	418	1
firstrun/b	2	313
firstrun/b	4	287
firstrun/b	6	153
firstrun/b	8	92
firstrun/b	10	63
firstrun/b	12	34
firstrun/b	14	31
firstrun/b	16	22
firstrun/b	18	17
firstrun/b	20	10
firstrun/b	22	12
firstrun/b	24	8
firstrun/b	26	3
firstrun/b	28	3
firstrun/b	30	3
firstrun/b	32	6
firstrun/b	34	2
firstrun/b	36	4
firstrun/b	38	5
firstrun/b	44	2
firstrun/b	46	1
firstrun/b	50	2
firstrun/b	52	1
firstrun/b	54	2
firstrun/b	56	3
firstrun/b	58	1
firstrun/b	66	2
firstrun/b	68	1
firstrun/b	70	1
firstrun/b	84	2
firstrun/b	90	1
firstrun/b	92	1
firstrun/b	108	2
firstrun/b	118	2
firstrun/b	144	1
firstrun/b	206	1
firstrun/b	208	1
firstrun/b	454	1
firstrun/c	2	279
firstrun/c	4	272
firstrun/c	6	159
firstrun/c	8	106
firstrun/c	10	62
firstrun/c	12	47
firstrun/c	14	30
firstrun/c	16	29
firstrun/c	18	23
firstrun/c	20	14
firstrun/c	22	20
firstrun/c	24	9
firstrun/c	26	7
firstrun/c	28	9
firstrun/c	30	8
firstrun/c	32	4
firstrun/c	34	2
firstrun/c	36	2
firstrun/c	38	3
firstrun/c	40	3
firstrun/c	42	2
firstrun/c	44	2
firstrun/c	46	2
firstrun/c	50	3
firstrun/c	52	1
firstrun/c	54	3
firstrun/c	56	1
firstrun/c	58	2
firstrun/c	60	1
firstrun/c	64	1
firstrun/c	68	2
firstrun/c	72	2
firstrun/c	76	2
firstrun/c	78	1
firstrun/c	84	1
firstrun/c	88	1
firstrun/c	98	1
firstrun/c	102	2
firstrun/c	104	1
firstrun/c	106	1
firstrun/c	122	1
firstrun/c	126	1
firstrun/c	210	1
firstrun/c	390	1
firstrun/d	2	290
firstrun/d	4	294
firstrun/d	6	158
firstrun/d	8	105
firstrun/d	10	57
firstrun/d	12	48
firstrun/d	14	35
firstrun/d	16	26
firstrun/d	18	16
firstrun/d	20	16
firstrun/d	22	6
firstrun/d	24	13
firstrun/d	26	7
firstrun/d	28	7
firstrun/d	30	5
firstrun/d	32	5
firstrun/d	34	4
firstrun/d	36	2
firstrun/d	38	1
firstrun/d	40	2
firstrun/d	44	2
firstrun/d	46	1
firstrun/d	48	1
firstrun/d	50	1
firstrun/d	52	1
firstrun/d	54	1
firstrun/d	56	4
firstrun/d	64	2
firstrun/d	68	2
firstrun/d	70	1
firstrun/d	72	2
firstrun/d	78	1
firstrun/d	88	1
firstrun/d	92	1
firstrun/d	98	1
firstrun/d	100	1
firstrun/d	102	1
firstrun/d	104	1
firstrun/d	124	1
firstrun/d	126	1
firstrun/d	130	1
firstrun/d	160	1
firstrun/d	174	1
connected	4	2
connected	6	3
connected	8	4
connected	12	1
connected	14	1
connected	16	1
connected	28	1
welcome	2	49
welcome	4	24
welcome	6	10
welcome	8	7
welcome	10	2
welcome	18	1
welcome	24	2
welcome	30	2
welcome	34	1
welcome	38	1
welcome	48	1
welcome	90	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">
	@import url("http://mbostock.github.com/d3/ex/button.css");

	body {
	text-align: center;
	padding: 0.5em;
	margin: 0;
	}

	svg {
	font: 10px sans-serif;
	}

	ul.date {
	margin: 0.5em auto;
	padding: 0;
	}

	ul.hor li {
	display: inline-block;
	list-style-image: none;
	float: left;
	}

	.clearfix:after {
	visibility: hidden;
	display: block;
	clear: both;
	content: ".";
	height: 0;
	}

	</style>
	</head>
	<body>
	<ul class="date hor clearfix"></ul>
	<script src="index.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
	, no = +top.location.hash.slice(1)
	, arc = d3.svg.arc().innerRadius(r / 2).outerRadius(r)
	, donut = d3.layout.pie()
	.value(function(d) { return +d.count; })
	.sort(function(a, b) { return a.time - b.time; })
	, color = d3.scale.category20c()
	, dates =
	[ '2011-10-26'
	, '2011-10-27'
	, '2011-10-28'
	, '2011-10-29'
	, '2011-10-30'
	]
	, files, buts, data, arcs, pages, svg; // for page inspection in dev tools

	load(dates.map(function(f) { return f + '.csv'; }), d3.csv, loaded);

	// Store the currently-displayed angles in this._current.
	// Then, interpolate from this._current to the new angles.
	function arcTween(a) {
	var i = d3.interpolate(this._current, a);
	this._current = i(0);
	return function(t) { return arc(i(t)); };
	}

	function setData(d) {
	// 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(data = d);

	svg = d3.select('body').selectAll('div.page').data(pages);
	svg.selectAll('g.slice').data(pages)
	.selectAll('path').data(function(d) { return donut(d.values); });
	return svg;
	}

	function loaded(_files) {
	var ul = d3.select('ul.date'), w = 0;
	buts = ul.selectAll('li')
	.data(files = _files)
	.enter().append('li').append('button')
	.attr('class', function(d, i) {
	return (i === no ? 'active ' : '') +
	(i === files.length - 1 ? 'last' : i ? '' : 'first');
	})
	.text(function(d) { return d.url.split('.')[0]; })
	.each(function(d) { w += parseInt(d3.select(this).style('width'), 10); })
	.on('click', function(d, i) {
	top.location.hash = '#' + (no = i); // clicked data set #no
	buts.classed('active', function(d, j) { return no === j; });
	setData(data = d.data);
	arcs.selectAll('text').remove(); // remove the arc labels
	arcs = svg.selectAll('g.slice') // recompute angles and rebind the data
	.data(pages);
	arcs.selectAll('path')
	.transition().duration(750).attrTween("d", arcTween) // redraw arcs
	.each('end', function() {
	// label larger arcs, translated&rotated to the arc centroid
	arcs.filter(function(d) { return d.endAngle - d.startAngle > 0.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; });
	});
	});
	ul.style('width', w + 'px');
	console.log(w);

	// Insert an svg element (with margin) for each page in our dataset.
	// A child g element translates the origin to the donut center.
	svg = setData(data = files[no].data);

	svg.exit().remove();

	svg = svg.enter().append('div')
	.classed('page', true)
	.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')
	.classed('donut', true)
	.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.
	arcs = svg.selectAll('g.slice')
	.data(function(d) { return donut(d.values); })
	.enter().append('svg:g').classed('slice', true);

	// Add a colored arc path, with a mouseover title showing the count.
	arcs.append('svg:path')
	.style('fill', function(d) { return color(d.data.time); })
	.attr('d', arc)
	.each(function(d) { this._current = d; })
	.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.
	arcs.filter(function(d) { return d.endAngle - d.startAngle > 0.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;
	}

	function load(urls, loader, cb) {
	function fetch(url, n) {
	function loaded(data) {
	all[n] = { url: url, data: data };
	if (!--left) cb(all);
	}
	loader(url, loaded);
	}
	var all = [], left = urls.length;
	urls.forEach(fetch);
	}

	function I(i) { return i; }