Skip to content

Instantly share code, notes, and snippets.

@barmartland

barmartland/.block

Last active August 11, 2017 11:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save barmartland/bc8e0c6eca0a28e108adcddb3bd25b8e to your computer and use it in GitHub Desktop.
Save barmartland/bc8e0c6eca0a28e108adcddb3bd25b8e to your computer and use it in GitHub Desktop.
Download ZIP
Mental Illness in the US
Raw
.block
license: gpl-3.0
height: 960
Raw
AgeGroup.csv
AgeGroup From2011 To2015 Change
18-25 19 21.7 16.7
26-29 21.5 23.2 7.9
30-34 20.4 23.0 12.7
35-39 20.9 21.0 0.5
40-44 19.0 19.1 0.5
45-49 20.1 18.4 -8.5
50-54 18.6 17.5 -5.9
55-59 17.2 16.3 -5.2
60-64 15.9 15.5 -2.5
65 or Older 11.6 10.6 -8.6
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.yearLine{
stroke-width: 1;
stroke: #bfbfbf;
}
.yearLabel{
fill: #bfbfbf;
}
.line{
stroke-width: 4;
stroke: #e5cd9c;
}
.line:hover{
stroke-width: 8;
stroke: #d8b05d;
}
.text{
fill: #939393;
stroke-width: 1;
font-family: arial;
opacity: 0;
}
.titleText.title{
opacity: 1;
fill: #494949;
font-size: 28px;
}
.titleText.subtitle{
opacity: 1;
fill: #939393;
font-size: 20px;;
}
.titleText.help{
opacity: 1;
fill: #a5a5a5;
font-size: 15px;
}
.text.seeAllText{
opacity: 1;
fill: white;
}
.ageGroupText{
opacity: 0;
}
.ageGroupText.clicked{
opacity: 1;
}
.changeText.clicked{
opacity: 1;
}
.seeAll{
fill: #d6cebe;
}
.changeText{
font-style: italic;
}
.bottomText{
fill: #a5a5a5;
font-size: 15px;
}
</style>
<svg width="750" height="960"><g transform="translate(1,1)"></g></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var format = d3.format(",d");
var min = 999999,
max = -999999,
minStart = 999999,
maxStart = -999999,
minEnd = 999999,
maxEnd = -9999999,
xFactor = 10,
yFactor = 45,
xmargin = 150,
ymargin = 150,
xmarginRight = 150;
d3.csv("AgeGroup.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d){
//Global max/min
if (Math.min(d.From2011, d.To2015) < min ) min = Math.min(d.From2011, d.To2015);
if (Math.max(d.From2011,d.To2015) > max) max = Math.max(d.From2011,d.To2015);
//start max/min
if (d.From2011 < minStart ) minStart = d.From2011;
if (d.From2011 > maxStart ) maxStart = d.From2011;
//end max/min
if (d.To2015 < minEnd ) minEnd = d.To2015;
if (d.To2015 > maxEnd ) maxEnd = d.To2015;
});
var title = svg.select("g")
.append("text")
.attr("x", xmargin/2)
.attr("y", 20)
.attr("class", "titleText title")
.text("Mental Illness in the US");
var subtitle = svg.select("g")
.append("text")
.attr("x", xmargin/2)
.attr("y", 40)
.attr("class", "titleText subtitle")
.text("Percentage of Population Reporting Mental Illness by Age Group");
var help = svg.select("g")
.append("text")
.attr("x", xmargin/2)
.attr("y", 68)
.attr("class", "titleText help");
//.text("")
help.append("tspan")
.attr("x", xmargin/2)
//.attr("dy", "1.2em")
.text("Hover over a line to see the numbers for one age group.");
help.append("tspan")
.attr("x", xmargin/2)
.attr("dy", "1.2em")
.text("Click on a line to keep its numbers, click again to remove them.");
//Start and end year labels
var startYearLabel = svg.select("g")
.append("text")
.text("2011")
.attr("x", xmargin)
.attr("y", ymargin-25)
.attr("text-anchor", "middle")
.attr("class", "yearLabel");
var endYearLabel = svg.select("g")
.append("text")
.text("2015")
.attr("x", width - xmargin- xmarginRight)
.attr("y", ymargin-25)
.attr("text-anchor", "middle")
.attr("class", "yearLabel");
var startYearLine = svg.select("g")
.append("line")
.attr("x1", xmargin)
.attr("x2", xmargin)
.attr("y1", max*yFactor+ymargin - maxStart*yFactor)
.attr("y2", ymargin-25)
.attr("class", "yearLine");
var endYearLine = svg.select("g")
.append("line")
.attr("x1", width - xmargin - xmarginRight)
.attr("x2", width - xmargin - xmarginRight)
.attr("y1", max*yFactor+ymargin - maxEnd*yFactor)
.attr("y2", ymargin-25)
.attr("class", "yearLine");
//Slope graph
var line = svg.select("g")
.selectAll("g")
.data(data)
.enter()
.append("line")
.attr("x1", function(d){return xmargin;})
.attr("x2", function(d){return width - xmargin - xmarginRight;})
.attr("y1", function(d){return max*yFactor+ymargin - d.From2011*yFactor;})
.attr("y2", function(d){return max*yFactor+ymargin - d.To2015*yFactor;})
.attr("class",function(d) { return "line age-" + d.AgeGroup.replace(/ /g,"");});
var ageGroupText = svg.select("g")
.selectAll("g")
.data(data)
.enter()
.append("text")
.attr("text-anchor", "end")
.text(function(d){
if(d.AgeGroup == "26-29")
{
return d.AgeGroup + ": " + d.From2011;
}
else{
return d.AgeGroup;
}
})
.attr("x", function(d){return xmargin - 2;})
.attr("y", function(d){return max*yFactor+ymargin - d.From2011*yFactor;})
.attr("class",function(d) {
if(d.AgeGroup == "26-29")
{
return "text ageGroupText ageGroupText-" + d.AgeGroup.replace(/ /g,"") + " clicked" ;
}
else{
return "text ageGroupText ageGroupText-" + d.AgeGroup.replace(/ /g,"");
}
});
var lineEndText = svg.select("g")
.selectAll("g")
.data(data)
.enter()
.append("text")
.text(function(d){
return d.To2015;
}
)
.attr("x", width - xmargin - xmarginRight + 2)
.attr("y", function(d){return max*yFactor+ymargin - d.To2015*yFactor;})
//.attr("class",function(d) { return "text endText-" + d.AgeGroup.replace(/ /g,"");});
.attr("class",function(d) {
if(d.AgeGroup == "26-29")
{
return "text ageGroupText endText-" + d.AgeGroup.replace(/ /g,"") + " clicked" ;
}
else{
return "text ageGroupText endText-" + d.AgeGroup.replace(/ /g,"");
}
});
var changeText = svg.select("g")
.selectAll("g")
.data(data)
.enter()
.append("text")
.text(function(d){return d.Change + "%";})
.attr("x", xmargin + xmarginRight)
.attr("y",
function(d){
start = max*yFactor+ymargin - d.From2011*yFactor;
end = max*yFactor+ymargin - d.To2015*yFactor;
return start + (end-start)/2 - (5*((end-start)/Math.sqrt((end-start)*(end-start))));
}
)
//.attr("class",function(d) { return "text changeText changeText-" + d.AgeGroup.replace(/ /g,"");})
.attr("class", function(d){
if(d.AgeGroup == "26-29")
{
return "text changeText changeText-" + d.AgeGroup.replace(/ /g,"") + " clicked" ;
}
else{
return "text changeText changeText-" + d.AgeGroup.replace(/ /g,"");
}
})
.attr("text-anchor", "middle");
ageGroupText.on("mouseover",function(d){
relatedStartClass = ".ageGroupText-" + d.AgeGroup.replace(/ /g,"");
relatedEndClass = ".endText-" + d.AgeGroup.replace(/ /g,"");
relatedChangeClass = ".changeText-" + d.AgeGroup.replace(/ /g,"");
d3.select(relatedStartClass).text(d.AgeGroup + ": " + d.From2011);
d3.select(relatedStartClass).style("opacity",1);
d3.select(relatedEndClass).style("opacity",1);
d3.select(relatedChangeClass).style("opacity",1)
});
ageGroupText.on("mouseout",function(d){
if(d3.select(relatedStartClass).attr("class") != "text ageGroupText" + relatedStartClass.replace("."," ") + " clicked" && pushed == 0)
{
relatedStartClass = ".ageGroupText-" + d.AgeGroup.replace(/ /g,"");
relatedChangeClass = ".endText-" + d.AgeGroup.replace(/ /g,"");
relatedChangeClass = ".changeText-" + d.AgeGroup.replace(/ /g,"");
d3.select(relatedStartClass).text(d.AgeGroup) ;
d3.select(relatedStartClass).style("opacity",0);
d3.select(relatedEndClass).style("opacity",0);
d3.select(relatedChangeClass).style("opacity",0);
}
});
line.on("mouseover",function(d){
relatedStartClass = ".ageGroupText-" + d.AgeGroup.replace(/ /g,"");
relatedEndClass = ".endText-" + d.AgeGroup.replace(/ /g,"");
relatedChangeClass = ".changeText-" + d.AgeGroup.replace(/ /g,"");
d3.select(relatedStartClass).text(d.AgeGroup + ": " + d.From2011);
d3.select(relatedStartClass).style("opacity",1);
d3.select(relatedEndClass).style("opacity",1);
d3.select(relatedChangeClass).style("opacity",1);
});
line.on("mouseout",function(d){
if(d3.select(relatedStartClass).attr("class") != "text ageGroupText" + relatedStartClass.replace("."," ") + " clicked" && pushed == 0)
{
relatedStartClass = ".ageGroupText-" + d.AgeGroup.replace(/ /g,"");
relatedChangeClass = ".endText-" + d.AgeGroup.replace(/ /g,"");
relatedChangeClass = ".changeText-" + d.AgeGroup.replace(/ /g,"");
d3.select(relatedStartClass).text(d.AgeGroup) ;
d3.select(relatedStartClass).style("opacity",0);
d3.select(relatedEndClass).style("opacity",0);
d3.select(relatedChangeClass).style("opacity",0);
}
});
line.on("click",function(d){
relatedStartClass = ".ageGroupText-" + d.AgeGroup.replace(/ /g,"");
relatedEndClass = ".endText-" + d.AgeGroup.replace(/ /g,"");
relatedChangeClass = ".changeText-" + d.AgeGroup.replace(/ /g,"");
if(d3.select(relatedStartClass).attr("class") != "text ageGroupText" + relatedStartClass.replace("."," ") + " clicked")
{
d3.select(relatedStartClass).text(d.AgeGroup + ": " + d.From2011);
d3.select(relatedStartClass).attr("class", "text ageGroupText" + relatedStartClass.replace("."," ") + " clicked");
d3.select(relatedEndClass).attr("class", "text endText" + relatedEndClass.replace("."," ") + " clicked");
d3.select(relatedChangeClass).attr("class", "text changeText" + relatedChangeClass.replace("."," ") + " clicked");
}
else
{
d3.select("text " + relatedStartClass + ".clicked").text(d.AgeGroup);
d3.select(relatedStartClass).attr("class", "text ageGroupText" + relatedStartClass.replace("."," "));
d3.select(relatedEndClass).attr("class", "text endText" + relatedEndClass.replace("."," "));
d3.select(relatedChangeClass).attr("class", "text changeText" + relatedChangeClass.replace("."," "));
}
});
//button to hide/show all numbers on slope graph
var seeAllG = svg
.append("g")
.attr("width",200)
.attr("height",50);
var seeAllRect = seeAllG
.append("rect")
.attr("x", width - xmarginRight - 90)
.attr("y",ymargin - 30)
.attr("width",200)
.attr("height",50)
.attr("class", "seeAll");
//.style("fill","red");
var seeAllText = seeAllG
.append("text")
.attr("x",width - xmarginRight - 100 + 110)
.attr("y", ymargin+30 - 30)
.attr("text-anchor", "middle")
.attr("class", "text seeAllText")
.text("Click to show all numbers");
var pushed = 0;
seeAllG.on("click", showHideNumbers);
function showHideNumbers(){
if( pushed == 0)
{
seeAllText.text("Click to hide all numbers");
ageGroupText.text(function(d){return d.AgeGroup + ": " + d.From2011});
d3.selectAll("text").style("opacity",1);
pushed = 1;
}
else
{
d3.selectAll(".text").style("opacity",0);
d3.selectAll(".text.seeAllText").style("opacity",1);
d3.select("ageGroupText").text(function(d){return d.AgeGroup;});
seeAllText.text("Click to show all numbers");
pushed = 0;
}
}
//Sources and twitter tag
var barmartland = svg.select("g")
.append("text")
.attr("x", width - xmargin - xmarginRight)
.attr("y", height-200)
.attr("class", "bottomText twitterTag")
.attr("text-anchor", "end")
.text("@barmartland");
var source = svg.select("g")
.append("text")
.attr("x", xmargin/2)
.attr("y", height-50)
.attr("class", "bottomText source")
.attr("text-anchor", "start");
source.append("tspan")
.attr("x", xmargin/2)
//.attr("dy", "1.2em")
.text("Data source:");
source.append("tspan")
.attr("x", xmargin/2)
.attr("dy", "1.2em")
.text("https://www.samhsa.gov/data/population-data-nsduh/reports?tab=38");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment