threestory · April 22, 2015 18:09
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>U.S. Youth Suicide Deaths by Race, 2013 </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 {
 				font-weight: normal;
 				color: #fff;
 			}
 			
 			p {
 				color: #ddd;
 			}
 			
 			svg {
 				background-color: white;
 			}
 			
 			circle:hover {
 				fill: #990011;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: Arial,sans-serif;
 				font-size: 10px;
 			}

 			.plotlabel {
 				font-size:7px;
 				fill: #444;
 			}
 			
 			.hide {
 				opacity:0;
 			}

 		</style>
 	</head>
 	<body>
 
 		<h2>U.S. Suicide Deaths per 100,000 people by State for 15-24 year olds and Native American or Alaska Native as Percentage of Population, 2013</h2>
 		<p>Click here to see data for Black or African American 15-24 year olds, 2013</p>

 		<script type="text/javascript">		

 			var margin = {top: 20, right: 30, bottom: 20, left: 60};
 // 			var padding = {top: 60, right: 60, bottom: 60, left: 60};
 			var w = 960 - margin.left - margin.right;
 			var	h = 750 - margin.top - margin.bottom;
 			
 			var dataset;
 							
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w + margin.right + margin.left)
 						.attr("height", h + margin.top + margin.bottom);
 			
 			var xScale = d3.scale.linear()
 				.range( [ margin.left, w - margin.right ] );
 				
 			var yScale = d3.scale.linear()
 				.range( [ margin.bottom, h - margin.top ] );

 			var xAxis = d3.svg.axis()
 				.scale(xScale)
 				.orient("bottom");
 				
 			var formatter = d3.format(".1%");
 			
 			var yAxis = d3.svg.axis()
 				.scale(yScale)
 				.tickFormat(formatter)
 				.orient("left");
 			
 			d3.csv("suicides_2013_states_15-24_25-34.csv", function(data) {	
 				
 				dataset = data;

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

 				xScale.domain( [ 0, d3.max(data, function(d) {
 					return +d.rate_per_100k_15_24;
 				}) ]);
 				
 				yScale.domain( [ d3.max(data, function(d) { 
 					return +d.ptg_native_15_24;
 				}), 0 ]);
 				
 				var circles = svg.selectAll("circle")
 								.data(data)
 								.enter()
 								.append("circle");

 				circles.attr("cx", function(d) {
 					return xScale(+d.rate_per_100k_15_24);
 				})
 					.attr("cy", function(d) {
 						return yScale(+d.ptg_native_15_24);
 					})
 					.attr("r", function(d) {
 						if (d.rate_per_100k_15_24 === "NA"){
 							return 0;
 						}
 						else{
 						return 6;
 					}
 					})
 					.attr("fill", "#5288BE")
 					.append("title")
 					.text(function(d) {
 						return d.state + ": " + d.rate_per_100k_15_24 + " deaths per 100k, " + formatter(d.ptg_native_15_24) + " percent Native American";
 					});
 				
 				//add data labels	
 				svg.selectAll("text")
 					.data(dataset)
 					.enter()
 					.append("text")
 					.text(function(d) {
 						return d.state;
 					})
 					.attr("x", function(d) {
 							return xScale(d.rate_per_100k_15_24);
 					})
 					.attr("y", function(d) {
 						return yScale(d.ptg_native_15_24) - 8;
 					})
 					.attr("class", function(d) {
 						if (d.rate_per_100k_15_24 === "NA"){
 							return "hide";
 						}
 						else{ return "plotlabel"; 
 						}
 						})
 					.attr("text-anchor", "middle");
 				
 				//add axes
 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(0," + (h-margin.top) + ")")
 					.call(xAxis)
 					.append("text")
    				.attr("x", w - margin.right)
    				.attr("y", -8)
     				.style("text-anchor", "end")
     				.text("Number of suicide deaths per 100,000");

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + margin.left + " , 0)")
 					.call(yAxis)
 					.append("text")
 				    .attr("transform", "rotate(-90)")
 				    .attr("x", -margin.top)
    				.attr("y", 14)
     				.style("text-anchor", "end")
     				.text("% American Indian or Alaska Native");

 				d3.select("p")
 				.on("click", function() {
 	
 					//rescale y-axis
 					yScale.domain( [ d3.max(data, function(d) { 
 						return +d.ptg_black_15_24;
 					}), 0 ]);
 								
 					//update circles
 					svg.selectAll("circle")
 						.data(dataset)
 						.transition()
 						.delay(function(d, i) {
 							return i * 20;
 						})
 						.duration(1000)
 						.attr("cy", function(d) {
 							return yScale(+d.ptg_black_15_24);
 						})
 						.attr("fill", "#DD8811")
 						.select("title")
 						.text(function(d) {
 							return d.state + ": " + d.rate_per_100k_15_24 + " deaths per 100k, " + formatter(d.ptg_black_15_24) + " percent Black or African American";
 						});

 					//update data labels	
 					svg.selectAll("text")
 						.data(dataset)
 						.transition()
 						.delay(function(d, i) {
 							return i * 20;
 						})
 						.duration(1000)
 						.text(function(d) {
 							return d.state;
 						})
 						.attr("x", function(d) {
 								return xScale(+d.rate_per_100k_15_24);
 						})
 						.attr("y", function(d) {
 							return yScale(d.ptg_black_15_24) - 8;
 						})
 						.attr("class", function(d) {
 							if (d.rate_per_100k_15_24 === "NA"){
 								return "hide";
 							}
 							else{ return "plotlabel"; 
 							}
 							})
 						.attr("text-anchor", "middle");
 	
 					svg.select(".x.axis")
 						.transition()
 						.duration(1000)
 						.call(xAxis);

 					svg.select(".y.axis")
 						.transition()
 						.duration(1000)
 						.call(yAxis);
 						
 					svg.select("g.y.axis.text")
 						.attr("transform", "rotate(-90)")
 						.attr("x", -margin.top)
 						.attr("y", 14)
 						.style("text-anchor", "end")
 						.text("% Black or African American");
 					
 					console.log(data);
 							
 				});

 			});

    
 		</script>
 		<p>Note: Data for states with death totals under 10 have been suppressed.</p>
 
 	</body>
 </html>
diff --git a/suicides_2013_states_15-24_25-34.csv b/suicides_2013_states_15-24_25-34.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>U.S. Youth Suicide Deaths by Race, 2013 </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 {
	font-weight: normal;
	color: #fff;
	}

	p {
	color: #ddd;
	}

	svg {
	background-color: white;
	}

	circle:hover {
	fill: #990011;
	}

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

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

	.plotlabel {
	font-size:7px;
	fill: #444;
	}

	.hide {
	opacity:0;
	}

	</style>
	</head>
	<body>

	<h2>U.S. Suicide Deaths per 100,000 people by State for 15-24 year olds and Native American or Alaska Native as Percentage of Population, 2013</h2>
	<p>Click here to see data for Black or African American 15-24 year olds, 2013</p>

	<script type="text/javascript">

	var margin = {top: 20, right: 30, bottom: 20, left: 60};
	// var padding = {top: 60, right: 60, bottom: 60, left: 60};
	var w = 960 - margin.left - margin.right;
	var h = 750 - margin.top - margin.bottom;

	var dataset;

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

	var xScale = d3.scale.linear()
	.range( [ margin.left, w - margin.right ] );

	var yScale = d3.scale.linear()
	.range( [ margin.bottom, h - margin.top ] );

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

	var formatter = d3.format(".1%");

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.tickFormat(formatter)
	.orient("left");

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

	dataset = data;

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

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

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

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(+d.rate_per_100k_15_24);
	})
	.attr("cy", function(d) {
	return yScale(+d.ptg_native_15_24);
	})
	.attr("r", function(d) {
	if (d.rate_per_100k_15_24 === "NA"){
	return 0;
	}
	else{
	return 6;
	}
	})
	.attr("fill", "#5288BE")
	.append("title")
	.text(function(d) {
	return d.state + ": " + d.rate_per_100k_15_24 + " deaths per 100k, " + formatter(d.ptg_native_15_24) + " percent Native American";
	});

	//add data labels
	svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) {
	return d.state;
	})
	.attr("x", function(d) {
	return xScale(d.rate_per_100k_15_24);
	})
	.attr("y", function(d) {
	return yScale(d.ptg_native_15_24) - 8;
	})
	.attr("class", function(d) {
	if (d.rate_per_100k_15_24 === "NA"){
	return "hide";
	}
	else{ return "plotlabel";
	}
	})
	.attr("text-anchor", "middle");

	//add axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h-margin.top) + ")")
	.call(xAxis)
	.append("text")
	.attr("x", w - margin.right)
	.attr("y", -8)
	.style("text-anchor", "end")
	.text("Number of suicide deaths per 100,000");

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + margin.left + " , 0)")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("x", -margin.top)
	.attr("y", 14)
	.style("text-anchor", "end")
	.text("% American Indian or Alaska Native");

	d3.select("p")
	.on("click", function() {

	//rescale y-axis
	yScale.domain( [ d3.max(data, function(d) {
	return +d.ptg_black_15_24;
	}), 0 ]);

	//update circles
	svg.selectAll("circle")
	.data(dataset)
	.transition()
	.delay(function(d, i) {
	return i * 20;
	})
	.duration(1000)
	.attr("cy", function(d) {
	return yScale(+d.ptg_black_15_24);
	})
	.attr("fill", "#DD8811")
	.select("title")
	.text(function(d) {
	return d.state + ": " + d.rate_per_100k_15_24 + " deaths per 100k, " + formatter(d.ptg_black_15_24) + " percent Black or African American";
	});

	//update data labels
	svg.selectAll("text")
	.data(dataset)
	.transition()
	.delay(function(d, i) {
	return i * 20;
	})
	.duration(1000)
	.text(function(d) {
	return d.state;
	})
	.attr("x", function(d) {
	return xScale(+d.rate_per_100k_15_24);
	})
	.attr("y", function(d) {
	return yScale(d.ptg_black_15_24) - 8;
	})
	.attr("class", function(d) {
	if (d.rate_per_100k_15_24 === "NA"){
	return "hide";
	}
	else{ return "plotlabel";
	}
	})
	.attr("text-anchor", "middle");

	svg.select(".x.axis")
	.transition()
	.duration(1000)
	.call(xAxis);

	svg.select(".y.axis")
	.transition()
	.duration(1000)
	.call(yAxis);

	svg.select("g.y.axis.text")
	.attr("transform", "rotate(-90)")
	.attr("x", -margin.top)
	.attr("y", 14)
	.style("text-anchor", "end")
	.text("% Black or African American");

	console.log(data);

	});

	});


	</script>
	<p>Note: Data for states with death totals under 10 have been suppressed.</p>

	</body>
	</html>
state	year	deaths_15_24	population_15_24	rate_per_100k_15_24	deaths_25_34	population_25_34	rate_per_100k_25_34	ptg_native_15_24	ptg_asian_15_24	ptg_black_15_24	ptg_white_15_24	ptg_native_25_34	ptg_asian_25_34	ptg_black_25_34	ptg_white_25_34
Alabama	2013	79	676183	11.7	109	620984	17.6	0.008071779	0.015615595	0.324518658	0.651793967	0.008737745	0.020881375	0.294870721	0.675510158
Alaska	2013	43	112581	38.2	48	114828	41.8	0.192341514	0.081736705	0.068723852	0.657197929	0.157000035	0.077219842	0.053436444	0.712343679
Arizona	2013	130	935527	13.9	168	881828	19.1	0.074521633	0.03979682	0.067400513	0.818281033	0.065721433	0.049449553	0.061404265	0.823424749
Arkansas	2013	68	406865	16.7	80	384032	20.8	0.012584027	0.020972558	0.198139432	0.768303983	0.011959941	0.027508124	0.175068744	0.785463191
California	2013	455	5586402	8.1	572	5591286	10.2	0.024301688	0.140948503	0.083983573	0.750766236	0.021981169	0.166361549	0.073093381	0.738563901
Colorado	2013	131	714353	18.3	159	779686	20.4	0.024090331	0.038546769	0.06401597	0.873346931	0.020531342	0.042647938	0.053867839	0.882952881
Connecticut	2013	26	490184	5.3	42	439593	9.6	0.00813572	0.045419679	0.155792519	0.790652082	0.008014231	0.070526601	0.143694281	0.777764887
Delaware	2013	14	125449	11.2	18	120019	15	0.00798731	0.038406045	0.285040136	0.668566509	0.008748615	0.058932336	0.237229105	0.695089944
District of Columbia	2013	NA	96372	NA	NA	145884	NA	0.006381522	0.047908106	0.523533806	0.422176566	0.007135807	0.063495654	0.322975789	0.60639275
Florida	2013	237	2484554	9.5	345	2456199	14	0.006781901	0.032847344	0.22995113	0.730419625	0.006844722	0.03912183	0.203007167	0.751026281
Georgia	2013	150	1429441	10.5	204	1365240	14.9	0.006270983	0.039240514	0.371913916	0.582574587	0.006787818	0.049320266	0.338412294	0.605479623
Hawaii	2013	30	185103	16.2	29	205722	14.1	0.007314846	0.624122786	0.048562152	0.320000216	0.006727525	0.572364647	0.049153712	0.371754115
Idaho	2013	46	225655	20.4	49	212296	23.1	0.023730917	0.019857747	0.017934457	0.938476878	0.021634887	0.023990089	0.012718092	0.941656932
Illinois	2013	162	1783044	9.1	205	1784842	11.5	0.008513531	0.052057044	0.189712649	0.749716776	0.00773794	0.070077351	0.149167825	0.773016883
Indiana	2013	117	936934	12.5	165	842583	19.6	0.005367507	0.027755424	0.123048155	0.843828914	0.005377512	0.029801218	0.110684645	0.854136625
Iowa	2013	62	439247	14.1	75	390593	19.2	0.00737626	0.032332606	0.05717512	0.903116014	0.006011372	0.034957104	0.045881519	0.913150005
Kansas	2013	55	418659	13.1	64	387397	16.5	0.019194619	0.035152714	0.091121892	0.854530776	0.015862281	0.041068981	0.077437358	0.865631381
Kentucky	2013	85	596295	14.3	112	564035	19.9	0.003318827	0.017058671	0.11376416	0.865858342	0.003372131	0.02053596	0.09365199	0.88243992
Louisiana	2013	72	655370	11	95	662144	14.3	0.009322978	0.020643301	0.38993393	0.580099791	0.008972369	0.02466533	0.339728216	0.626634086
Maine	2013	26	162069	16	30	150570	19.9	0.010477019	0.019028932	0.028833398	0.941660651	0.010075048	0.017280999	0.019153882	0.953490071
Maryland	2013	79	793135	10	93	817751	11.4	0.0072018	0.061074092	0.353585455	0.578138652	0.008321604	0.078810053	0.317327646	0.595540696
Massachusetts	2013	78	940792	8.3	94	912797	10.3	0.007032373	0.072564393	0.11038678	0.810016454	0.006894194	0.092514546	0.096976655	0.803614604
Michigan	2013	179	1411323	12.7	189	1186081	15.9	0.011069047	0.03468306	0.186524275	0.767723618	0.009562585	0.040221536	0.157529713	0.792686166
Minnesota	2013	89	719934	12.4	117	742560	15.8	0.019862932	0.064639259	0.086228738	0.829269072	0.016583172	0.06891699	0.074540778	0.839959061
Mississippi	2013	46	436251	10.5	58	390084	14.9	0.006883652	0.013038366	0.438790971	0.541287011	0.007467622	0.014812194	0.407981358	0.569738825
Missouri	2013	109	832215	13.1	147	796990	18.4	0.008052006	0.026196356	0.157039948	0.808711691	0.00714689	0.029991593	0.130915068	0.831946449
Montana	2013	39	137992	28.3	42	127391	33	0.089947243	0.015689315	0.016370514	0.877992927	0.080774937	0.012151565	0.011335181	0.895738317
Nebraska	2013	29	262565	11	34	253050	13.4	0.018387828	0.028339649	0.070649173	0.88262335	0.016226042	0.035143252	0.060683659	0.887947046
Nevada	2013	44	366277	12	95	397182	23.9	0.023397593	0.093418369	0.127040464	0.756143574	0.0211213	0.104536459	0.105974087	0.768368154
New Hampshire	2013	19	178801	10.6	25	151566	16.5	0.004888116	0.028260468	0.026084865	0.940766551	0.004229181	0.038293549	0.021581357	0.935895913
New Jersey	2013	86	1147625	7.5	105	1140291	9.2	0.008570744	0.086112624	0.189862542	0.71545409	0.009550194	0.125709139	0.166403137	0.69833753
New Mexico	2013	54	293660	18.4	71	278232	25.5	0.132997344	0.020149152	0.03928012	0.807573384	0.1251833	0.026140056	0.033856638	0.814820006
New York	2013	169	2720463	6.2	263	2803717	9.4	0.013669732	0.086791109	0.214700953	0.684838206	0.013206397	0.108950368	0.18715548	0.690687755
North Carolina	2013	132	1363129	9.7	182	1274545	14.3	0.019110444	0.029322977	0.270025801	0.681540779	0.018394015	0.041002868	0.234125904	0.706477213
North Dakota	2013	36	118420	30.4	26	103916	25	0.066188144	0.021187299	0.034183415	0.878441142	0.059730937	0.024192617	0.029802918	0.886273529
Ohio	2013	166	1573297	10.6	248	1452141	17.1	0.00411429	0.022515139	0.166606178	0.806764393	0.003865327	0.031996204	0.140585522	0.823552947
Oklahoma	2013	80	545392	14.7	121	527072	23	0.127667806	0.030013275	0.111589462	0.730729457	0.108093391	0.029671468	0.092742548	0.769492593
Oregon	2013	85	514457	16.5	96	535780	17.9	0.02851939	0.062349234	0.036158513	0.872972863	0.023658965	0.061510321	0.029159356	0.885671358
Pennsylvania	2013	208	1726198	12	235	1611833	14.6	0.004941496	0.037708884	0.158876908	0.798472713	0.00492855	0.04875381	0.134971799	0.81134584
Rhode Island	2013	NA	156875	NA	22	135303	16.3	0.012615139	0.050001594	0.107352988	0.830030279	0.012069208	0.060841223	0.099798231	0.827291339
South Carolina	2013	83	666672	12.4	104	614216	16.9	0.006619447	0.019052848	0.336094811	0.638232894	0.006891712	0.022412311	0.298831356	0.671864621
South Dakota	2013	35	118268	29.6	20	111514	17.9	0.123406162	0.019853215	0.032071228	0.824669395	0.104004878	0.018715139	0.029063615	0.848216367
Tennessee	2013	108	881079	12.3	146	846372	17.3	0.005169797	0.019330843	0.222160555	0.753338804	0.005413695	0.025798349	0.192389399	0.776398558
Texas	2013	421	3855325	10.9	549	3831647	14.3	0.013237794	0.043528885	0.144342176	0.798891144	0.012128727	0.056916256	0.13360547	0.797349547
Utah	2013	85	469436	18.1	122	440736	27.7	0.019819528	0.041694715	0.021159434	0.917326324	0.017686325	0.044012742	0.016572279	0.921728654
Vermont	2013	13	89876	14.5	NA	71906	NA	0.005574347	0.025824469	0.026035872	0.942565312	0.005423748	0.021528106	0.01958112	0.953467026
Virginia	2013	128	1138703	11.2	172	1160793	14.8	0.007678034	0.062990086	0.240874925	0.688456955	0.007261415	0.081887985	0.208869282	0.701981318
Washington	2013	126	933416	13.5	173	995914	17.4	0.028588539	0.100427891	0.064900323	0.806083247	0.023691805	0.113837139	0.0558492	0.806621857
West Virginia	2013	21	237594	8.8	47	219405	21.4	0.002504272	0.011906866	0.056865914	0.928722948	0.002857729	0.01329049	0.047988879	0.935862902
Wisconsin	2013	101	784037	12.9	144	732214	19.7	0.015318155	0.039362938	0.096918895	0.848400012	0.014275881	0.041952216	0.081507592	0.862264311
Wyoming	2013	22	80908	27.2	17	81827	20.8	0.035942058	0.014695704	0.033568992	0.915793247	0.030173415	0.017475894	0.021948746	0.930401946