sallen927 · May 6, 2015 20:49
diff --git a/ClientsServed.csv b/ClientsServed.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Participants vs. Clients</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">
 			
 			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: white
 			}

 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 		</style>
 	</head>
 	<body>

 		<h1>Program participants vs. Clients in Program</h1>

        <p>Comparison between program <strong style="color: steelblue;">participants</strong> and <strong style="color: red;">clients</strong> served.  </p>

 		<script type="text/javascript">		


 			var w = 700;
 			var h = 600;
 			var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left


 			var dateFormat = d3.time.format("%Y");


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


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

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


 			var line1 = d3.svg.line()
 				.x(function(d) {
 					return xScale(dateFormat.parse(d.year));
 				})
 				.y(function(d) {
 					return yScale(d.participantsserved);
 				});

 			var line2 = d3.svg.line()
 				.x(function(d) {
 					return xScale(dateFormat.parse(d.year));
 				})
 				.y(function(d) {
 					return yScale(d.clientsserved);
 				});

 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);


 			d3.csv("ParticipantsServed.csv", function(participantsData) {

                
 				d3.csv("ClientsServed.csv", function(clientsData) {

 					
 					var mergedData = participantsData.concat(clientsData);
 					
 					xScale.domain([ 
 						d3.min(mergedData, function(d) {
 							return dateFormat.parse(d.year);
 						}),
 						d3.max(mergedData, function(d) {
 							return dateFormat.parse(d.year);
 						})
 					]);

 					yScale.domain([ 
 						d3.max(mergedData, function(d) {
 							return +d.participantsserved;
 						}),
 						0
 					]);


 					svg.data([ participantsData ])
 						.append("path")
 						.attr("class", "line participants")
 						.attr("d", line1)
 						.attr("fill", "none")
 						.attr("stroke", "steelblue")
 						.attr("stroke-width", 2);

 					svg.data([ clientsData ])
 						.append("path")
 						.attr("class", "line clients")
 						.attr("d", line2)
 						.attr("fill", "none")
 						.attr("stroke", "red")
 						.attr("stroke-width", 2);
                      

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

 				});

 			});


 		</script>

 	</body>
 </html>L
diff --git a/ParticipantsServed.csv b/ParticipantsServed.csv
	year	clientsserved
	2010	296
	2011	553
	2012	2469
	2013	3003
	2014	2789
	2015	2211
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Participants vs. Clients</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	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: white
	}


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

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

	</style>
	</head>
	<body>

	<h1>Program participants vs. Clients in Program</h1>

	<p>Comparison between program <strong style="color: steelblue;">participants</strong> and <strong style="color: red;">clients</strong> served. </p>

	<script type="text/javascript">


	var w = 700;
	var h = 600;
	var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left


	var dateFormat = d3.time.format("%Y");


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

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


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

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


	var line1 = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(d.participantsserved);
	});

	var line2 = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(d.clientsserved);
	});

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);


	d3.csv("ParticipantsServed.csv", function(participantsData) {


	d3.csv("ClientsServed.csv", function(clientsData) {


	var mergedData = participantsData.concat(clientsData);

	xScale.domain([
	d3.min(mergedData, function(d) {
	return dateFormat.parse(d.year);
	}),
	d3.max(mergedData, function(d) {
	return dateFormat.parse(d.year);
	})
	]);

	yScale.domain([
	d3.max(mergedData, function(d) {
	return +d.participantsserved;
	}),
	0
	]);


	svg.data([ participantsData ])
	.append("path")
	.attr("class", "line participants")
	.attr("d", line1)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-width", 2);

	svg.data([ clientsData ])
	.append("path")
	.attr("class", "line clients")
	.attr("d", line2)
	.attr("fill", "none")
	.attr("stroke", "red")
	.attr("stroke-width", 2);


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

	});

	});


	</script>

	</body>
	</html>L
	year	participantsserved
	2010	623
	2011	1336
	2012	4384
	2013	6376
	2014	6213
	2015	8645