Last active
September 27, 2015 09:35
-
-
Save rphaedrus/15cc9d98d0efb53d7389 to your computer and use it in GitHub Desktop.
D30815 Module 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Module 4 Exercise (D30815: Data Visualization and Infographics with D3; August 17-September 27, 2015)</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
<style type="text/css"> | |
/* styles stolen wholesale frmo Module4 samples */ | |
body { | |
background-color: white; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
h1 { | |
font-size: 24px; | |
margin: 0; | |
} | |
p { | |
font-size: 14px; | |
margin: 10px 0 0 0; | |
} | |
svg { | |
background-color: AliceBlue; | |
} | |
rect:hover { | |
fill: orange; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
.y.axis path, | |
.y.axis line { | |
opacity: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Module 4</h1> | |
<h2>Population of Nicollet Island, Minneapolis, MN: 1900 - 1940</h2> | |
<p>Source: US Census Data, 1900, 1910, 1920, 1930, 1940 via the <a href="http://www.ipums.org">Minnesota Population Center</a></p> | |
<script type="text/javascript"> | |
// margin convention stolen from http://bl.ocks.org/mbostock/3019563 | |
var datafile = "married_by_gender.csv", | |
margin = {top: 20, right: 20, bottom: 20, left: 60}, | |
padding = {top: 20, right: 20, bottom: 20, left: 20}, | |
outerWidth = 750, | |
outerHeight = 350, | |
innerWidth = outerWidth - margin.left - margin.right, | |
innerHeight = outerHeight - margin.top - margin.bottom, | |
width = innerWidth - padding.left - padding.right, | |
height = innerHeight - padding.top - padding.bottom; | |
var widthScale = d3.scale.linear() | |
.range([ 0, width ]); | |
var heightScale = d3.scale.ordinal() | |
.rangeRoundBands([ 0, height ], 0.1); | |
var xAxis = d3.svg.axis() | |
.scale(widthScale) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(heightScale) | |
.orient("left"); | |
var svg = d3.select("body").append("svg") | |
.attr("width", outerWidth) | |
.attr("height", outerHeight) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv(datafile, function(error, dataMbG) { | |
if (error) { return console.warn("We had an error: " + error); } | |
// aggregate all the data to a population count by year | |
var years = new Array(); | |
for(var i=0; i < dataMbG.length; i++ ) { | |
var entry = dataMbG[i]; | |
var year = entry.YEAR; | |
// if the year already exist in the years array, add the new year's population to that year | |
// otherwise create a new object and push it onto the years array | |
if (!years.some(function (oYear) { | |
if(oYear.year == year) { | |
oYear.population += +entry.count; | |
// console.log("i: " + i + ", the year " + year + " now has " + oYear.population); | |
return true; // if this doesn't return true, it will just keep adding on entries. | |
} | |
})) { | |
var newObj = { year: year, population: +entry.count } | |
years.push(newObj); | |
// console.log("i: " + i + ",New year for: " + year); | |
} | |
// console.log("Dealing with: " + JSON.stringify(entry,null,4) + " in year " + year); | |
} | |
// put the years in chronological order | |
years.sort(function(a, b) { | |
return d3.ascending(a.year, b.year); | |
}); | |
// console.log(years); | |
// add 5% breathing space to our width so the axis goes on a bit | |
widthScale.domain([ 0, d3.max(years, function(d) { | |
return +d.population; | |
})*1.05 ]); | |
heightScale.domain(years.map(function(d) { return d.year; } )); | |
var rects = svg.selectAll("rect") | |
.data(years) | |
.enter() | |
.append("rect"); | |
// console.log(rects); | |
rects.attr("x", padding[3]) | |
.attr("y", function(d) { | |
return heightScale(d.year); | |
}) | |
.attr("width", function(d) { | |
return widthScale(d.population); | |
}) | |
.attr("height", heightScale.rangeBand()) | |
.attr("fill", "steelblue") | |
.append("title") | |
.text(function(d) { | |
return "The population of Nicollet Island in " + d.year + " was " + d.population; | |
}); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
YEAR | SEX | MARST | count | |
---|---|---|---|---|
1900 | Female | Divorced | 2 | |
1900 | Female | Married | 256 | |
1900 | Female | Single | 155 | |
1900 | Female | Widowed | 61 | |
1900 | Male | Married | 263 | |
1900 | Male | Single | 320 | |
1900 | Male | Widowed | 32 | |
1910 | Female | Divorced | 3 | |
1910 | Female | Married | 256 | |
1910 | Female | Single | 123 | |
1910 | Female | Widowed | 32 | |
1910 | Male | Divorced | 3 | |
1910 | Male | Married | 318 | |
1910 | Male | Single | 658 | |
1910 | Male | Widowed | 30 | |
1920 | Female | Divorced | 9 | |
1920 | Female | Married | 205 | |
1920 | Female | Single | 57 | |
1920 | Female | Widowed | 29 | |
1920 | Male | Divorced | 16 | |
1920 | Male | Married | 241 | |
1920 | Male | Single | 420 | |
1920 | Male | Widowed | 27 | |
1930 | Female | Divorced | 7 | |
1930 | Female | Married | 148 | |
1930 | Female | Single | 35 | |
1930 | Female | Widowed | 18 | |
1930 | Male | Divorced | 12 | |
1930 | Male | Married | 165 | |
1930 | Male | Single | 372 | |
1930 | Male | Widowed | 36 | |
1940 | Female | Divorced | 10 | |
1940 | Female | Married | 147 | |
1940 | Female | Single | 23 | |
1940 | Female | Widowed | 33 | |
1940 | Male | Divorced | 17 | |
1940 | Male | Married | 160 | |
1940 | Male | Single | 512 | |
1940 | Male | Widowed | 14 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment