<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//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;
}
.barlabel {
font-size:10px;
}
</style>
</head>
<body>
<p>Click here to change to data for 25-34 year olds, 2013</p>
<script type="text/javascript">
var margin = {top: 15, right: 30, bottom: 20, left: 120};
// 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 widthScale = d3.scale.linear()
.range( [ 0, w ] );
var heightScale = d3.scale.ordinal()
.rangeRoundBands( [ 0, h ], 0.10 );
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_25-34.csv", function(data) {
dataset = data;
data.sort(function(a, b) {
return d3.descending(+a.rate_per_100k_15_24 || 0, +b.rate_per_100k_15_24 || 0);
});
widthScale.domain( [ 0, d3.max(data, function(d) {
return +d.rate_per_100k_25_34 || 0;
}) ]);
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) {
if (d.rate_per_100k_15_24 === "NA"){
return widthScale(0);
}
else{
return widthScale(d.rate_per_100k_15_24);
}
})
.attr("height", heightScale.rangeBand())
.attr("fill", "#5288BE")
.append("title")
// .text(function(d) {
// return d.state + "'s rate of suicide deaths per 100,000 in " + d.year + " is " + d.rate_per_100k_15_24;
// });
;
//add data labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d.rate_per_100k_15_24;
})
.attr("x", function(d) {
if (d.rate_per_100k_15_24 === "NA"){
return margin.left;
}
else{
return widthScale(d.rate_per_100k_15_24) + margin.left - 3;
}
})
.attr("y", function(d) {
return heightScale(d.state) + heightScale.rangeBand() - 3;
})
.attr("class", "barlabel")
.attr("text-anchor", function(d) {
if (d.rate_per_100k_15_24 === "NA"){
return "start";
}
else{
return "end";
}
})
.style("fill", function(d) {
if (d.rate_per_100k_15_24 === "NA"){
return "#000";
}
else{
return "#fff";
}
})
//add axes
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);
d3.select("p")
.on("click", function() {
//sort on different category within loaded csv
data.sort(function(a, b) {
return d3.descending(+a.rate_per_100k_25_34 || 0, +b.rate_per_100k_25_34 || 0);
});
//define axes based on new data
widthScale.domain( [ 0, d3.max(data, function(d) {
return +d.rate_per_100k_25_34;
}) ]);
heightScale.domain(data.map(function(d) { return d.state; } ));
//update rects - the rects are being resorted but titles are not being updated, commented out for now
svg.selectAll("rect")
.data(dataset)
.transition()
.duration(1000)
.attr("x", margin.left)
.attr("y", function(d) {
return heightScale(d.state);
})
.attr("width", function(d) {
if (d.rate_per_100k_25_34 === "NA"){
return widthScale(0);
}
else{
return widthScale(d.rate_per_100k_25_34);
}
})
.attr("height", heightScale.rangeBand())
.attr("fill", "#5288BE")
.selectAll("title")
// .text(function(d) {
// return d.state + "'s Rate of suicide deaths per 100,000 in " + d.year + " is " + d.rate_per_100k_25_34;
// })
;
//update data labels
svg.selectAll("text")
.data(dataset)
.transition()
.duration(1000)
.text(function(d) {
return d.rate_per_100k_25_34;
})
.attr("x", function(d) {
if (d.rate_per_100k_25_34 === "NA"){
return margin.left;
}
else{
return widthScale(d.rate_per_100k_25_34) + margin.left - 3;
}
})
.attr("y", function(d) {
return heightScale(d.state) + heightScale.rangeBand() - 3;
})
.attr("class", "barlabel")
.attr("text-anchor", function(d) {
if (d.rate_per_100k_25_34 === "NA"){
return "start";
}
else{
return "end";
}
})
.style("fill", function(d) {
if (d.rate_per_100k_25_34 === "NA"){
return "#000";
}
else{
return "#fff";
}
})
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
console.log(data);
});
});
</script>
<p>Note: States with missing values have death totals that have been suppressed due to low numbers.</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
Alabama,2013,79,676183,11.7,109,620984,17.6
Alaska,2013,43,112581,38.2,48,114828,41.8
Arizona,2013,130,935527,13.9,168,881828,19.1
Arkansas,2013,68,406865,16.7,80,384032,20.8
California,2013,455,5586402,8.1,572,5591286,10.2
Colorado,2013,131,714353,18.3,159,779686,20.4
Connecticut,2013,26,490184,5.3,42,439593,9.6
Delaware,2013,14,125449,11.2,18,120019,15
District of Columbia,2013,NA,96372,NA,NA,145884,NA
Florida,2013,237,2484554,9.5,345,2456199,14
Georgia,2013,150,1429441,10.5,204,1365240,14.9
Hawaii,2013,30,185103,16.2,29,205722,14.1
Idaho,2013,46,225655,20.4,49,212296,23.1
Illinois,2013,162,1783044,9.1,205,1784842,11.5
Indiana,2013,117,936934,12.5,165,842583,19.6
Iowa,2013,62,439247,14.1,75,390593,19.2
Kansas,2013,55,418659,13.1,64,387397,16.5
Kentucky,2013,85,596295,14.3,112,564035,19.9
Louisiana,2013,72,655370,11,95,662144,14.3
Maine,2013,26,162069,16,30,150570,19.9
Maryland,2013,79,793135,10,93,817751,11.4
Massachusetts,2013,78,940792,8.3,94,912797,10.3
Michigan,2013,179,1411323,12.7,189,1186081,15.9
Minnesota,2013,89,719934,12.4,117,742560,15.8
Mississippi,2013,46,436251,10.5,58,390084,14.9
Missouri,2013,109,832215,13.1,147,796990,18.4
Montana,2013,39,137992,28.3,42,127391,33
Nebraska,2013,29,262565,11,34,253050,13.4
Nevada,2013,44,366277,12,95,397182,23.9
New Hampshire,2013,19,178801,10.6,25,151566,16.5
New Jersey,2013,86,1147625,7.5,105,1140291,9.2
New Mexico,2013,54,293660,18.4,71,278232,25.5
New York,2013,169,2720463,6.2,263,2803717,9.4
North Carolina,2013,132,1363129,9.7,182,1274545,14.3
North Dakota,2013,36,118420,30.4,26,103916,25
Ohio,2013,166,1573297,10.6,248,1452141,17.1
Oklahoma,2013,80,545392,14.7,121,527072,23
Oregon,2013,85,514457,16.5,96,535780,17.9
Pennsylvania,2013,208,1726198,12,235,1611833,14.6
Rhode Island,2013,NA,156875,NA,22,135303,16.3
South Carolina,2013,83,666672,12.4,104,614216,16.9
South Dakota,2013,35,118268,29.6,20,111514,17.9
Tennessee,2013,108,881079,12.3,146,846372,17.3
Texas,2013,421,3855325,10.9,549,3831647,14.3
Utah,2013,85,469436,18.1,122,440736,27.7
Vermont,2013,13,89876,14.5,NA,71906,NA
Virginia,2013,128,1138703,11.2,172,1160793,14.8
Washington,2013,126,933416,13.5,173,995914,17.4
West Virginia,2013,21,237594,8.8,47,219405,21.4
Wisconsin,2013,101,784037,12.9,144,732214,19.7
Wyoming,2013,22,80908,27.2,17,81827,20.8