unamandita · September 23, 2015 17:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Conditional Styling</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">
 			
 			body {
 				font-family: "Helvetica";
 				padding-top: 5px;
 				padding-left: 20px;
 				padding-bottom: 10px;
 			}

 			h1{
 				font-size: 24px;
 			}

 			h2 {
 				font-size: 14px;
 				font-weight: lighter;
 			}

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

 			svg {
 				background-color: white;
 			}


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

 			g.county1 path {
 				stroke: #6666cc;
 			}
 			g.county2 path {
 				stroke: #66cccc;
 			}
 			g.county3 path {
 				stroke: #ff9966;
 			}
 			g.county4 path {
 				stroke: #cc6699;
 			}
 			g.county5 path {
 				stroke: #9966cc;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				stroke-width: 1;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 			.legend{
 				font-size: 12px;
 				font-weight: lighter;
 			}


 		</style>
 	</head>
 	<body>

 		<h1>Midwife attendance at NYC hospitals, 2008-2013</h1>

 		<h2>The graph below shows the percentage of births attended by licensed midwives at New York hospitals from 2008 to 2013. Source: <a href="https://health.data.ny.gov/Health/Hospital-Maternity-Information-Beginning-2008/net3-iygw">Health Data NY</a></h2>


 		<script type="text/javascript">		


 			//Dimensions and padding
 			var w = 800;
 			var h = 800;
 			var padding = [ 20, 5, 50, 50 ];  //Top, right, bottom, left



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



 			//Set up scales
 			var xScale = d3.time.scale()
 								.range([ padding[3], w - padding[1] - padding[3] ]);
 			
 			var yScale = d3.scale.linear()
 								.range([ padding[0], h - padding[2] ]);



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

 			var yAxis = d3.svg.axis()
 							.scale(yScale)
 							.orient("left")
 							.tickFormat(function(d) {
 								return d+"%"
 							});



 			//Configure line generator
 			var line = d3.svg.line()
 				.x(function(d) {
 					return xScale(dateFormat.parse(d.year));
 				})
 				.y(function(d) {
 					return yScale(d.amount*100);
 				});



 			//Create the empty SVG image
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);



 			//Load USA data
 			d3.csv("midwife_attendance.csv", function(data) {

 				//Data is loaded in, but we need to restructure it.
 				//Remember, each line requires an array of x/y pairs;
 				//that is, an array of arrays, like so:
 				//
 				//	[ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
 				//
 				//We, however, are using 'year' as x and 'amount' as y.
 				//We also need to know which country belongs to each
 				//line, so we will build an array of objects that is
 				//structured like this:
 				/*

 					[
 						{
 							country: "Australia",
 							emissions: [
 										{ year: 1961, amount: 90589.568 },
 										{ year: 1962, amount: 94912.961 },
 										{ year: 1963, amount: 101029.517 },
 										…
 									   ]
 						},
 						{
 							country: "Bermuda",
 							emissions: [
 										{ year: 1961, amount: 176.016 },
 										{ year: 1962, amount: 157.681 },
 										{ year: 1963, amount: 150.347 },
 										…
 									   ]
 						},
 						…
 					 ]

 				*/
 				//Note that this is an array of objects. Each object
 				//contains two values, 'country' and 'emissions'.
 				//The 'emissions' value is itself an array, containing
 				//more objects, each one holding 'year' and 'amount' values.

 				//New array with all the years, for referencing later
 				var years = ["2008", "2009", "2010", "2011", "2012", "2013"];

 				//Create a new, empty array to hold our restructured dataset
 				var dataset = [];

 				//Loop once for each row in data
 				for (var i = 0; i < data.length; i++) {

 					//Create new object with this country's name and empty array
 					dataset[i] = {
 						hospital: data[i].hospitalName,
 						county: data[i].county,
 						midwifeAttendance: []
 					};

 					//Loop through all the years
 					for (var j = 0; j < years.length; j++) {

 						// If value is not empty
 						if (data[i][years[j]]) {
 							//Add a new object to the emissions data array
 							//for this country
 							dataset[i].midwifeAttendance.push({
 								year: years[j],
 								amount: data[i][years[j]]
 							});
 						}

 					}

 				}
 				
 				//Uncomment to log the original data to the console
 				// console.log(data);

 				//Uncomment to log the newly restructured dataset to the console
 				// console.log(dataset);



 				//Set scale domains
 				xScale.domain([ 
 					d3.min(years, function(d) {
 						return dateFormat.parse(d);
 					}),
 					d3.max(years, function(d) {
 						return dateFormat.parse(d);
 					})
 				]);

 				yScale.domain([ 
 					d3.max(dataset, function(d) {
 						return d3.max(d.midwifeAttendance, function(d) {
 							return d.amount*100;
 						});
 					}),
 					0
 				]);



 				//Make a group for each country
 				var groups = svg.selectAll("g")
 					.data(dataset)
 					.enter()
 					.append("g")
 					.classed("county1", function(d) {

 						if (d.county == "New York") {
 							return true;
 						} else {
 							return false;
 						}
 					})
 					.classed("county2", function(d) {

 						if (d.county == "Kings") {
 							return true;
 						} else {
 							return false;
 						}
 					})
 					.classed("county3", function(d) {

 						if (d.county == "Queens") {
 							return true;
 						} else {
 							return false;
 						}
 					})
 					.classed("county4", function(d) {

 						if (d.county == "Bronx") {
 							return true;
 						} else {
 							return false;
 						}
 					})
 					.classed("county5", function(d) {

 						if (d.county == "Richmond") {
 							return true;
 						} else {
 							return false;
 						}
 					});

 			
 						// body...
 					
 				

 				//Append a title with the country name (so we get easy tooltips)
 				groups.append("title")
 					.text(function(d) {
 						return d.hospital;
 					});

 				//Within each group, create a new line/path,
 				//binding just the emissions data to each one
 				groups.selectAll("path")
 					.data(function(d) {
 						return [ d.midwifeAttendance ];
 					})
 					.enter()
 					.append("path")
 					.attr("class", "line")
 					.attr("d", line)
 					.attr("fill", "none")
 					.attr("stroke-width", 2);
 					// .attr("stroke-dasharray", function() { return "0," + this.getTotalLength(); })
 					// .transition()
 					// .duration(5000)
 					// .ease("linear")
     //                .attrTween("stroke-dasharray", animateLine)
     //                .attr("display", 1);



 				//Axes
 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(0," + (h - padding[2]) + ")")
 					.call(xAxis);

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + (padding[3]) + ",0)")
 					.call(yAxis);

 				// function animateLine() {
 				//     var l = this.getTotalLength();
 				//     i = d3.interpolateString("0," + l, l + "," + l);
 				//     return function(t) { return i(t); };
 				// };

 			});
 			//End USA data load function


 		</script>
 		<svg width="200" height="775">
 			<line x1="0" y1="5" x2="30" y2="5" stroke="#6666cc" stroke-width="1.5"/>
 			<line x1="0" y1="20" x2="30" y2="20" stroke="#66cccc" stroke-width="1.5"/>
 			<line x1="0" y1="35" x2="30" y2="35" stroke="#ff9966" stroke-width="1.5"/>
 			<line x1="0" y1="50" x2="30" y2="50" stroke="#cc6699" stroke-width="1.5"/>
 			<line x1="0" y1="65" x2="30" y2="65" stroke="#9966cc" stroke-width="1.5"/>
 			<text x="40" y="10" class="legend">New York County</text>
 			<text x="40" y="25" class="legend">Kings County</text>
 			<text x="40" y="40" class="legend">Queens County</text>
 			<text x="40" y="55" class="legend">Bronx County</text>
 			<text x="40" y="70" class="legend">Richmond County</text>
 		</svg>

 	</body>
 </html>
diff --git a/midwife_attendance.csv b/midwife_attendance.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Conditional Styling</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	font-family: "Helvetica";
	padding-top: 5px;
	padding-left: 20px;
	padding-bottom: 10px;
	}

	h1{
	font-size: 24px;
	}

	h2 {
	font-size: 14px;
	font-weight: lighter;
	}

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

	svg {
	background-color: white;
	}


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

	g.county1 path {
	stroke: #6666cc;
	}
	g.county2 path {
	stroke: #66cccc;
	}
	g.county3 path {
	stroke: #ff9966;
	}
	g.county4 path {
	stroke: #cc6699;
	}
	g.county5 path {
	stroke: #9966cc;
	}

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

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

	.legend{
	font-size: 12px;
	font-weight: lighter;
	}


	</style>
	</head>
	<body>

	<h1>Midwife attendance at NYC hospitals, 2008-2013</h1>

	<h2>The graph below shows the percentage of births attended by licensed midwives at New York hospitals from 2008 to 2013. Source: <a href="https://health.data.ny.gov/Health/Hospital-Maternity-Information-Beginning-2008/net3-iygw">Health Data NY</a></h2>


	<script type="text/javascript">


	//Dimensions and padding
	var w = 800;
	var h = 800;
	var padding = [ 20, 5, 50, 50 ]; //Top, right, bottom, left



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



	//Set up scales
	var xScale = d3.time.scale()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);



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

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(function(d) {
	return d+"%"
	});



	//Configure line generator
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(d.amount*100);
	});



	//Create the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	//Load USA data
	d3.csv("midwife_attendance.csv", function(data) {

	//Data is loaded in, but we need to restructure it.
	//Remember, each line requires an array of x/y pairs;
	//that is, an array of arrays, like so:
	//
	// [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
	//
	//We, however, are using 'year' as x and 'amount' as y.
	//We also need to know which country belongs to each
	//line, so we will build an array of objects that is
	//structured like this:
	/*

	[
	{
	country: "Australia",
	emissions: [
	{ year: 1961, amount: 90589.568 },
	{ year: 1962, amount: 94912.961 },
	{ year: 1963, amount: 101029.517 },
	…
	]
	},
	{
	country: "Bermuda",
	emissions: [
	{ year: 1961, amount: 176.016 },
	{ year: 1962, amount: 157.681 },
	{ year: 1963, amount: 150.347 },
	…
	]
	},
	…
	]

	*/
	//Note that this is an array of objects. Each object
	//contains two values, 'country' and 'emissions'.
	//The 'emissions' value is itself an array, containing
	//more objects, each one holding 'year' and 'amount' values.

	//New array with all the years, for referencing later
	var years = ["2008", "2009", "2010", "2011", "2012", "2013"];

	//Create a new, empty array to hold our restructured dataset
	var dataset = [];

	//Loop once for each row in data
	for (var i = 0; i < data.length; i++) {

	//Create new object with this country's name and empty array
	dataset[i] = {
	hospital: data[i].hospitalName,
	county: data[i].county,
	midwifeAttendance: []
	};

	//Loop through all the years
	for (var j = 0; j < years.length; j++) {

	// If value is not empty
	if (data[i][years[j]]) {
	//Add a new object to the emissions data array
	//for this country
	dataset[i].midwifeAttendance.push({
	year: years[j],
	amount: data[i][years[j]]
	});
	}

	}

	}

	//Uncomment to log the original data to the console
	// console.log(data);

	//Uncomment to log the newly restructured dataset to the console
	// console.log(dataset);



	//Set scale domains
	xScale.domain([
	d3.min(years, function(d) {
	return dateFormat.parse(d);
	}),
	d3.max(years, function(d) {
	return dateFormat.parse(d);
	})
	]);

	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.midwifeAttendance, function(d) {
	return d.amount*100;
	});
	}),
	0
	]);



	//Make a group for each country
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g")
	.classed("county1", function(d) {

	if (d.county == "New York") {
	return true;
	} else {
	return false;
	}
	})
	.classed("county2", function(d) {

	if (d.county == "Kings") {
	return true;
	} else {
	return false;
	}
	})
	.classed("county3", function(d) {

	if (d.county == "Queens") {
	return true;
	} else {
	return false;
	}
	})
	.classed("county4", function(d) {

	if (d.county == "Bronx") {
	return true;
	} else {
	return false;
	}
	})
	.classed("county5", function(d) {

	if (d.county == "Richmond") {
	return true;
	} else {
	return false;
	}
	});


	// body...



	//Append a title with the country name (so we get easy tooltips)
	groups.append("title")
	.text(function(d) {
	return d.hospital;
	});

	//Within each group, create a new line/path,
	//binding just the emissions data to each one
	groups.selectAll("path")
	.data(function(d) {
	return [ d.midwifeAttendance ];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke-width", 2);
	// .attr("stroke-dasharray", function() { return "0," + this.getTotalLength(); })
	// .transition()
	// .duration(5000)
	// .ease("linear")
	// .attrTween("stroke-dasharray", animateLine)
	// .attr("display", 1);



	//Axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call(yAxis);

	// function animateLine() {
	// var l = this.getTotalLength();
	// i = d3.interpolateString("0," + l, l + "," + l);
	// return function(t) { return i(t); };
	// };

	});
	//End USA data load function


	</script>
	<svg width="200" height="775">
	<line x1="0" y1="5" x2="30" y2="5" stroke="#6666cc" stroke-width="1.5"/>
	<line x1="0" y1="20" x2="30" y2="20" stroke="#66cccc" stroke-width="1.5"/>
	<line x1="0" y1="35" x2="30" y2="35" stroke="#ff9966" stroke-width="1.5"/>
	<line x1="0" y1="50" x2="30" y2="50" stroke="#cc6699" stroke-width="1.5"/>
	<line x1="0" y1="65" x2="30" y2="65" stroke="#9966cc" stroke-width="1.5"/>
	<text x="40" y="10" class="legend">New York County</text>
	<text x="40" y="25" class="legend">Kings County</text>
	<text x="40" y="40" class="legend">Queens County</text>
	<text x="40" y="55" class="legend">Bronx County</text>
	<text x="40" y="70" class="legend">Richmond County</text>
	</svg>

	</body>
	</html>
hospitalName	county	2008	2009	2010	2011	2012	2013
Bellevue Hospital Center	New York	0.368	0.371	0.316	0.337	0.236	0.249
Beth Israel Medical Center/Petrie Campus	New York	0.086	0.104	0.125	0.14	0.133	0.137
Bronx-Lebanon Hospital Center - Concourse Division	Bronx	0.084	0.03	0.001	0	0	0
Brookdale Hospital Medical Center	Kings	0.212	0.085	0.284	0.328	0.306	0.251
Brooklyn Hospital Center - Downtown Campus	Kings	0.011	0.008	0.001	0.001	0	0
Coney Island Hospital	Kings	0.286	0.386	0.521	0.489	0.465	0.486
Elmhurst Hospital Center	Queens	0.018	0.042	0.018	0.066	0.058	0.123
Flushing Hospital Medical Center	Queens	0	0	0	0	0.001	0.001
Forest Hills Hospital	Queens	0.007	0.006	0.009	0.006	0.007	0.002
Harlem Hospital Center	New York	0.047	0.052	0.028	0.004	0.002	0.003
Jacobi Medical Center	Bronx	0.143	0.178	0.179	0.256	0.494	0.621
Jamaica Hospital Medical Center	Queens	0.301	0.307	0.21	0.081	0.071	0.074
Kings County Hospital Center	Kings	0.18	0.149	0.223	0.126	0.171	0.137
Lenox Hill Hospital	New York	0.001	0	0.012	0.014	0.01	0
Lincoln Medical & Mental Health Center	Bronx	0.003	0	0	0	0	0
Long Island College Hospital	Kings	0.086	0.067	0.09	0.091	0.096	0.077
Long Island Jewish Medical Center	Queens	0.001	0.001	0.003	0.003	0.005	0.002
Lutheran Medical Center	Kings	0.006	0.008	0.01	0.007	0.01	0.018
Maimonides Medical Center	Kings	0.162	0.167	0.183	0.182	0.206	0.201
Metropolitan Hospital Center	New York	0.302	0.312	0.305	0.288	0.272	0.241
Montefiore Med Center - Jack D Weiler Hosp of A Einstein College Div	Bronx	0.01	0.009	0.015	0.007	0.015	0.012
Montefiore Medical Center - North Division	Bronx	0.045	0.007	0.004	0.003	0	0
Mount Sinai Hospital	New York	0.068	0.066	0.077	0.078	0.068	0.088
New York Downtown Hospital	New York	0	0.008	0.004	0.003	0.01	0.018
New York Hospital Medical Center of Queens	Queens	0.001	0.002	0	0.001	0	0
New York Methodist Hospital	Kings	0.082	0.086	0.106	0.098	0.101	0.086
New York Presbyterian Hospital - Allen Pavilion	New York	0.035	0.026	0.013	0.011	0.006	0.007
New York Presbyterian Hospital - Columbia Presbyterian Center	New York	0	0	0	0	0	0.001
New York Presbyterian Hospital - New York Weill Cornell Center	New York	0.001	0.002	0.001	0	0	0
North Central Bronx Hospital	Bronx	0.789	0.732	0.668	0.676	0.657	0.677
NYU Hospitals Center	New York	0.008	0.009	0.005	0.008	0.004	0
Queens Hospital Center	Queens	0	0	0	0	0	0
Richmond University Medical Center	Richmond	0.003	0.005	0.01	0.013	0.018	0.002
St Barnabas Hospital	Bronx	0.195	0.218	0.265	0.283	0.23	0.204
St Johns Episcopal Hospital So Shore	Queens	0.014	0.023	0	0	0	0
St Lukes Roosevelt Hospital Center - Roosevelt Hospital Division	New York	0.08	0.078	0.087	0.098	0.099	0.094
Staten Island University Hosp-North	Richmond	0.033	0.038	0.038	0.051	0.049	0.032
University Hospital of Brooklyn	Kings	0.001	0	0	0	0	0.001
Woodhull Medical & Mental Health Center	Kings	0.647	0.683	0.664	0.671	0.641	0.605
Wyckoff Heights Medical Center	Kings	0.001	0	0.001	0	0	0.003