anbnyc · November 1, 2015 15:38
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Manhattan Tree Diversity</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">
 			
 			body {
 				margin: 0;
 				background-color: lightGray;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			#container {
 				width: 700px;
 				margin-left: auto;
 				margin-right: auto;
 				margin-top: 50px;
 				padding: 50px;
 				background-color: white;
 				box-shadow: 3px 3px 5px 6px #ccc;
 			}

 			h1 {
 				font-size: 24px;
 				margin: 0;
 			}

 			p {
 				font-size: 14px;
 				margin: 15px 0 10px 0;
 			}

 			a:link {
 				text-decoration: none;
 				color: gray;
 			}

 			a:hover {
 				text-decoration: underline;
 			}

 			a:visited {
 				color: gray;
 			}

 			a:active {
 				color: steelBlue;
 			}

 			svg {
 				background-color: white;
 			}

 			g.bar text {
 				font-size: 11px;
 				font-weight: bold;
 				text-anchor: end;
 				opacity: 0;
 			}

 			g.bar:hover rect {
 				fill: orange;
 			}

 			g.bar:hover text {
 				opacity: 1;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 			.y.axis path,
 			.y.axis line {
 				opacity: 0;
 			}

 		</style>
 	</head>
 	<body>

 		<div id="container">

 			<h1>Manhattan's Treeline</h1>

 			<p>The city regularly undertakes a "tree census", cataloging the locations, species, and characteristics of the trees that grow on the streets. <strong>Source:</strong> <a href="https://data.cityofnewyork.us/Environment/Street-Tree-Census-Manhattan-/e6n3-m3vc">NYC Open Data, 2015</a></p>

 		</div>

 		<script type="text/javascript">		


 			var w = 700;
 			var h = 1000;
 			var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left



 			var widthScale = d3.scale.log()
 								.range([ 0, w - padding[1] - padding[3] ]);
 			
 			var heightScale = d3.scale.ordinal()
 								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);



 			var xAxis = d3.svg.axis()
 							.scale(widthScale)
 							.orient("bottom")
 							.tickFormat(function(d) {
 								return formatValue(d);
 							})
 							.tickValues([2,5,10,50,100,500,1000,5000,10000]);

 			var yAxis = d3.svg.axis()
 							.scale(heightScale)
 							.orient("left");


 			//Now SVG goes into #container instead of body
 			var svg = d3.select("#container")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);

 			var formatValue = d3.format(".1s")

 			d3.csv("treeData.csv", function(data) {

 				data.sort(function(a, b) {
 					return d3.descending(+a.num, +b.num);
 				});

 				widthScale.domain([ 1, d3.max(data, function(d) {
 					return +d.num;
 				}) ]);

 				heightScale.domain(data.map(function(d) { return d.presentation_name; } ));

 				//Bind data to groups (not bars directly)
 				var groups = svg.selectAll("g")
 								.data(data)
 								.enter()
 								.append("g")
 								.attr("class", "bar");

 				//Add a rect to each group
 				var rects = groups.append("rect")
 					.attr("x", padding[3])
 					.attr("y", function(d) {
 						return heightScale(d.presentation_name);
 					})
 					.attr("width", 0)
 					.attr("height", heightScale.rangeBand())
 					.attr("fill", "steelblue");

 				//Add a text element to each group
 				groups.append("text")
 					.attr("x", function(d) {
 						return padding[3] + widthScale(d.num) - 3;
 					})
 					.attr("y", function(d) {
 						return heightScale(d.presentation_name) + 9;
 					})
 					.text(function(d) {
 						return d.num;
 					});

 				rects.transition()
 					.delay(function(d, i) {
 						return i * 25;
 					})
 					.duration(1000)
 					.attr("width", function(d) {
 						return widthScale(d.num);
 					});

 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
 					.call(xAxis);

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + padding[3] + ",0)")
 					.call(yAxis);

 			});


 		</script>

 	</body>
 </html>
diff --git a/treeData.csv b/treeData.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Manhattan Tree Diversity</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	margin: 0;
	background-color: lightGray;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	box-shadow: 3px 3px 5px 6px #ccc;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 15px 0 10px 0;
	}

	a:link {
	text-decoration: none;
	color: gray;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: steelBlue;
	}

	svg {
	background-color: white;
	}

	g.bar text {
	font-size: 11px;
	font-weight: bold;
	text-anchor: end;
	opacity: 0;
	}

	g.bar:hover rect {
	fill: orange;
	}

	g.bar:hover text {
	opacity: 1;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>
	</head>
	<body>

	<div id="container">

	<h1>Manhattan's Treeline</h1>

	<p>The city regularly undertakes a "tree census", cataloging the locations, species, and characteristics of the trees that grow on the streets. <strong>Source:</strong> <a href="https://data.cityofnewyork.us/Environment/Street-Tree-Census-Manhattan-/e6n3-m3vc">NYC Open Data, 2015</a></p>

	</div>

	<script type="text/javascript">


	var w = 700;
	var h = 1000;
	var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left



	var widthScale = d3.scale.log()
	.range([ 0, w - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);



	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom")
	.tickFormat(function(d) {
	return formatValue(d);
	})
	.tickValues([2,5,10,50,100,500,1000,5000,10000]);

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");


	//Now SVG goes into #container instead of body
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var formatValue = d3.format(".1s")

	d3.csv("treeData.csv", function(data) {

	data.sort(function(a, b) {
	return d3.descending(+a.num, +b.num);
	});

	widthScale.domain([ 1, d3.max(data, function(d) {
	return +d.num;
	}) ]);

	heightScale.domain(data.map(function(d) { return d.presentation_name; } ));

	//Bind data to groups (not bars directly)
	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "bar");

	//Add a rect to each group
	var rects = groups.append("rect")
	.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.presentation_name);
	})
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.attr("fill", "steelblue");

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.num) - 3;
	})
	.attr("y", function(d) {
	return heightScale(d.presentation_name) + 9;
	})
	.text(function(d) {
	return d.num;
	});

	rects.transition()
	.delay(function(d, i) {
	return i * 25;
	})
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.num);
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);

	});


	</script>

	</body>
	</html>
	SPECIES	num	avg_diam	presentation_name
1	AC	11	5.54545454545455	Maple
2	ACCA	34	4.88235294117647	Hedge maple
3	ACGI	24	5.625	Amur maple
4	ACNE	10	1.4	Boxelder
5	ACPA	19	4.68421052631579	Japanese maple
6	ACPL	548	11.5839416058394	Norway maple
7	ACPLCR	10	5.1	Crimson king maple
8	ACPS	22	6.68181818181818	Sycamore maple
9	ACRU	209	6.65071770334928	Red maple
10	ACSA1	84	9.58333333333333	Silver maple
11	ACSA2	34	7.44117647058824	Sugar maple
12	AEHI	1	2	Horsechestnut
13	AIAL	77	10.7922077922078	Tree of heaven
14	AM	24	7.41666666666667	Service berry
15	BE	66	7.37878787878788	Birch
17	CABE	67	8.35820895522388	European hornbeam
18	CACA	1	3	American hornbeam
19	CEAT	1	2	Atlas cedar
20	CECA	28	7.32142857142857	Eastern redbud
21	CEJA	46	5	Katsura tree
22	CEOC	170	5.03529411764706	Northern hackberry
23	CLLU	1	8	Yellowwood
24	COFL	63	4.22222222222222	Flowering dogwood
25	COKO	8	3.875	Kousa dogwood
26	CR	272	5.45588235294118	Hawthorn
27	DIVI	1	7	Common persimmon
28	FAGR	3	6	American beech
29	FR	4	9	Ash
30	FRAM	2	5.5	White ash
31	FRPE	882	8.20068027210884	Green ash
32	GIBI	4781	8.05333612215018	Ginkgo
33	GLTR	11292	7.71112291888062	Honeylocust
34	GYDI	133	9.33082706766917	Kentucky coffeetree
35	HADI	2	9	Two-wing silverbell
36	ILSP	14	5.21428571428571	Holly
37	JUVI	1	21	Eastern red cedar
38	KOPA	85	4.11764705882353	Goldenrain tree
39	LIST	122	9.74590163934426	Sweetgum
40	LITU	13	3.69230769230769	Tulip tree
41	MA1	56	8.03571428571429	Magnolia
42	MA2	384	5.06770833333333	Apple
43	MAPU	31	7.83870967741935	Paradise apple
44	MEGL	63	5.50793650793651	Dawn redwood
46	PI1	3	4.66666666666667	Spruce
47	PI2	2	4	Pine
50	PIST	3	10.3333333333333	Eastern white pine
51	PITH	2	15	Japanese black pine
52	PLAC	3818	13.6443163960189	London planetree
53	PO	47	9.23404255319149	Cottonwood
54	PR	344	6.03779069767442	Plum
55	PRCE	154	3.31168831168831	Cherry plum
56	PRSE2	30	7.63333333333333	Kwanzan cherry
57	PRVISH	126	3.36507936507937	Shubert chokecherry
58	PYCA	7547	6.93984364648205	Callery pear
60	QU	58	9.48275862068965	Oak
61	QUAC	44	5.38636363636364	Sawtooth oak
62	QUAL	120	5.19166666666667	White oak
63	QUBI	92	4.40217391304348	Swamp white oak
64	QUCO	2	15	Scarlet oak
67	QUPA	2566	10.6282151208106	Pin oak
68	QUPH	637	11.5149136577708	Willow oak
69	QURO	76	5.26315789473684	English oak
70	QURU	1112	7.34982014388489	Northern red oak
71	ROPS	871	9.60390355912744	Black locust
72	SA	3	6	Willow
73	SOJA	1	6	Japanese pagoda tree
76	SYRE	54	4.53703703703704	Japanese tree lilac
77	TADI	50	5	Baldcypress
78	THOC	1	5	Northern white cedar
79	TI	33	7.93939393939394	Basswood
80	TIAM	701	8.0527817403709	American basswood
81	TICO	3013	7.43312313308994	Littleleaf linden
82	TITO	480	7.57083333333333	Silver linden
83	TSCA	4	7	Eastern hemlock
85	ULAM	1274	13.2511773940345	American elm
86	ULPA	265	12.0943396226415	Chinese elm
87	ULPR	14	14.6428571428571	English elm
88	ULPU	26	14.3076923076923	Siberian elm
90	ZESE	1954	6.42067553735926	Japanese zelkova