dgkeyes · January 21, 2016 19:14
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Oregon's Latino Population by County</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 		<style type="text/css">
 			
 			body {
 				background-color: white;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			h1 {
 				font-size: 34px;
 				margin: 25px;
 			}

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

 			svg {
 				background-color: white;
 			}

 			rect:hover {
 				fill: orange;
 			}
 			
 			.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>

 		<h1>Oregon's Latino Population by County</h1>

 		

 		<script type="text/javascript">		


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



 			var widthScale = d3.scale.linear()
 								.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");

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



 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);



 			d3.csv("oregon-latino-pop.csv", function(data) {

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

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

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

 				var rects = svg.selectAll("rect")
 								.data(data)
 								.enter()
 								.append("rect");

 				rects.attr("x", padding[3])
 					.attr("y", function(d) {
 						return heightScale(d.COUNTY);
 					})
 					.attr("width", function(d) {
 						return widthScale(d.HISP2010);
 					})
 					.attr("height", heightScale.rangeBand())
 					.attr("fill", "steelblue")
 					.append("title")
 					.text(function(d) {
 						return d.COUNTY + "'s Latino population in 2010 was " + d.HISP2010;
 					});

 				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/oregon-latino-pop.csv b/oregon-latino-pop.csv

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Oregon's Latino Population by County</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 34px;
	margin: 25px;
	}

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

	svg {
	background-color: white;
	}

	rect:hover {
	fill: orange;
	}

	.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>

	<h1>Oregon's Latino Population by County</h1>



	<script type="text/javascript">


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



	var widthScale = d3.scale.linear()
	.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");

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



	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	d3.csv("oregon-latino-pop.csv", function(data) {

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

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

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

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.COUNTY);
	})
	.attr("width", function(d) {
	return widthScale(d.HISP2010);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "steelblue")
	.append("title")
	.text(function(d) {
	return d.COUNTY + "'s Latino population in 2010 was " + d.HISP2010;
	});

	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>
COUNTY	TOTAL1990	NONHISP1990	HISP1990	TOTAL2000	NONHISP2000	HISP2000	TOTAL2010	NONHISP2010	HISP2010
Baker	15317	15041	276	16741	16349	392	16134	15606	528
Benton	70811	69076	1735	78153	74508	3645	85579	80112	5467
Clackamas	278850	271721	7129	338391	321647	16744	375992	346854	29138
Clatsop	33301	32653	648	35630	34033	1597	37039	34201	2838
Columbia	37557	36873	684	43560	42467	1093	49351	47364	1987
Coos	60273	58920	1353	62779	60646	2133	63043	59652	3391
Crook	14111	13723	388	19182	18100	1082	20978	19515	1463
Curry	19327	18973	354	21137	20376	761	22364	21163	1201
Deschutes	74958	73432	1526	115367	111063	4304	157733	146015	11718
Douglas	94649	92424	2225	100399	97116	3283	107667	102612	5055
Gilliam	1717	1687	30	1915	1880	35	1871	1783	88
Grant	7853	7701	152	7935	7772	163	7445	7238	207
Harney	7060	6839	221	7609	7293	316	7422	7128	294
Hood River	16903	14151	2752	20411	15304	5107	22346	15757	6589
Jackson	146389	140440	5949	181269	169143	12126	203206	181461	21745
Jefferson	13676	12228	1448	19009	15637	3372	21720	17525	4195
Josephine	62649	60900	1749	75726	72497	3229	82713	77462	5251
Klamath	57702	54718	2984	63775	58814	4961	66380	59465	6915
Lake	7186	6916	270	7422	7018	404	7895	7350	545
Lane	282912	276060	6852	322959	308085	14874	351715	325548	26167
Lincoln	38889	38291	598	44479	42360	2119	46034	42379	3655
Linn	91227	89050	2177	103069	98555	4514	116672	107545	9127
Malheur	26038	20883	5155	31615	23516	8099	31313	21446	9867
Marion	228483	210258	18225	284834	236120	48714	315335	238741	76594
Morrow	7625	6800	825	10995	8309	2686	11173	7676	3497
Multnomah	583887	565497	18390	660486	610879	49607	735334	655196	80138
Polk	49541	46739	2802	62380	56900	5480	75403	66315	9088
Sherman	1918	1890	28	1934	1840	94	1765	1667	98
Tillamook	21570	21196	374	24262	23018	1244	25250	22966	2284
Umatilla	59249	53942	5307	70548	59182	11366	75889	57782	18107
Union	23598	23217	381	24530	23930	600	25748	24746	1002
Wallowa	6911	6798	113	7226	7101	125	7008	6852	156
Wasco	21683	20618	1065	23791	21577	2214	25213	21470	3743
Washington	311554	297153	14401	445342	395607	49735	529710	446440	83270
Wheeler	1396	1384	12	1547	1468	79	1441	1379	62
Yamhill	65551	61422	4129	84992	75975	9017	99193	84601	14592