2013 U.S. Suicide Deaths for 15-24 year-olds with Scales

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>U.S. Suicide Deaths</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 {
				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>

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

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