Skip to content

Instantly share code, notes, and snippets.

@threestory

threestory/index.html

Last active August 29, 2015 14:20
Show Gist options
  • Save threestory/c8b6db6e67482ee12840 to your computer and use it in GitHub Desktop.
Save threestory/c8b6db6e67482ee12840 to your computer and use it in GitHub Desktop.
Download ZIP
U.S. Youth Suicides - lines and bars
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;
}
#intro {
width: 740px;
line-height: 150%;
}
#area1 {
display: inline-block;
}
#area2 {
display: inline-block;
}
#footer {
clear: both;
width: 760px;
line-height: 150%;
font-size: 12px;
}
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;
fill: none;
}
g.linklight path{
stroke: #ff0000;
opacity: 1;
}
g.highlight path {
stroke: #cfa63e;
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: #BCBCBC;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis path {
opacity: 1;
}
.line:hover, .pathBase:hover {
stroke: black;
opacity: 1;
}
.pathBase {
stroke: #888;
opacity: 0.2;
}
.pathLight {
stroke: black;
opacity: 1;
}
#hoverlabel {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
fill: #333;
font-size: 12px;
text-anchor: start;
}
.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;
}
.linelabel {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
fill: #333;
font-size: 12px;
text-anchor: start;
opacity: 0.5;
}
.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;
}
.labelState {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
fill: #cfa63e;
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;
}
/* Bar specific CSS */
rect:hover {
fill: #2E2E31;
}
.barBase {
fill: #5288BE;
}
.barLight {
fill: #2E2E31;
}
.axisBar text {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
font-size: 11px;
}
.axisBarTitle {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
font-size: 12px;
}
.y.axisBar path,
.y.axisBar line {
opacity: 0;
cursor: auto;
}
.x.axisBar path,
.x.axisBar line {
opacity: 0.2;
cursor: auto;
}
.barlabel {
font-family: "ff-nuvo-sc-web-pro-1","ff-nuvo-sc-web-pro-2", sans-serif;
font-size:11px;
}
</style>
</head>
<body>
<h1>Teen and Young Adult Suicides in the United States</h1>
<div id="intro">
<p>The graph below shows the rate of suicide deaths among 15-24 year-olds in each U.S. state between 1999 and 2013. The figures are per 100,000 population, so a rate of 8.0 would mean that for every 100,000 15-24 year olds in the state, 8 of them died by suicide in that year.
Some regions of interest have been highlighted<!-- (<a href="http://blog.threestory.com">read the related blog post</a>) -->, but you can highlight any line by mousing over it. </p>
</div>
<div id="area1"></div>
<div id="area2"></div>
<script type="text/javascript">
//Dimensions and padding
var w = 760;
var h = 690;
var margin = [ 30, 76, 23, 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([ margin[3], w - margin[1] - margin[3] ]);
var yScale = d3.scale.linear()
.range([ margin[0], h - margin[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");
//Set x position for line labels
var xLabel = w - margin[1] - margin[3];
//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 linechart = d3.select("#area1")
.append("svg")
.attr("width", w)
.attr("height", h);
var dataset; //Global variable
var activeState; //For linked hovering
//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]]
});
}
}
}
//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 = linechart.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("highlight", function(d) {
if (d.state == "California") return true;
else return false;
})
.classed("county", function(d) {
if (d.state == "Santa Clara County") return true;
else return false;
})
.classed("national", function(d) {
if (d.state == "United States") return true;
else return false;
})
.on("mouseover", function(d) {
activeState = d.state;
//Set position for the state label
var xPosition = xLabel + 8;
var yPosition = h/2;
linechart.append("text")
.attr("id", "hoverLabel")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "start")
.attr("font-family", "ff-nuvo-sc-web-pro-1,ff-nuvo-sc-web-pro-2, sans-serif")
.attr("font-size", "14px")
.text( d.state);
d3.selectAll("rect")
.classed("barLight", function(d) {
if (d.state == activeState) return true;
else return false;
});
})
.on("mouseout", function() {
//Remove the state hover label
d3.select("#hoverLabel").remove();
d3.selectAll("rect")
.attr("class", "barBase");
});
//Create label for highlighted region
linechart.append("text")
.attr("x", xLabel + 8)
.attr("y", h/2 - 16)
.attr("font-family", "ff-nuvo-sc-web-pro-1,ff-nuvo-sc-web-pro-2, sans-serif")
.attr("font-size", "11px")
.attr("fill", "#808080")
.text("Highlighted Region");
//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);
//Axes
linechart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - margin[2]) + ")")
.call(xAxis);
linechart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin[3]) + ",0)")
.call(yAxis)
.append("text")
.attr("x", 0 - margin[3])
.attr("y", margin[0] - 10)
.style ("text-anchor", "start")
.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
linechart.append("text")
.attr("transform", "translate(" + xLabel + ", " + yScale(data[50][years[14]]) + ")")
.attr("dy", ".15em")
.attr("dx", ".25em")
.attr("text-anchor", "start")
.attr("class","labelNation")
.text( + data[50][years[14]] + " National Average");
//State label
linechart.append("text")
.attr("transform", "translate(" + xLabel + ", " + yScale(data[4][years[14]]) + ")")
.attr("dy", ".35em")
.attr("dx", ".25em")
.attr("text-anchor", "start")
.attr("class","labelState")
.text( + data[4][years[14]] + " California");
//County label
linechart.append("text")
.attr("transform", "translate(" + xLabel + ", " + yScale(data[51][years[14]]) + ")")
.attr("dy", ".35em")
.attr("dx", ".25em")
.attr("text-anchor", "start")
.attr("class","labelCounty")
.text( + data[51][years[14]] + " Santa Clara County");
////////////////////////////////////
// Bar Chart
////////////////////////////////////
var marginBar = {top: 18, right: 26, bottom: 0, left: 130};
var wBar= 200;
var hBar = 670;
var barchart = d3.select("#area2")
.append("svg")
.attr("width", wBar+ marginBar.right + marginBar.left)
.attr("height", hBar + marginBar.top + marginBar.bottom);
var widthScale = d3.scale.linear()
.range( [ 0, wBar ] );
var heightScale = d3.scale.ordinal()
.rangeRoundBands( [ 0, hBar ], 0.15 );
//Bar chart axis generator
var xAxisBar = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.ticks(5);
var yAxisBar = d3.svg.axis()
.scale(heightScale)
.orient("left");
data.sort(function(a, b) {
return d3.descending(+a[2013] || 0, +b[2013] || 0);
});
widthScale.domain( [ 0, d3.max(data, function(d) {
return +d[2013] || 0;
}) ]);
heightScale.domain(data.map(function(d) { return d.state; } ));
var rects = barchart.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", marginBar.left)
.attr("y", function(d) {
return heightScale(d.state);
})
.attr("width", function(d) {
if (d[2013] === "NA"){
return widthScale(0);
}
else{
return widthScale(d[2013]);
}
})
.attr("height", heightScale.rangeBand())
.attr("class", "barBase")
.append("title")
.text(function(d) {
return d.state + "'s rate of suicide deaths per 100,000 in 2013 was " + d[2013];
});
//add data labels
barchart.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {
return d[2013];
})
.attr("x", function(d) {
if (d[2013] === "NA"){ return marginBar.left; }
else{ return widthScale(d[2013]) + marginBar.left + 3; }
})
.attr("y", function(d) {
return heightScale(d.state) + heightScale.rangeBand() - 3;
})
.attr("class", "barlabel")
.attr("text-anchor", "start")
.style("fill", "#000");
//rollover functionality
barchart.selectAll("rect")
.on("mouseover", function(d) {
activeState = d.state;
linechart.selectAll("g")
.each(function(d) {
if(d){
if ( d.state == activeState ){
// console.log(d3.select(this).select("path"));
d3.select(this).select("path").classed("pathLight", true);
var xPosition = xLabel + 8;
var yPosition = h/2;
linechart.append("text")
.attr("id", "hoverLabel")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "start")
.attr("font-family", "ff-nuvo-sc-web-pro-1,ff-nuvo-sc-web-pro-2, sans-serif")
.attr("font-size", "14px")
.text( activeState);
return true;
}
else{
return false;
}
}
})
})
.on("mouseout", function() {
d3.selectAll("path")
.attr("class", "pathBase");
d3.select("#hoverLabel").remove();
});
//add axes
barchart.append("g")
.attr("class", "x axisBar")
.attr("transform", "translate(" + marginBar.left + "," + (hBar - marginBar.top) + ")")
.call(xAxisBar)
.attr("opacity","0");
barchart.append("g")
.attr("class", "y axisBar")
.attr("transform", "translate(" + marginBar.left + " , 0)")
.call(yAxisBar)
.append("text")
.attr("x", 0 )
.attr("y", marginBar.top )
.style("font-size", "14")
.style("text-anchor", "start")
.text("2013 suicide deaths by state");
});
</script>
<div id="footer"><p>Data from <a href="http://wonder.cdc.gov/">Centers for Disease Control</a>. Includes Underlying Cause of Death “Intentional self-harm” (ICD-10 codes X60-X84).<br />
Data for states with fewer than 10 total suicide deaths in a given year are suppressed.</p>
</div>
</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