rphaedrus/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Module 6 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 Module6 samples */
			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 18px;
				margin: 0;
			}

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

			svg {
				background-color: white;
			}

			circle:hover {
				fill: orange;
			}

			path {
				stroke: gray;
				stroke-width: 1;
			}

			g.women path {
				stroke: Magenta ;
			}

			g.men path {
				stroke: MediumBlue;
			}
			/*g.highlight path {*/
			path:hover {
				stroke-width: 3;
			}

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

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

		</style>

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

		<p>By Gender and Marital Status.  Source: US Census Data, 1900, 1910, 1920, 1930, 1940 via the <a href="http://www.ipums.org">MPC</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;

			//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");

			var xScale = d3.time.scale()
								.range([ 0, width ]);

			var yScale = d3.scale.linear()
								.range([ 0, height ]);

			//Configure axis generators
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(d3.time.year,10)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");


			//Configure line generator
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(d.year);
				})
				.y(function(d) {
					return yScale(d.count);
				});


			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); }


				// time for data massaging.  Eventually, we want an array that looks like this:
				/*
					[
						{
							gender: Male,
							marst : Single,
							counts : [
										{ year: 1900, count: 320 }
										{ year: 1910, count: 658 }
										{ year: 1920, count: 420 }
										{ year: 1930, count: 372 }
										{ year: 1940, count: 512 }
									]
						}
						{
							Gender ...
						}
					]
				*/
				var dataMGbY = new Array();
				var minYear = dateFormat.parse("2000000");
				var maxYear = dateFormat.parse("0");
				var maxCount = 0;

				for(var i=0; i < dataMbG.length; i++ ) {
					var entry = dataMbG[i],
						year = dateFormat.parse(entry.YEAR),
						gender = entry.SEX,
						marst = entry.MARST,
						count = +entry.count;

					// find the min and max years and counts for our ranges later.
					minYear = Math.min(minYear,year);
					maxYear = Math.max(maxYear,year);
					maxCount = Math.max(maxCount,count);

					// if we've got the gender/status object, add the year count object to it.
					// if not, create a new one.
					if (!dataMGbY.some(function (oMGbY) {
						// console.log("Checking " + oMGbY.marst + " " + oMGbY.gender + " against current " + marst + " " + gender);
						if( (oMGbY.marst == marst) && (oMGbY.gender == gender) ) {
							// we've got an object for this one, add the count object.
							// console.log("Pushing " + dateFormat(year) + ": " + count + " for " + marst + " " + gender + " to push on " + JSON.stringify(oMGbY));
							var newCount = { year: year, count: count};
							oMGbY.counts.push(newCount);
							return true;
						}
					})) {
						// create a new gender/status by year object
						var newMGbY = { gender: gender, marst: marst, counts: new Array() }
						var newCount = { year: year, count: count}
						newMGbY.counts.push(newCount);
						dataMGbY.push(newMGbY);
						// console.log("Created new object: " + JSON.stringify(newMGbY));
					}
				}

				console.log(dataMGbY);

				//Set scale domains
				xScale.domain([ minYear, maxYear ]);
				yScale.domain([ maxCount+50, 0 ]);


				//Make a group for each gender/marital status combo
				var groups = svg.selectAll("g")
					.data(dataMGbY)
					.enter()
					.append("g")
					.classed("women", function(d) {
						if (d.gender == "Female" ) {
							return true;
						} else {
							return false;
						}
					})
					.classed("men", function(d) {
						if (d.gender == "Male" ) {
							return true;
						} else {
							return false;
						}
					})

				//Append a title with the country name (so we get easy tooltips)
				groups.append("title")
					.text(function(d) {
						return "Total number of " + d.marst + " " + d.gender + "s";
					});

				//Within each group, create a new line/path,
				//binding just the counts data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.counts ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke-width", 2);


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

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


				// axis labels
				svg.append("text")
				    .attr("class", "x label")
				    .attr("text-anchor", "end")
				    .attr("x", width)
				    .attr("y", height + 50)
				    .text("census year");

				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 group 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

            
              1900
              Male
              Divorced
              0

            
              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 6 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 Module6 samples */
	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 18px;
	margin: 0;
	}

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

	svg {
	background-color: white;
	}

	circle:hover {
	fill: orange;
	}

	path {
	stroke: gray;
	stroke-width: 1;
	}

	g.women path {
	stroke: Magenta ;
	}

	g.men path {
	stroke: MediumBlue;
	}
	/g.highlight path {/
	path:hover {
	stroke-width: 3;
	}

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

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

	</style>

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

	<p>By Gender and Marital Status. Source: US Census Data, 1900, 1910, 1920, 1930, 1940 via the <a href="http://www.ipums.org">MPC</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;

	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");

	var xScale = d3.time.scale()
	.range([ 0, width ]);

	var yScale = d3.scale.linear()
	.range([ 0, height ]);

	//Configure axis generators
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(d3.time.year,10)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");



	//Configure line generator
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(d.year);
	})
	.y(function(d) {
	return yScale(d.count);
	});



	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); }


	// time for data massaging. Eventually, we want an array that looks like this:
	/*
	[
	{
	gender: Male,
	marst : Single,
	counts : [
	{ year: 1900, count: 320 }
	{ year: 1910, count: 658 }
	{ year: 1920, count: 420 }
	{ year: 1930, count: 372 }
	{ year: 1940, count: 512 }
	]
	}
	{
	Gender ...
	}
	]
	*/
	var dataMGbY = new Array();
	var minYear = dateFormat.parse("2000000");
	var maxYear = dateFormat.parse("0");
	var maxCount = 0;

	for(var i=0; i < dataMbG.length; i++ ) {
	var entry = dataMbG[i],
	year = dateFormat.parse(entry.YEAR),
	gender = entry.SEX,
	marst = entry.MARST,
	count = +entry.count;

	// find the min and max years and counts for our ranges later.
	minYear = Math.min(minYear,year);
	maxYear = Math.max(maxYear,year);
	maxCount = Math.max(maxCount,count);

	// if we've got the gender/status object, add the year count object to it.
	// if not, create a new one.
	if (!dataMGbY.some(function (oMGbY) {
	// console.log("Checking " + oMGbY.marst + " " + oMGbY.gender + " against current " + marst + " " + gender);
	if( (oMGbY.marst == marst) && (oMGbY.gender == gender) ) {
	// we've got an object for this one, add the count object.
	// console.log("Pushing " + dateFormat(year) + ": " + count + " for " + marst + " " + gender + " to push on " + JSON.stringify(oMGbY));
	var newCount = { year: year, count: count};
	oMGbY.counts.push(newCount);
	return true;
	}
	})) {
	// create a new gender/status by year object
	var newMGbY = { gender: gender, marst: marst, counts: new Array() }
	var newCount = { year: year, count: count}
	newMGbY.counts.push(newCount);
	dataMGbY.push(newMGbY);
	// console.log("Created new object: " + JSON.stringify(newMGbY));
	}
	}

	console.log(dataMGbY);

	//Set scale domains
	xScale.domain([ minYear, maxYear ]);
	yScale.domain([ maxCount+50, 0 ]);


	//Make a group for each gender/marital status combo
	var groups = svg.selectAll("g")
	.data(dataMGbY)
	.enter()
	.append("g")
	.classed("women", function(d) {
	if (d.gender == "Female" ) {
	return true;
	} else {
	return false;
	}
	})
	.classed("men", function(d) {
	if (d.gender == "Male" ) {
	return true;
	} else {
	return false;
	}
	})

	//Append a title with the country name (so we get easy tooltips)
	groups.append("title")
	.text(function(d) {
	return "Total number of " + d.marst + " " + d.gender + "s";
	});

	//Within each group, create a new line/path,
	//binding just the counts data to each one
	groups.selectAll("path")
	.data(function(d) {
	return [ d.counts ];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke-width", 2);



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

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


	// axis labels
	svg.append("text")
	.attr("class", "x label")
	.attr("text-anchor", "end")
	.attr("x", width)
	.attr("y", height + 50)
	.text("census year");

	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 group 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
1900	Male	Divorced	0
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