Skip to content

Instantly share code, notes, and snippets.

@threestory
Created April 22, 2015 18:09
Show Gist options
  • Save threestory/ebe8f881ef0933105850 to your computer and use it in GitHub Desktop.
Save threestory/ebe8f881ef0933105850 to your computer and use it in GitHub Desktop.
Suicides by State, 2013 - Scatterplot Racial Comparison
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>U.S. Youth Suicide Deaths by Race, 2013 </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 {
font-weight: normal;
color: #fff;
}
p {
color: #ddd;
}
svg {
background-color: white;
}
circle:hover {
fill: #990011;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: Arial,sans-serif;
font-size: 10px;
}
.plotlabel {
font-size:7px;
fill: #444;
}
.hide {
opacity:0;
}
</style>
</head>
<body>
<h2>U.S. Suicide Deaths per 100,000 people by State for 15-24 year olds and Native American or Alaska Native as Percentage of Population, 2013</h2>
<p>Click here to see data for Black or African American 15-24 year olds, 2013</p>
<script type="text/javascript">
var margin = {top: 20, right: 30, bottom: 20, left: 60};
// 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 xScale = d3.scale.linear()
.range( [ margin.left, w - margin.right ] );
var yScale = d3.scale.linear()
.range( [ margin.bottom, h - margin.top ] );
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var formatter = d3.format(".1%");
var yAxis = d3.svg.axis()
.scale(yScale)
.tickFormat(formatter)
.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, +b.rate_per_100k_15_24);
});
xScale.domain( [ 0, d3.max(data, function(d) {
return +d.rate_per_100k_15_24;
}) ]);
yScale.domain( [ d3.max(data, function(d) {
return +d.ptg_native_15_24;
}), 0 ]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(+d.rate_per_100k_15_24);
})
.attr("cy", function(d) {
return yScale(+d.ptg_native_15_24);
})
.attr("r", function(d) {
if (d.rate_per_100k_15_24 === "NA"){
return 0;
}
else{
return 6;
}
})
.attr("fill", "#5288BE")
.append("title")
.text(function(d) {
return d.state + ": " + d.rate_per_100k_15_24 + " deaths per 100k, " + formatter(d.ptg_native_15_24) + " percent Native American";
});
//add data labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d.state;
})
.attr("x", function(d) {
return xScale(d.rate_per_100k_15_24);
})
.attr("y", function(d) {
return yScale(d.ptg_native_15_24) - 8;
})
.attr("class", function(d) {
if (d.rate_per_100k_15_24 === "NA"){
return "hide";
}
else{ return "plotlabel";
}
})
.attr("text-anchor", "middle");
//add axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h-margin.top) + ")")
.call(xAxis)
.append("text")
.attr("x", w - margin.right)
.attr("y", -8)
.style("text-anchor", "end")
.text("Number of suicide deaths per 100,000");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.left + " , 0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -margin.top)
.attr("y", 14)
.style("text-anchor", "end")
.text("% American Indian or Alaska Native");
d3.select("p")
.on("click", function() {
//rescale y-axis
yScale.domain( [ d3.max(data, function(d) {
return +d.ptg_black_15_24;
}), 0 ]);
//update circles
svg.selectAll("circle")
.data(dataset)
.transition()
.delay(function(d, i) {
return i * 20;
})
.duration(1000)
.attr("cy", function(d) {
return yScale(+d.ptg_black_15_24);
})
.attr("fill", "#DD8811")
.select("title")
.text(function(d) {
return d.state + ": " + d.rate_per_100k_15_24 + " deaths per 100k, " + formatter(d.ptg_black_15_24) + " percent Black or African American";
});
//update data labels
svg.selectAll("text")
.data(dataset)
.transition()
.delay(function(d, i) {
return i * 20;
})
.duration(1000)
.text(function(d) {
return d.state;
})
.attr("x", function(d) {
return xScale(+d.rate_per_100k_15_24);
})
.attr("y", function(d) {
return yScale(d.ptg_black_15_24) - 8;
})
.attr("class", function(d) {
if (d.rate_per_100k_15_24 === "NA"){
return "hide";
}
else{ return "plotlabel";
}
})
.attr("text-anchor", "middle");
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
svg.select("g.y.axis.text")
.attr("transform", "rotate(-90)")
.attr("x", -margin.top)
.attr("y", 14)
.style("text-anchor", "end")
.text("% Black or African American");
console.log(data);
});
});
</script>
<p>Note: Data for states with death totals under 10 have been suppressed.</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 ptg_native_15_24 ptg_asian_15_24 ptg_black_15_24 ptg_white_15_24 ptg_native_25_34 ptg_asian_25_34 ptg_black_25_34 ptg_white_25_34
Alabama 2013 79 676183 11.7 109 620984 17.6 0.008071779 0.015615595 0.324518658 0.651793967 0.008737745 0.020881375 0.294870721 0.675510158
Alaska 2013 43 112581 38.2 48 114828 41.8 0.192341514 0.081736705 0.068723852 0.657197929 0.157000035 0.077219842 0.053436444 0.712343679
Arizona 2013 130 935527 13.9 168 881828 19.1 0.074521633 0.03979682 0.067400513 0.818281033 0.065721433 0.049449553 0.061404265 0.823424749
Arkansas 2013 68 406865 16.7 80 384032 20.8 0.012584027 0.020972558 0.198139432 0.768303983 0.011959941 0.027508124 0.175068744 0.785463191
California 2013 455 5586402 8.1 572 5591286 10.2 0.024301688 0.140948503 0.083983573 0.750766236 0.021981169 0.166361549 0.073093381 0.738563901
Colorado 2013 131 714353 18.3 159 779686 20.4 0.024090331 0.038546769 0.06401597 0.873346931 0.020531342 0.042647938 0.053867839 0.882952881
Connecticut 2013 26 490184 5.3 42 439593 9.6 0.00813572 0.045419679 0.155792519 0.790652082 0.008014231 0.070526601 0.143694281 0.777764887
Delaware 2013 14 125449 11.2 18 120019 15 0.00798731 0.038406045 0.285040136 0.668566509 0.008748615 0.058932336 0.237229105 0.695089944
District of Columbia 2013 NA 96372 NA NA 145884 NA 0.006381522 0.047908106 0.523533806 0.422176566 0.007135807 0.063495654 0.322975789 0.60639275
Florida 2013 237 2484554 9.5 345 2456199 14 0.006781901 0.032847344 0.22995113 0.730419625 0.006844722 0.03912183 0.203007167 0.751026281
Georgia 2013 150 1429441 10.5 204 1365240 14.9 0.006270983 0.039240514 0.371913916 0.582574587 0.006787818 0.049320266 0.338412294 0.605479623
Hawaii 2013 30 185103 16.2 29 205722 14.1 0.007314846 0.624122786 0.048562152 0.320000216 0.006727525 0.572364647 0.049153712 0.371754115
Idaho 2013 46 225655 20.4 49 212296 23.1 0.023730917 0.019857747 0.017934457 0.938476878 0.021634887 0.023990089 0.012718092 0.941656932
Illinois 2013 162 1783044 9.1 205 1784842 11.5 0.008513531 0.052057044 0.189712649 0.749716776 0.00773794 0.070077351 0.149167825 0.773016883
Indiana 2013 117 936934 12.5 165 842583 19.6 0.005367507 0.027755424 0.123048155 0.843828914 0.005377512 0.029801218 0.110684645 0.854136625
Iowa 2013 62 439247 14.1 75 390593 19.2 0.00737626 0.032332606 0.05717512 0.903116014 0.006011372 0.034957104 0.045881519 0.913150005
Kansas 2013 55 418659 13.1 64 387397 16.5 0.019194619 0.035152714 0.091121892 0.854530776 0.015862281 0.041068981 0.077437358 0.865631381
Kentucky 2013 85 596295 14.3 112 564035 19.9 0.003318827 0.017058671 0.11376416 0.865858342 0.003372131 0.02053596 0.09365199 0.88243992
Louisiana 2013 72 655370 11 95 662144 14.3 0.009322978 0.020643301 0.38993393 0.580099791 0.008972369 0.02466533 0.339728216 0.626634086
Maine 2013 26 162069 16 30 150570 19.9 0.010477019 0.019028932 0.028833398 0.941660651 0.010075048 0.017280999 0.019153882 0.953490071
Maryland 2013 79 793135 10 93 817751 11.4 0.0072018 0.061074092 0.353585455 0.578138652 0.008321604 0.078810053 0.317327646 0.595540696
Massachusetts 2013 78 940792 8.3 94 912797 10.3 0.007032373 0.072564393 0.11038678 0.810016454 0.006894194 0.092514546 0.096976655 0.803614604
Michigan 2013 179 1411323 12.7 189 1186081 15.9 0.011069047 0.03468306 0.186524275 0.767723618 0.009562585 0.040221536 0.157529713 0.792686166
Minnesota 2013 89 719934 12.4 117 742560 15.8 0.019862932 0.064639259 0.086228738 0.829269072 0.016583172 0.06891699 0.074540778 0.839959061
Mississippi 2013 46 436251 10.5 58 390084 14.9 0.006883652 0.013038366 0.438790971 0.541287011 0.007467622 0.014812194 0.407981358 0.569738825
Missouri 2013 109 832215 13.1 147 796990 18.4 0.008052006 0.026196356 0.157039948 0.808711691 0.00714689 0.029991593 0.130915068 0.831946449
Montana 2013 39 137992 28.3 42 127391 33 0.089947243 0.015689315 0.016370514 0.877992927 0.080774937 0.012151565 0.011335181 0.895738317
Nebraska 2013 29 262565 11 34 253050 13.4 0.018387828 0.028339649 0.070649173 0.88262335 0.016226042 0.035143252 0.060683659 0.887947046
Nevada 2013 44 366277 12 95 397182 23.9 0.023397593 0.093418369 0.127040464 0.756143574 0.0211213 0.104536459 0.105974087 0.768368154
New Hampshire 2013 19 178801 10.6 25 151566 16.5 0.004888116 0.028260468 0.026084865 0.940766551 0.004229181 0.038293549 0.021581357 0.935895913
New Jersey 2013 86 1147625 7.5 105 1140291 9.2 0.008570744 0.086112624 0.189862542 0.71545409 0.009550194 0.125709139 0.166403137 0.69833753
New Mexico 2013 54 293660 18.4 71 278232 25.5 0.132997344 0.020149152 0.03928012 0.807573384 0.1251833 0.026140056 0.033856638 0.814820006
New York 2013 169 2720463 6.2 263 2803717 9.4 0.013669732 0.086791109 0.214700953 0.684838206 0.013206397 0.108950368 0.18715548 0.690687755
North Carolina 2013 132 1363129 9.7 182 1274545 14.3 0.019110444 0.029322977 0.270025801 0.681540779 0.018394015 0.041002868 0.234125904 0.706477213
North Dakota 2013 36 118420 30.4 26 103916 25 0.066188144 0.021187299 0.034183415 0.878441142 0.059730937 0.024192617 0.029802918 0.886273529
Ohio 2013 166 1573297 10.6 248 1452141 17.1 0.00411429 0.022515139 0.166606178 0.806764393 0.003865327 0.031996204 0.140585522 0.823552947
Oklahoma 2013 80 545392 14.7 121 527072 23 0.127667806 0.030013275 0.111589462 0.730729457 0.108093391 0.029671468 0.092742548 0.769492593
Oregon 2013 85 514457 16.5 96 535780 17.9 0.02851939 0.062349234 0.036158513 0.872972863 0.023658965 0.061510321 0.029159356 0.885671358
Pennsylvania 2013 208 1726198 12 235 1611833 14.6 0.004941496 0.037708884 0.158876908 0.798472713 0.00492855 0.04875381 0.134971799 0.81134584
Rhode Island 2013 NA 156875 NA 22 135303 16.3 0.012615139 0.050001594 0.107352988 0.830030279 0.012069208 0.060841223 0.099798231 0.827291339
South Carolina 2013 83 666672 12.4 104 614216 16.9 0.006619447 0.019052848 0.336094811 0.638232894 0.006891712 0.022412311 0.298831356 0.671864621
South Dakota 2013 35 118268 29.6 20 111514 17.9 0.123406162 0.019853215 0.032071228 0.824669395 0.104004878 0.018715139 0.029063615 0.848216367
Tennessee 2013 108 881079 12.3 146 846372 17.3 0.005169797 0.019330843 0.222160555 0.753338804 0.005413695 0.025798349 0.192389399 0.776398558
Texas 2013 421 3855325 10.9 549 3831647 14.3 0.013237794 0.043528885 0.144342176 0.798891144 0.012128727 0.056916256 0.13360547 0.797349547
Utah 2013 85 469436 18.1 122 440736 27.7 0.019819528 0.041694715 0.021159434 0.917326324 0.017686325 0.044012742 0.016572279 0.921728654
Vermont 2013 13 89876 14.5 NA 71906 NA 0.005574347 0.025824469 0.026035872 0.942565312 0.005423748 0.021528106 0.01958112 0.953467026
Virginia 2013 128 1138703 11.2 172 1160793 14.8 0.007678034 0.062990086 0.240874925 0.688456955 0.007261415 0.081887985 0.208869282 0.701981318
Washington 2013 126 933416 13.5 173 995914 17.4 0.028588539 0.100427891 0.064900323 0.806083247 0.023691805 0.113837139 0.0558492 0.806621857
West Virginia 2013 21 237594 8.8 47 219405 21.4 0.002504272 0.011906866 0.056865914 0.928722948 0.002857729 0.01329049 0.047988879 0.935862902
Wisconsin 2013 101 784037 12.9 144 732214 19.7 0.015318155 0.039362938 0.096918895 0.848400012 0.014275881 0.041952216 0.081507592 0.862264311
Wyoming 2013 22 80908 27.2 17 81827 20.8 0.035942058 0.014695704 0.033568992 0.915793247 0.030173415 0.017475894 0.021948746 0.930401946
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment