Skip to content

Instantly share code, notes, and snippets.

@threestory

threestory/index.html

Last active August 29, 2015 14:19
Show Gist options
  • Save threestory/5184ec60517600762835 to your computer and use it in GitHub Desktop.
Save threestory/5184ec60517600762835 to your computer and use it in GitHub Desktop.
Download ZIP
2013 Suicide deaths - two age groups with transition
Raw
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;
}
.barlabel {
font-size:10px;
}
</style>
</head>
<body>
<h2>U.S. Suicide Deaths per 100,000 people by State for 15-24 year olds, 2013</h2>
<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 || 0;
}) ]);
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>
Raw
suicides_2013_states_15-24_25-34.csv
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment