Suicides by State, 2013 - Scatterplot Racial Comparison

<!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="https://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>

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js