sallen927/ClientsServed.csv

## ClientsServed.csv

          
            year
            clientsserved

            
              2010
              296

            
              2011
              553

            
              2012
              2469

            
              2013
              3003

            
              2014
              2789

            
              2015
              2211

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

## ParticipantsServed.csv

          
            year
            participantsserved

            
              2010
              623

            
              2011
              1336

            
              2012
              4384

            
              2013
              6376

            
              2014
              6213

            
              2015
              8645
	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