Skip to content

Instantly share code, notes, and snippets.

@michaeljblum

michaeljblum/.block

Last active April 15, 2018 23:35
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 michaeljblum/8792cb8683cdffda08c7ddd36e21aa4d to your computer and use it in GitHub Desktop.
Save michaeljblum/8792cb8683cdffda08c7ddd36e21aa4d to your computer and use it in GitHub Desktop.
Download ZIP
2010 U.S. Population By Age
Raw
.block
height: 700
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>D3 Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="titling">
<h2>2010 U.S. Population By Age</h2>
<h3><span id="total">Total</span> • <span id="male">Male</span> • <span id="female">Female</span></h3>
</div>
<div id="screenspace"></div>
<div id="tooltipTotal" class="hidden">
<p>Age: <span id="age"></span></p>
<p>Total Population: <span id="pop"></span></p>
</div>
<div id="tooltipMale" class="hidden">
<p>Age: <span id="age"></span></p>
<p>Male Population: <span id="malepop"></span></p>
</div>
<div id="tooltipFemale" class="hidden">
<p>Age: <span id="age"></span></p>
<p>Female Population: <span id="femalepop"></span></p>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="populations.js"></script>
</body>
</html>
Raw
populations.js
var h = 700,
w = 960;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("class", "canvas");
d3.json("populations.json", function(data){
console.table(data, ["age", "total", "males", "females"]);
xScale = d3.scaleLinear()
.domain([
d3.min(data, function(d){ return d.age}),
d3.max(data, function(d){ return d.age})
])
.range([10, (w-25)]);
yScale = d3.scaleLinear()
.domain([
d3.min(data, function(d){ return d.total}),
d3.max(data, function(d){ return d.total})
])
.range([(h-10), 10])
var line = d3.line()
.x(function(d){ return xScale(d.age); })
.y(function(d){ return yScale(d.total); });
var lineMales = d3.line()
.x(function(d){ return xScale(d.age); })
.y(function(d){ return yScale(d.males); });
var lineFemales = d3.line()
.x(function(d){ return xScale(d.age); })
.y(function(d){ return yScale(d.females); });
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("path")
.datum(data)
.attr("class", "lineMales")
.attr("d", lineMales);
svg.append("path")
.datum(data)
.attr("class", "lineFemales")
.attr("d", lineFemales);
svg.selectAll("total.circle")
.data(data)
.enter()
.append("circle")
.attr("fill", "rgb(255,255,191)")
.attr("cx", function(d){
return xScale(d.age);
})
.attr("cy", function(d){
return yScale(d.total);
// return yScale(d.females);
// return yScale(d.males);
})
.attr("r", 3)
.attr("class", "circle")
.on("mouseover", function(d){
d3.select(this)
.attr("fill", "blue");
d3.select("#tooltipTotal")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 70) + "px")
.select("#age")
.text(d.age);
d3.select("#tooltipTotal")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 70) + "px")
.select("#pop")
.text(d.total);
d3.select("#tooltipTotal").classed("hidden", false);
})
.on("mouseout", function(){
d3.select(this)
.attr("fill", "rgb(255,255,191)")
d3.select("#tooltipTotal").classed("hidden", true);
});
svg.selectAll("male.circle")
.data(data)
.enter()
.append("circle")
.attr("fill","rgb(255,255,191)")
.attr("cx", function(d){
return xScale(d.age);
})
.attr("cy", function(d){
return yScale(d.males);
})
.attr("r", 2.5)
.attr("class", "circle")
.on("mouseover", function(d){
d3.select(this)
.attr("fill", "blue");
d3.select("#tooltipMale")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 70) + "px")
.select("#age")
.text(d.age);
d3.select("#tooltipMale")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 70) + "px")
.select("#malepop")
.text(d.males);
d3.select("#tooltipMale").classed("hidden", false);
})
.on("mouseout", function(){
d3.select(this)
.attr("fill", "rgb(255,255,191)")
d3.select("#tooltipMale").classed("hidden", true);
});
svg.selectAll("female.circle")
.data(data)
.enter()
.append("circle")
.attr("fill","rgb(255,255,191)")
.attr("cx", function(d){
return xScale(d.age);
})
.attr("cy", function(d){
return yScale(d.females);
})
.attr("r", 2.5)
.attr("class", "circle")
.on("mouseover", function(d){
d3.select(this)
.attr("fill", "blue");
d3.select("#tooltipFemale")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 70) + "px")
.select("#age")
.text(d.age);
d3.select("#tooltipFemale")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 70) + "px")
.select("#femalepop")
.text(d.females);
d3.select("#tooltipFemale").classed("hidden", false);
})
.on("mouseout", function(){
d3.select(this)
.attr("fill", "rgb(255,255,191)")
d3.select("#tooltipFemale").classed("hidden", true);
});
var leftAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("class", "y-axis")
.attr("transform","translate("+ w/2 +",0)")
.call(leftAxis);
var xAxis = d3.axisTop(xScale);
svg.append("g")
.attr("class", "x-axis")
.attr("transform","translate(5, " + h/2 + ")")
.call(xAxis)
});
Raw
populations.json
[
{
"females": 1966000,
"country": "United States",
"age": 0,
"males": 2054000,
"year": 2010,
"total": 4019000
},
{
"females": 1973000,
"country": "United States",
"age": 1,
"males": 2056000,
"year": 2010,
"total": 4030000
},
{
"females": 1979000,
"country": "United States",
"age": 2,
"males": 2059000,
"year": 2010,
"total": 4038000
},
{
"females": 1983000,
"country": "United States",
"age": 3,
"males": 2061000,
"year": 2010,
"total": 4043000
},
{
"females": 1985000,
"country": "United States",
"age": 4,
"males": 2063000,
"year": 2010,
"total": 4048000
},
{
"females": 1987000,
"country": "United States",
"age": 5,
"males": 2066000,
"year": 2010,
"total": 4052000
},
{
"females": 1988000,
"country": "United States",
"age": 6,
"males": 2069000,
"year": 2010,
"total": 4057000
},
{
"females": 1989000,
"country": "United States",
"age": 7,
"males": 2073000,
"year": 2010,
"total": 4062000
},
{
"females": 1991000,
"country": "United States",
"age": 8,
"males": 2079000,
"year": 2010,
"total": 4070000
},
{
"females": 1994000,
"country": "United States",
"age": 9,
"males": 2086000,
"year": 2010,
"total": 4081000
},
{
"females": 1997000,
"country": "United States",
"age": 10,
"males": 2094000,
"year": 2010,
"total": 4091000
},
{
"females": 1997000,
"country": "United States",
"age": 11,
"males": 2099000,
"year": 2010,
"total": 4097000
},
{
"females": 2006000,
"country": "United States",
"age": 12,
"males": 2114000,
"year": 2010,
"total": 4120000
},
{
"females": 2028000,
"country": "United States",
"age": 13,
"males": 2142000,
"year": 2010,
"total": 4170000
},
{
"females": 2057000,
"country": "United States",
"age": 14,
"males": 2177000,
"year": 2010,
"total": 4234000
},
{
"females": 2084000,
"country": "United States",
"age": 15,
"males": 2211000,
"year": 2010,
"total": 4295000
},
{
"females": 2113000,
"country": "United States",
"age": 16,
"males": 2245000,
"year": 2010,
"total": 4358000
},
{
"females": 2132000,
"country": "United States",
"age": 17,
"males": 2267000,
"year": 2010,
"total": 4398000
},
{
"females": 2134000,
"country": "United States",
"age": 18,
"males": 2269000,
"year": 2010,
"total": 4403000
},
{
"females": 2126000,
"country": "United States",
"age": 19,
"males": 2258000,
"year": 2010,
"total": 4384000
},
{
"females": 2119000,
"country": "United States",
"age": 20,
"males": 2247000,
"year": 2010,
"total": 4366000
},
{
"females": 2109000,
"country": "United States",
"age": 21,
"males": 2234000,
"year": 2010,
"total": 4343000
},
{
"females": 2103000,
"country": "United States",
"age": 22,
"males": 2220000,
"year": 2010,
"total": 4323000
},
{
"females": 2103000,
"country": "United States",
"age": 23,
"males": 2208000,
"year": 2010,
"total": 4310000
},
{
"females": 2106000,
"country": "United States",
"age": 24,
"males": 2196000,
"year": 2010,
"total": 4302000
},
{
"females": 2107000,
"country": "United States",
"age": 25,
"males": 2183000,
"year": 2010,
"total": 4290000
},
{
"females": 2109000,
"country": "United States",
"age": 26,
"males": 2168000,
"year": 2010,
"total": 4277000
},
{
"females": 2103000,
"country": "United States",
"age": 27,
"males": 2151000,
"year": 2010,
"total": 4254000
},
{
"females": 2085000,
"country": "United States",
"age": 28,
"males": 2129000,
"year": 2010,
"total": 4214000
},
{
"females": 2060000,
"country": "United States",
"age": 29,
"males": 2105000,
"year": 2010,
"total": 4165000
},
{
"females": 2037000,
"country": "United States",
"age": 30,
"males": 2083000,
"year": 2010,
"total": 4120000
},
{
"females": 2014000,
"country": "United States",
"age": 31,
"males": 2062000,
"year": 2010,
"total": 4076000
},
{
"females": 1998000,
"country": "United States",
"age": 32,
"males": 2045000,
"year": 2010,
"total": 4043000
},
{
"females": 1994000,
"country": "United States",
"age": 33,
"males": 2034000,
"year": 2010,
"total": 4028000
},
{
"females": 1999000,
"country": "United States",
"age": 34,
"males": 2029000,
"year": 2010,
"total": 4028000
},
{
"females": 2004000,
"country": "United States",
"age": 35,
"males": 2025000,
"year": 2010,
"total": 4029000
},
{
"females": 2012000,
"country": "United States",
"age": 36,
"males": 2023000,
"year": 2010,
"total": 4035000
},
{
"females": 2022000,
"country": "United States",
"age": 37,
"males": 2028000,
"year": 2010,
"total": 4050000
},
{
"females": 2031000,
"country": "United States",
"age": 38,
"males": 2044000,
"year": 2010,
"total": 4075000
},
{
"females": 2042000,
"country": "United States",
"age": 39,
"males": 2068000,
"year": 2010,
"total": 4110000
},
{
"females": 2055000,
"country": "United States",
"age": 40,
"males": 2091000,
"year": 2010,
"total": 4146000
},
{
"females": 2066000,
"country": "United States",
"age": 41,
"males": 2114000,
"year": 2010,
"total": 4180000
},
{
"females": 2088000,
"country": "United States",
"age": 42,
"males": 2142000,
"year": 2010,
"total": 4230000
},
{
"females": 2128000,
"country": "United States",
"age": 43,
"males": 2175000,
"year": 2010,
"total": 4303000
},
{
"females": 2177000,
"country": "United States",
"age": 44,
"males": 2209000,
"year": 2010,
"total": 4386000
},
{
"females": 2223000,
"country": "United States",
"age": 45,
"males": 2241000,
"year": 2010,
"total": 4464000
},
{
"females": 2267000,
"country": "United States",
"age": 46,
"males": 2270000,
"year": 2010,
"total": 4537000
},
{
"females": 2298000,
"country": "United States",
"age": 47,
"males": 2290000,
"year": 2010,
"total": 4588000
},
{
"females": 2310000,
"country": "United States",
"age": 48,
"males": 2296000,
"year": 2010,
"total": 4606000
},
{
"females": 2306000,
"country": "United States",
"age": 49,
"males": 2291000,
"year": 2010,
"total": 4596000
},
{
"females": 2299000,
"country": "United States",
"age": 50,
"males": 2281000,
"year": 2010,
"total": 4581000
},
{
"females": 2290000,
"country": "United States",
"age": 51,
"males": 2269000,
"year": 2010,
"total": 4558000
},
{
"females": 2269000,
"country": "United States",
"age": 52,
"males": 2242000,
"year": 2010,
"total": 4510000
},
{
"females": 2234000,
"country": "United States",
"age": 53,
"males": 2196000,
"year": 2010,
"total": 4430000
},
{
"females": 2189000,
"country": "United States",
"age": 54,
"males": 2137000,
"year": 2010,
"total": 4326000
},
{
"females": 2139000,
"country": "United States",
"age": 55,
"males": 2074000,
"year": 2010,
"total": 4213000
},
{
"females": 2081000,
"country": "United States",
"age": 56,
"males": 2004000,
"year": 2010,
"total": 4085000
},
{
"females": 2026000,
"country": "United States",
"age": 57,
"males": 1936000,
"year": 2010,
"total": 3961000
},
{
"females": 1977000,
"country": "United States",
"age": 58,
"males": 1875000,
"year": 2010,
"total": 3852000
},
{
"females": 1931000,
"country": "United States",
"age": 59,
"males": 1818000,
"year": 2010,
"total": 3749000
},
{
"females": 1880000,
"country": "United States",
"age": 60,
"males": 1757000,
"year": 2010,
"total": 3638000
},
{
"females": 1829000,
"country": "United States",
"age": 61,
"males": 1696000,
"year": 2010,
"total": 3525000
},
{
"females": 1764000,
"country": "United States",
"age": 62,
"males": 1623000,
"year": 2010,
"total": 3386000
},
{
"females": 1678000,
"country": "United States",
"age": 63,
"males": 1530000,
"year": 2010,
"total": 3208000
},
{
"females": 1580000,
"country": "United States",
"age": 64,
"males": 1426000,
"year": 2010,
"total": 3006000
},
{
"females": 1484000,
"country": "United States",
"age": 65,
"males": 1324000,
"year": 2010,
"total": 2808000
},
{
"females": 1387000,
"country": "United States",
"age": 66,
"males": 1221000,
"year": 2010,
"total": 2608000
},
{
"females": 1300000,
"country": "United States",
"age": 67,
"males": 1133000,
"year": 2010,
"total": 2433000
},
{
"females": 1229000,
"country": "United States",
"age": 68,
"males": 1070000,
"year": 2010,
"total": 2299000
},
{
"females": 1170000,
"country": "United States",
"age": 69,
"males": 1023000,
"year": 2010,
"total": 2193000
},
{
"females": 1111000,
"country": "United States",
"age": 70,
"males": 975000,
"year": 2010,
"total": 2086000
},
{
"females": 1054000,
"country": "United States",
"age": 71,
"males": 930000,
"year": 2010,
"total": 1984000
},
{
"females": 1003000,
"country": "United States",
"age": 72,
"males": 884000,
"year": 2010,
"total": 1887000
},
{
"females": 958000,
"country": "United States",
"age": 73,
"males": 832000,
"year": 2010,
"total": 1790000
},
{
"females": 919000,
"country": "United States",
"age": 74,
"males": 777000,
"year": 2010,
"total": 1696000
},
{
"females": 882000,
"country": "United States",
"age": 75,
"males": 726000,
"year": 2010,
"total": 1607000
},
{
"females": 846000,
"country": "United States",
"age": 76,
"males": 675000,
"year": 2010,
"total": 1521000
},
{
"females": 816000,
"country": "United States",
"age": 77,
"males": 632000,
"year": 2010,
"total": 1447000
},
{
"females": 793000,
"country": "United States",
"age": 78,
"males": 596000,
"year": 2010,
"total": 1389000
},
{
"females": 774000,
"country": "United States",
"age": 79,
"males": 567000,
"year": 2010,
"total": 1340000
},
{
"females": 755000,
"country": "United States",
"age": 80,
"males": 537000,
"year": 2010,
"total": 1292000
},
{
"females": 737000,
"country": "United States",
"age": 81,
"males": 510000,
"year": 2010,
"total": 1247000
},
{
"females": 710000,
"country": "United States",
"age": 82,
"males": 477000,
"year": 2010,
"total": 1186000
},
{
"females": 666000,
"country": "United States",
"age": 83,
"males": 433000,
"year": 2010,
"total": 1099000
},
{
"females": 611000,
"country": "United States",
"age": 84,
"males": 383000,
"year": 2010,
"total": 994000
},
{
"females": 557000,
"country": "United States",
"age": 85,
"males": 336000,
"year": 2010,
"total": 893000
},
{
"females": 504000,
"country": "United States",
"age": 86,
"males": 290000,
"year": 2010,
"total": 794000
},
{
"females": 451000,
"country": "United States",
"age": 87,
"males": 246000,
"year": 2010,
"total": 697000
},
{
"females": 398000,
"country": "United States",
"age": 88,
"males": 208000,
"year": 2010,
"total": 606000
},
{
"females": 347000,
"country": "United States",
"age": 89,
"males": 173000,
"year": 2010,
"total": 521000
},
{
"females": 297000,
"country": "United States",
"age": 90,
"males": 140000,
"year": 2010,
"total": 437000
},
{
"females": 247000,
"country": "United States",
"age": 91,
"males": 108000,
"year": 2010,
"total": 355000
},
{
"females": 202000,
"country": "United States",
"age": 92,
"males": 81100,
"year": 2010,
"total": 283000
},
{
"females": 164000,
"country": "United States",
"age": 93,
"males": 61000,
"year": 2010,
"total": 225000
},
{
"females": 131000,
"country": "United States",
"age": 94,
"males": 46300,
"year": 2010,
"total": 178000
},
{
"females": 101000,
"country": "United States",
"age": 95,
"males": 33400,
"year": 2010,
"total": 134000
},
{
"females": 72700,
"country": "United States",
"age": 96,
"males": 22700,
"year": 2010,
"total": 95400
},
{
"females": 50300,
"country": "United States",
"age": 97,
"males": 14500,
"year": 2010,
"total": 64800
},
{
"females": 35000,
"country": "United States",
"age": 98,
"males": 8730,
"year": 2010,
"total": 43700
},
{
"females": 25200,
"country": "United States",
"age": 99,
"males": 4920,
"year": 2010,
"total": 30100
},
{
"females": 51200,
"country": "United States",
"age": 100,
"males": 9570,
"year": 2010,
"total": 60800
}
]
Raw
style.css
.canvas {
background-image: linear-gradient(to left, lightgreen, lightblue);
}
.line {
fill: none;
stroke: rgb(253,174,97);
stroke-width: 4;
}
.lineMales {
fill: none;
stroke: rgb(43,131,186);
stroke-width: 4;
}
.lineFemales {
fill: none;
stroke: rgb(244,109,67);
stroke-width: 4;
}
.y-axis text {
fill: red;
font-weight: bold;
}
.y-axis path {
stroke: blue;
}
.y-axis line {
stroke: blue;
}
.x-axis text {
fill: blue;
font-weight: bold;
}
.x-axis path {
stroke: red;
}
.x-axis line {
stroke: red;
}
/* .circle {
fill: red;
} */
#tooltipTotal {
position: absolute;
width: 150px;
height: auto;
padding: 10px;
background-color: rgb(255,255,235);
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
pointer-events: none;
}
#tooltipTotal.hidden {
display: none;
}
#tooltipTotal p {
margin: 0;
font-family: sans-serif;
font-size: 12px;
line-height: 20px;
font-weight: bold;
}
#tooltipMale {
position: absolute;
width: 150px;
height: auto;
padding: 10px;
background-color: rgb(255,255,235);
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
pointer-events: none;
}
#tooltipMale.hidden {
display: none;
}
#tooltipMale p {
margin: 0;
font-family: sans-serif;
font-size: 12px;
line-height: 20px;
font-weight: bold;
}
#tooltipFemale {
position: absolute;
width: 170px;
height: auto;
padding: 10px;
background-color: rgb(255,255,235);
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
pointer-events: none;
}
#tooltipFemale.hidden {
display: none;
}
#tooltipFemale p {
margin: 0;
font-family: sans-serif;
font-size: 12px;
line-height: 20px;
font-weight: bold;
}
.titling {
left: 620px;
text-align: right;
position: absolute;
font-family: sans-serif;
color: blue;
}
#total {
color: rgb(253,174,97);
}
#female{
color: rgb(244,109,67);
}
#male{
color: rgb(43,131,186);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment