rphaedrus/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Module 5 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: 16px;
				margin: 0;
			}

			p {
				font-size: 14px;
				margin: 0 0 0 0;
			}

			svg {
				background-color: AliceBlue;
			}

			circle:hover {
				fill: orange;
			}

			.lblCensus {
				font-size: 10px;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

		</style>

	</head>
	<body>
		<h1>Module 5: Population of Nicollet Island, Minneapolis, MN: 1900 - 1940</h1>

		<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: 10, bottom: 50, left: 60},
			    padding = {top: 20, right: 20, bottom: 20, left: 20},
			    outerWidth = 480,
			    outerHeight = 480,
			    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.linear()
								.range([ height, 0 ]);

			// 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 Marriage by Gender data to a population count by year & gender
				var aggYbG = new Array();

				// process the data so that its ready to feed to d3
				for(var i=0; i < dataMbG.length; i++ ) {
					var entry = dataMbG[i];
					var year = entry.YEAR;
					var gender = entry.SEX

					// if the year & gender already exist in the aggYbG array, add the new year's population
					// to the right gender otherwise create a new object and push it onto the aggYbG array
					if (!aggYbG.some(function (oYbG) {
						if( oYbG.year == year ) {
							if( gender == "Male" ) {
								oYbG.malepop += +entry.count;
							} else {
								oYbG.fempop += +entry.count;
							}
							// console.log("i: " + i + ", the year " + year + " now has " + oYbG.population);
							return true;	// if this doesn't return true, it will just keep adding on entries.
						}
					})) {
						var newObj = { year: year, malepop: 0, fempop: 0, gender: gender }
						if( gender == "Male" ) {
							newObj.malepop += +entry.count;
						} else {
							newObj.fempop += +entry.count;
						}
						aggYbG.push(newObj);
						// console.log("i: " + i + ",New year for: " + year);
					}
					// console.log("Dealing with: " + JSON.stringify(entry,null,4) + " in year " + year);
				}

				console.log(aggYbG);

				// use the same max domain for both so that the 45 degree angle makes sense
				var maxDomain = d3.max(aggYbG, function(d) {
					return Math.max(+d.malepop,+d.fempop);
				})*1.05

				// max male population, add 5% breathing space to our width so the axis goes on a bit
				widthScale.domain([ 0,  maxDomain]);

				// max female population, add 5% breathing space to our width so the axis goes on a bit
				heightScale.domain([ 0, maxDomain]);

				var censuses = svg.selectAll("g")
								.data(aggYbG)
								.enter()
								.append("g");

				// console.log(circles);

				var circle = censuses.append("circle")
					.attr("cx", function(d) {
						// console.log(d.malepop);
						return widthScale(d.malepop);
					})
					.attr("cy", function(d) {
						return heightScale(d.fempop);
					})
					.attr("r", 0.1)
					.attr("fill", "steelblue")
					.append("title")
					.text(function(d) {
						return "The population of Nicollet Island in " + d.year + " was  " + d.malepop + " men and " + d.fempop + " women.";

					});

				var lblYear = censuses.append("text")
					.attr("x",function(d) { return widthScale(d.malepop); })
					.attr("y",function(d) { return heightScale(d.fempop); })
					.attr("dy", "17px")
					.attr("dx", "-12px")
					.attr("class","lblCensus")
					.style("opacity",0)
			        .text(function(d){return d.year});

				var fadeIn = censuses.sort(function(a, b) {
						return d3.ascending(+a.year, +b.year);
					})
					.transition()
					.delay(function(d, i) {
						return i * 500;
					})
					.duration(2000);

				fadeIn.select("circle")
					.attr("r", 8);

				fadeIn.select("text")
					.style("opacity",1);

				svg.append("g")
					.attr("class", "x axis")
				    .attr("transform", "translate(0," + height + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.call(yAxis);

				svg.append("text")
				    .attr("class", "x label")
				    .attr("text-anchor", "end")
				    .attr("x", width)
				    .attr("y", height + 50)
				    .text("number of men in census");

				svg.append("text")
				    .attr("class", "y label")
				    .attr("text-anchor", "end")
				    .attr("y", 6)
				    .attr("dy", "-3.25em")
				    .attr("transform", "rotate(-90)")
				    .text("number of women in census");

			});


		</script>
	</body>
	</html>

## married_by_gender.csv

          
            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
	<!DOCTYPE html>
	<html>
	<head>
	<title>Module 5 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: 16px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 0 0 0 0;
	}

	svg {
	background-color: AliceBlue;
	}

	circle:hover {
	fill: orange;
	}

	.lblCensus {
	font-size: 10px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>

	</head>
	<body>
	<h1>Module 5: Population of Nicollet Island, Minneapolis, MN: 1900 - 1940</h1>

	<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: 10, bottom: 50, left: 60},
	padding = {top: 20, right: 20, bottom: 20, left: 20},
	outerWidth = 480,
	outerHeight = 480,
	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.linear()
	.range([ height, 0 ]);

	// 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 Marriage by Gender data to a population count by year & gender
	var aggYbG = new Array();

	// process the data so that its ready to feed to d3
	for(var i=0; i < dataMbG.length; i++ ) {
	var entry = dataMbG[i];
	var year = entry.YEAR;
	var gender = entry.SEX

	// if the year & gender already exist in the aggYbG array, add the new year's population
	// to the right gender otherwise create a new object and push it onto the aggYbG array
	if (!aggYbG.some(function (oYbG) {
	if( oYbG.year == year ) {
	if( gender == "Male" ) {
	oYbG.malepop += +entry.count;
	} else {
	oYbG.fempop += +entry.count;
	}
	// console.log("i: " + i + ", the year " + year + " now has " + oYbG.population);
	return true; // if this doesn't return true, it will just keep adding on entries.
	}
	})) {
	var newObj = { year: year, malepop: 0, fempop: 0, gender: gender }
	if( gender == "Male" ) {
	newObj.malepop += +entry.count;
	} else {
	newObj.fempop += +entry.count;
	}
	aggYbG.push(newObj);
	// console.log("i: " + i + ",New year for: " + year);
	}
	// console.log("Dealing with: " + JSON.stringify(entry,null,4) + " in year " + year);
	}

	console.log(aggYbG);

	// use the same max domain for both so that the 45 degree angle makes sense
	var maxDomain = d3.max(aggYbG, function(d) {
	return Math.max(+d.malepop,+d.fempop);
	})*1.05

	// max male population, add 5% breathing space to our width so the axis goes on a bit
	widthScale.domain([ 0, maxDomain]);

	// max female population, add 5% breathing space to our width so the axis goes on a bit
	heightScale.domain([ 0, maxDomain]);

	var censuses = svg.selectAll("g")
	.data(aggYbG)
	.enter()
	.append("g");

	// console.log(circles);

	var circle = censuses.append("circle")
	.attr("cx", function(d) {
	// console.log(d.malepop);
	return widthScale(d.malepop);
	})
	.attr("cy", function(d) {
	return heightScale(d.fempop);
	})
	.attr("r", 0.1)
	.attr("fill", "steelblue")
	.append("title")
	.text(function(d) {
	return "The population of Nicollet Island in " + d.year + " was " + d.malepop + " men and " + d.fempop + " women.";

	});

	var lblYear = censuses.append("text")
	.attr("x",function(d) { return widthScale(d.malepop); })
	.attr("y",function(d) { return heightScale(d.fempop); })
	.attr("dy", "17px")
	.attr("dx", "-12px")
	.attr("class","lblCensus")
	.style("opacity",0)
	.text(function(d){return d.year});

	var fadeIn = censuses.sort(function(a, b) {
	return d3.ascending(+a.year, +b.year);
	})
	.transition()
	.delay(function(d, i) {
	return i * 500;
	})
	.duration(2000);

	fadeIn.select("circle")
	.attr("r", 8);

	fadeIn.select("text")
	.style("opacity",1);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	svg.append("text")
	.attr("class", "x label")
	.attr("text-anchor", "end")
	.attr("x", width)
	.attr("y", height + 50)
	.text("number of men in census");

	svg.append("text")
	.attr("class", "y label")
	.attr("text-anchor", "end")
	.attr("y", 6)
	.attr("dy", "-3.25em")
	.attr("transform", "rotate(-90)")
	.text("number of women in census");

	});


	</script>
	</body>
	</html>
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