threestory · April 8, 2015 04:42
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>U.S. Suicide Deaths</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">
 			
 			body {
 				background-color: #808080;
 				font-family:Arial, sans-serif;
 				font-size:12px;
 			}

 			h2 {
 				color: #fff;
 			}
 			
 			p {
 				color: #ddd;
 			}
 			
 			svg {
 				background-color: white;
 			}
 			
 			rect:hover {
 				fill: #2E2E31;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: Arial,sans-serif;
 				font-size: 10px;
 			}

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


 		</style>
 	</head>
 	<body>
 
 		<h2>U.S. Suicide Deaths by State for 15-24 year olds, 2013</h2>
 		<script type="text/javascript">		

 			var margin = {top: 10, right: 30, bottom: 20, left: 90};
 			var w = 960 - margin.right - margin.left;
 			var	h = 650 - margin.top - margin.bottom;
 							
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w + margin.right + margin.left)
 						.attr("height", h + margin.top + margin.bottom);
 			
 			var widthScale = d3.scale.linear()
 				.range( [ 0,w ] );
 				
 			var heightScale = d3.scale.ordinal()
 				.rangeRoundBands( [ 0, h ], 0.25 );

 			var xAxis = d3.svg.axis()
 				.scale(widthScale)
 				.orient("bottom");
 			
 			var yAxis = d3.svg.axis()
 				.scale(heightScale)
 				.orient("left");
 			
 			d3.csv("suicides_2013_states_15-24_part.csv", function(data) {	

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

 				widthScale.domain( [ 0, d3.max(data, function(d) {
 					return +d.deaths;
 				}) ]);
 				
 				heightScale.domain(data.map(function(d) { return d.state; } ));
 				
 				var rects = svg.selectAll("rect")
 								.data(data)
 								.enter()
 								.append("rect");

 				rects.attr("x", margin.left)
 					.attr("y", function(d) {
 						return heightScale(d.state);
 					})
 					.attr("width", function(d) {
 						return widthScale(d.deaths);
 					})
 					.attr("height", heightScale.rangeBand())
 					.attr("fill", "#5288BE")
 					.append("title")
 					.text(function(d) {
 						return d.state + "'s number of suicide deaths for the " + d.age_groups + " age range in " + d.year + " is " + d.deaths;
 					});
 				
 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(" + margin.left + "," + (h-margin.top) + ")")
 					.call(xAxis);

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + margin.left + " , 0)")
 					.call(yAxis);

 			});


 		</script>
 		<p>Note: Insufficient data for Washington D.C., Rhode Island, and Vermont</p>
 
 	</body>
 </html>
diff --git a/suicides_2013_states_15-24_part.csv b/suicides_2013_states_15-24_part.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>U.S. Suicide Deaths</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: #808080;
	font-family:Arial, sans-serif;
	font-size:12px;
	}

	h2 {
	color: #fff;
	}

	p {
	color: #ddd;
	}

	svg {
	background-color: white;
	}

	rect:hover {
	fill: #2E2E31;
	}

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

	.axis text {
	font-family: Arial,sans-serif;
	font-size: 10px;
	}

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


	</style>
	</head>
	<body>

	<h2>U.S. Suicide Deaths by State for 15-24 year olds, 2013</h2>
	<script type="text/javascript">

	var margin = {top: 10, right: 30, bottom: 20, left: 90};
	var w = 960 - margin.right - margin.left;
	var h = 650 - margin.top - margin.bottom;

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w + margin.right + margin.left)
	.attr("height", h + margin.top + margin.bottom);

	var widthScale = d3.scale.linear()
	.range( [ 0,w ] );

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands( [ 0, h ], 0.25 );

	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

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

	d3.csv("suicides_2013_states_15-24_part.csv", function(data) {

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

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

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

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

	rects.attr("x", margin.left)
	.attr("y", function(d) {
	return heightScale(d.state);
	})
	.attr("width", function(d) {
	return widthScale(d.deaths);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "#5288BE")
	.append("title")
	.text(function(d) {
	return d.state + "'s number of suicide deaths for the " + d.age_groups + " age range in " + d.year + " is " + d.deaths;
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + margin.left + "," + (h-margin.top) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + margin.left + " , 0)")
	.call(yAxis);

	});


	</script>
	<p>Note: Insufficient data for Washington D.C., Rhode Island, and Vermont</p>

	</body>
	</html>
state	year	age_groups	deaths	population	rate_per_100k
Alabama	2013	15-24	79	676183	11.7
Alaska	2013	15-24	43	112581	38.2
Arizona	2013	15-24	130	935527	13.9
Arkansas	2013	15-24	68	406865	16.7
California	2013	15-24	455	5586402	8.1
Colorado	2013	15-24	131	714353	18.3
Connecticut	2013	15-24	26	490184	5.3
Delaware	2013	15-24	14	125449	Unreliable
Florida	2013	15-24	237	2484554	9.5
Georgia	2013	15-24	150	1429441	10.5
Hawaii	2013	15-24	30	185103	16.2
Idaho	2013	15-24	46	225655	20.4
Illinois	2013	15-24	162	1783044	9.1
Indiana	2013	15-24	117	936934	12.5
Iowa	2013	15-24	62	439247	14.1
Kansas	2013	15-24	55	418659	13.1
Kentucky	2013	15-24	85	596295	14.3
Louisiana	2013	15-24	72	655370	11
Maine	2013	15-24	26	162069	16
Maryland	2013	15-24	79	793135	10
Massachusetts	2013	15-24	78	940792	8.3
Michigan	2013	15-24	179	1411323	12.7
Minnesota	2013	15-24	89	719934	12.4
Mississippi	2013	15-24	46	436251	10.5
Missouri	2013	15-24	109	832215	13.1
Montana	2013	15-24	39	137992	28.3
Nebraska	2013	15-24	29	262565	11
Nevada	2013	15-24	44	366277	12
New Hampshire	2013	15-24	19	178801	Unreliable
New Jersey	2013	15-24	86	1147625	7.5
New Mexico	2013	15-24	54	293660	18.4
New York	2013	15-24	169	2720463	6.2
North Carolina	2013	15-24	132	1363129	9.7
North Dakota	2013	15-24	36	118420	30.4
Ohio	2013	15-24	166	1573297	10.6
Oklahoma	2013	15-24	80	545392	14.7
Oregon	2013	15-24	85	514457	16.5
Pennsylvania	2013	15-24	208	1726198	12
South Carolina	2013	15-24	83	666672	12.4
South Dakota	2013	15-24	35	118268	29.6
Tennessee	2013	15-24	108	881079	12.3
Texas	2013	15-24	421	3855325	10.9
Utah	2013	15-24	85	469436	18.1
Virginia	2013	15-24	128	1138703	11.2
Washington	2013	15-24	126	933416	13.5
West Virginia	2013	15-24	21	237594	8.8
Wisconsin	2013	15-24	101	784037	12.9
Wyoming	2013	15-24	22	80908	27.2