xxxxxxxxxx<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="https://d3js.org/d3.v3.js"></script> <script type="text/javascript" src="https://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="https://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="https://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> Modified http://d3js.org/d3.v3.js to a secure url
Modified http://use.typekit.com/brf5jpj.js to a secure url
https://d3js.org/d3.v3.js
https://use.typekit.com/brf5jpj.js