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/560442b4c4bfc1c6a4f2 to your computer and use it in GitHub Desktop.
Save threestory/560442b4c4bfc1c6a4f2 to your computer and use it in GitHub Desktop.
Download ZIP
U.S. Suicides by State for 15-24 year-olds, Time Series with highlights
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>U.S. Suicide Rates for 15-24-year-olds by U.S. State, 1999-2013</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="http://use.typekit.com/brf5jpj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
body {
background-color: #fff;
font-family: "adelle-1","adelle-2", constantia, cambria, Georgia, serif;
font-size:14px;
margin: 18px 0 0 30px;
}
h1 {
font-size: 24px;
margin: 0;
color: #5387bd;
font-weight: normal;
}
h2 {
font-weight: normal;
color: #808080;
}
p {
color: #808080;
}
svg {
background-color: white;
}
circle:hover {
fill: orange;
}
path {
stroke: #888;
stroke-width: 2;
opacity: 0.2;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-webkit-transition: all 0.1s;
transition: all 0.1s;
cursor: pointer;
}
path:hover {
stroke: black;
opacity: 1;
}
g.highlight path {
stroke: #e0c775;
stroke-width: 4;
opacity: 1;
}
g.national path {
stroke: #5387bd;
stroke-width: 4;
opacity: 1;
}
g.county path {
stroke: #8661b0;
stroke-width: 4;
opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis text {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
font-size: 14px;
letter-spacing: 0.5px;
}
.labelNation {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
fill: #5387bd;
font-size: 12px;
text-anchor: start;
vertical-align: sub;
}
.labelState {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
fill: #e0c775;
font-size: 12px;
text-anchor: start;
}
.labelCounty {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
fill: #8661b0;
font-size: 12px;
text-anchor: start;
}
.path.active {
stroke: black;
opacity: 1;
}
</style>
</head>
<body>
<h1>Suicide Rates for 15-24-year-olds by U.S. State, 1999-2013</h1>
<p>Data for states with fewer than 10 deaths in a given year is suppressed. Source: <a href="http://wonder.cdc.gov/">Centers for Disease Control</a></p>
<script type="text/javascript">
//Dimensions and padding
var w = 900;
var h = 700;
var padding = [ 20, 80, 50, 60 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.amount);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var dataset; //Global variable
//Load USA data
d3.csv("suicide_rates_1999_2013_by_state.csv", function(data) {
//New array with all the years, for referencing later
var years = ["1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"];
//Make dataset an empty array to hold our restructured dataset
dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this state's name and empty array
dataset[i] = {
state: data[i].state,
rate: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the suicide rate data array
//for this state
dataset[i].rate.push({
year: years[j],
amount: data[i][years[j]]
});
}
}
}
//Uncomment to log the newly restructured dataset to the console
// console.log(dataset);
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.rate, function(d) {
return +d.amount;
});
}),
0
]);
//Make a group for each state
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("highlight", function(d) {
if (d.state == "California") {
return true;
} else {
return false;
}
})
.classed("national", function(d) {
return (d.state == "United States") ? true : false;
})
.classed("county", function(d) {
if (d.state == "Santa Clara County") return true;
else return false;
})
//attempt to add highlighting to moused-over lines
.on("click", function(d) {
console.log(d);
});
// d3.select(this).classed("active", true ) }) // classed("active",boolean) not working
// .on("mouseover", function() { d3.select(this).classed("active", true ) }) // classed("active",boolean) not working
// .on("mouseout", function() { d3.select(this).classed("active", false) });
//
// .classed("highlight", function(d) {
//
// if (d.state == "Alaska" ||
// d.state == "California" ||
// d.state == "Montana") {
// return true;
// } else {
// return false;
// }
//
// });
//Append a title with the state name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.state;
});
//Within each group, create a new line/path,
//binding just the suicide rate data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.rate ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke-width", 2);
//Axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -(h - padding[0] - padding[2])/2)
.attr("y", -46)
.style ("text-anchor", "middle")
.text("suicide deaths per 100,000");
//Labels for highlighted lines - probably better to wrap these into the line elements themselves
//with some logic for selecting the ones you want to highlight? Use anonymous function to match objects for highlighting?
//National label
svg.append("text")
.attr("transform", "translate(" + (w - padding[1] - padding[3]) + ", " + yScale(data[50][years[14]]) + ")")
.attr("dy", ".35em")
.attr("dx", ".25em")
.attr("text-anchor", "start")
.attr("class","labelNation")
.text("National Average");
//State label
svg.append("text")
.attr("transform", "translate(" + (w - padding[1] - padding[3]) + ", " + yScale(data[4][years[14]]) + ")")
.attr("dy", ".35em")
.attr("dx", ".25em")
.attr("text-anchor", "start")
.attr("class","labelState")
.text("California");
//County label
svg.append("text")
.attr("transform", "translate(" + (w - padding[1] - padding[3]) + ", " + yScale(data[51][years[14]]) + ")")
.attr("dy", ".35em")
.attr("dx", ".25em")
.attr("text-anchor", "start")
.attr("class","labelCounty")
.text("Santa Clara County");
// //Another approach to adding labels - not currently working
// var datalabel = svg.selectAll("text")
// .data(dataset.filter(function(d) {
// return (d.state == "Montana" || d.state == "Alaska");
// }))
// .enter()
// .append("text");
//
// datalabel.attr("x", (w - padding[1] - padding[3]))
// .attr("y", (function(d) {
// return yScale( data[42][years[14]]);
// }))
// .attr("class","labelState")
// .text(function(d) {
// return d.state;
// });
//
// Uncomment to test accessing specific data
// console.log(data);
console.log(data[42][years[14]]);
// console.log(data[51].state);
});
</script>
</body>
</html>
Raw
suicide_rates_1999_2013_by_state.csv
state 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
Alabama 14 10.8 10.1 9.3 9.6 13 9.9 13 11.1 11.9 10.5 11 11.7 9.9 11.7
Alaska 26.9 54.3 25.3 32.3 32.4 39.8 28.7 37.5 29.4 38.8 35.1 46 33.2 32.8 38.2
Arizona 11 17.7 13.6 16.5 16.1 17.1 17.8 18.1 15.4 13.7 13.4 14.9 15.7 14.4 13.9
Arkansas 15.8 12.1 12.7 14.6 10.4 9.7 15 10.1 10 14.5 13.7 13.6 14.8 15 16.7
California 6.9 6.6 6.4 6.4 7.4 8 6.9 7.5 6.8 7.1 7.1 7.9 7.8 7.4 8.1
Colorado 14.6 14.3 14.8 15.8 12.4 15.3 20.1 17.1 13 15.9 18.6 16.7 16 18 18.3
Connecticut 7.8 7.9 9.1 5.9 5.3 7.6 6.7 7.1 7 7.4 8.8 8.1 8.6 7.6 5.3
Delaware 9.5 13.5 9.7 9.5 11.5 8 9.5 9.5 10.2 14.9 13.3 11.2
Florida 8.6 9.6 9.4 9.2 9 9.2 9.1 8.4 9.3 9.2 9.2 8.7 9.7 10.9 9.5
Georgia 10.3 11.4 11.6 8.3 10.1 10.3 8.4 7.6 7.8 8.7 8.9 10.1 8.9 9.1 10.5
Hawaii 9.1 10.9 12.4 6.9 9.1 7.8 5.5 12.5 8.3 10.5 14.4 16.5 19.6 12.4 16.2
Idaho 13.7 14.6 21.4 14.6 15.3 14.2 12.7 13.9 20.5 15.5 14.3 16.1 22.3 24 20.4
Illinois 8.2 8.4 8.8 8.7 6.9 8.5 7.5 7.3 9.1 7.5 7.8 7.9 9.8 8.5 9.1
Indiana 10.6 11.4 10.7 11.1 8.7 9.8 11.5 10 10.6 9.5 11.9 11 9.8 12.9 12.5
Iowa 12.6 10.7 13.6 12.1 12.1 12.9 12.7 12.2 10.3 12.6 13.6 11.4 12.2 13.3 14.1
Kansas 13.9 12.5 14.9 15 10.6 13.6 11.2 11.9 14.2 16.2 10.7 14.7 16.6 19 13.1
Kentucky 9.6 12.2 10.2 11.8 13.2 12.8 10.6 12.2 12.3 9.6 13.1 9.9 12.7 15.3 14.3
Louisiana 11.9 11.1 10 12.4 11 12 13 10.4 10.6 11.1 8.4 10.7 11.4 10.5 11
Maine 10.7 15.7 14.1 10.8 7.6 16.3 8 8 17.9 9.9 8.2 14.9 15 13.4 16
Maryland 9.7 10.7 9.2 10.3 10.2 7.7 8.2 9.1 8.5 7.8 8.9 7.9 8 9 10
Massachusetts 5.5 6.5 6.4 6.5 5.3 5.5 6 4.8 5.7 4.8 5.7 8.3 7.1 8.2 8.3
Michigan 10.2 9.7 9.6 9.8 8.4 9.6 9.4 8 9.2 9.7 9.5 12.1 11.3 13 12.7
Minnesota 11.4 10.2 10.8 12 11.9 11.4 12.4 11.2 11.2 11.5 11.5 12 12.3 12.7 12.4
Mississippi 9.6 11.6 11.3 12.5 8.9 10.9 12.1 8.4 11.4 12.3 10.3 9 9.2 9.6 10.5
Missouri 13.7 12.2 13.1 10.7 10.4 10.9 10.4 12.3 10.9 14.2 10.5 11.6 14 14.4 13.1
Montana 19.3 15.4 14.2 20.7 20.2 19.3 21.9 19.8 14.4 21 28 20.9 20.7 17.5 28.3
Nebraska 13.4 14.9 11.2 9.9 10.6 12.4 9.3 15.7 11.7 13.4 10.4 9.7 10 12.7 11
Nevada 15.9 15.5 12.5 13.9 19.9 12.1 16.5 17.9 12.4 14.1 9.8 13.3 16.4 10.1 12
New Hampshire 15.1 7.1 16.1 13.2 12.9 10.3 9 6.1 8.3 7.8 12.3 11.8 14 8.4 10.6
New Jersey 6.1 6 6.1 5 5.8 7.2 6.5 5.5 6.6 5.3 5.9 7.7 7.3 7.9 7.5
New Mexico 23.3 23.6 14.6 18.5 17.1 26 21.4 22.1 20.8 24.6 24.3 20.5 20.4 22 18.4
New York 6.3 6.8 6.5 7.1 5.9 6.3 6 5.3 5.5 5.3 6.6 6.6 7.9 7.5 6.2
North Carolina 11.7 10.5 12.1 7.7 11.7 10.9 9.3 11.3 9.2 10.5 10 10.1 10.4 10.3 9.7
North Dakota 16.4 15.4 10.1 19 15.9 24.8 24.7 16.4 12.9 21.5 26.3 17.4 18.6 30.4
Ohio 9.7 9.1 10.1 9.5 8 11.3 11.2 10.6 10.6 11.7 9 11.7 12.7 11.3 10.6
Oklahoma 15.2 13.2 13.1 13.7 12.1 13.9 12.6 12.8 11 14 12.7 13.9 16.6 19.6 14.7
Oregon 11.9 15.6 9.3 12.2 12.7 13.6 11.7 13.8 11.4 12.1 11.2 10.6 12.9 13 16.5
Pennsylvania 10.4 10 9.3 11.1 10.3 9.7 9.6 10.1 9.4 9.4 9.4 12 11.2 11.3 12
Rhode Island 7.7 8.8 10.6 9.5 6.2 6.8 8.6 6.2
South Carolina 11.2 8.3 9.3 7.7 7.2 10.3 11.6 8.7 8.2 13.2 10 11.5 11.8 10.4 12.4
South Dakota 25.3 17.3 20.5 17.8 17.6 20.7 19.9 24.2 19.5 30 31.9 26.9 22.4 19.6 29.6
Tennessee 9.9 12 11 9.2 9.9 12.2 10.8 11.6 9.7 11.3 12.9 12 10.4 10.6 12.3
Texas 9.3 10.7 10 9.6 10.2 9.7 10.5 9.8 9.8 9.2 11.2 10.7 10.6 11.3 10.9
Utah 14.2 14 13.1 12.5 16.8 13.6 14 13 15.7 17 15 15.4 15.9 18.5 18.1
Virginia 9.2 8.5 10.3 8.4 9.8 9.1 8.6 9.3 8.6 11.2 9.4 8.7 12 11.4 11.2
Washington 15.1 11.1 10 10.8 11.4 12 11.3 12.9 11.6 11.3 12.5 12.5 13.2 14 13.5
West Virginia 11.2 12.2 8.1 20.4 13.5 16.4 10.8 8.8 13.8 12.7 10.5 8.8 15.5 16.4 8.8
Wisconsin 13.3 12.9 11.6 13.5 11.9 12.7 11.7 8 13.1 9.7 12.4 13.7 14.8 12.5 12.9
Wyoming 25.1 14.6 20.8 30.6 22.7 20.1 16.3 18.8 23.8 23.7 31.9 21.8 26.3 27.2
Vermont 14.4 12.8 11.3 10.8 12 14.5 18.9 14.5
United States 10.1 10.2 9.9 9.8 9.6 10.3 9.9 9.7 9.6 9.9 10 10.5 11 11.1 11.1
Santa Clara County 5.9 9.7 6.5 7.8 6.8 5.8 7.5 9.2 4.4 10.9 7.4 10.3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment