ryestew/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bar Chart, Framed</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

			/* #682e07 brown */

			body {
				margin: 0;
				background-color: lightGray;
				font-family: Helvetica, Arial, sans-serif;
			}

			#container {
				width: 800px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				box-shadow: 3px 3px 5px 6px #ccc;
			}

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

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

			a:link {
				text-decoration: none;
				color: gray;
			}

			a:hover {
				text-decoration: underline;
			}

			a:visited {
				color: gray;
			}

			a:active {
				color: steelBlue;
			}

			svg {
				background-color: white;
			}

			g.bar {
				cursor: pointer;
			}

			g.bar text {
				font-size: 11px;
				font-weight: bold;
				text-anchor: end;
				opacity: 0;
			}

			g.bar:hover rect {
				fill: #f7e12c;
			}

			g.bar:hover text {
				opacity: 1;
			}

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

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

			.y.axis path,
			.y.axis line {
				opacity: 0;
			}

		</style>
	</head>
	<body>

		<div id="container">

			<h1>Wastewater Treatment Plants in NYC</h1>

			<p>New York City has a lot of people. They talk and eat and flush.  New York City has waste water treatment plants to care for the latter. <br><strong>Source:</strong> <a href="https://data.cityofnewyork.us/Environment/Wastewater-Treatment-Plants/b79y-xcs9">NYC Open Data, 2015</a></p>

		</div>

		<script type="text/javascript">


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


			var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);

			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);


			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

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

			var numFormat = d3.format(',')

			//Now SVG goes into #container instead of body
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);


			d3.csv("wastewater_treatment_plants.csv", function(data) {

				data.sort(function(a, b) {
					return d3.descending(+a.pop_serve, +b.pop_serve);
				});
				// the + above coersses the string into interger context

				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.pop_serve;
				}) ]);

				// d3.max finds the biggest

				heightScale.domain(data.map(function(d) { return d.plant_name; } ));

				//Bind data to groups (not bars directly)
				var groups = svg.selectAll("g")
								.data(data)
								.enter()
								.append("g")
								.attr("class", "bar");
// commmon pattern - enter() append('g')


				//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.plant_name);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", "#682e07");

				//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						if(widthScale(d.pop_serve) > 70){
							return padding[3] + widthScale(d.pop_serve) - 7;
						}else{
							return padding[3] + widthScale(d.pop_serve) + 70;
						}
					})
					.attr("y", function(d) {
						return heightScale(d.plant_name) + 20;
					})
					.text(function(d) {
						return "pop: " + numFormat(d.pop_serve);
					});

				rects.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("width", function(d) {
						return widthScale(d.pop_serve);
					});

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

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

			});


		</script>

	</body>
</html>

## wastewater_treatment_plants.csv

          
            plant_name
            Location
            Plant in operation
            Design Capacity
            Dewatering
            pop_serve
            Receiving Waterbody
            Drainage Area
            Plant Staff
            Note

            
              26th Ward WWTP
              East
              1944
              85 MGD
              26th Ward
              283428
              Jamaica Bay
              5,907 Acres, eastern section of Brooklyn, near Jamaica Bay
              93

            
              Bowery Bay WWTP
              North
              1939
              150 MGD
              Bowery Bay
              848328
              Upper East River
              15,203 Acres, northeast section of Queens
              81

            
              Coney Island WWTP
              East
              1935
              110 MGD
              26th Ward
              596326
              Jamaica Bay
              15,087 Acres, south and central Brooklyn
              69

            
              Hunts Point WWTP
              North
              1952
              200 MGD
              Hunts Point
              684569
              Upper East River
              16,664 Acres, eastern section of the Bronx
              108

            
              Jamaica WWTP
              East
              1903 / 1943
              100 MGD
              Jamaica WWTP
              728123
              Jamaica Bay
              25,313 Acres, southern section of Queens
              66

            
              Newtown Creek WWTP
              South
              1967
              310 MGD
              Hunts Point WWTP
              1068012
              East River
              15,656 Acres, south and eastern midtown sections of Manhattan, northeast section of Brooklyn and western section of Queens
              88

            
              North River WWTP
              South
              1986
              170 MGD
              Wards Island WWTP
              588772
              Hudson River
              6,030 Acres, west side of Manhattan above Bank Street
              109

            
              Oakwood Beach WWTP
              South
              1956
              39.9 MGD
              Oakwood Beach WWTP
              244918
              Lower New York Bay
              10,779 Acres, southern section of Staten Island
              59

            
              Rockaway WWTP
              East
              1952
              45 MGD
              26th Ward WWTP
              90474
              Jamaica Bay
              6,259 Acres, Rockaway Peninsula
              41

            
              Owls Head WWTP
              East
              1952
              120 MGD
              26th Ward / Wards Island WWTPs
              758007
              Upper New York Bay
              12,947 Acres, western section of Brooklyn
              68

            
              Wards Island WWTP
              North
              1937
              275 MGD
              Wards Island WWTP
              1061558
              Upper East River
              12,056 Acres, western section of the Bronx and upper east side of Manhattan
              118

            
              Tallman Island WWTP
              North
              1939
              80 MGD
              Tallman Island WWTP
              410812
              Upper East River
              16,860 Acres, northeast section of Queens
              71

            
              Port Richmond WWTP
              South
              1953
              60 MGD
              Oakwood Beach WWTP
              198128
              Kill Van Kull
              9,665 Acres, northern section of Staten Island
              46

            
              Red Hook WWTP
              South
              1987
              60 MGD
              Red Hook WWTP
              192050
              Lower East River
              3,200 Acres, northwest section of Brooklyn and Governor's Island
              55
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Bar Chart, Framed</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

	/* #682e07 brown */

	body {
	margin: 0;
	background-color: lightGray;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	box-shadow: 3px 3px 5px 6px #ccc;
	}

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

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

	a:link {
	text-decoration: none;
	color: gray;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: steelBlue;
	}

	svg {
	background-color: white;
	}

	g.bar {
	cursor: pointer;
	}

	g.bar text {
	font-size: 11px;
	font-weight: bold;
	text-anchor: end;
	opacity: 0;
	}

	g.bar:hover rect {
	fill: #f7e12c;
	}

	g.bar:hover text {
	opacity: 1;
	}

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

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

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>
	</head>
	<body>

	<div id="container">

	<h1>Wastewater Treatment Plants in NYC</h1>

	<p>New York City has a lot of people. They talk and eat and flush. New York City has waste water treatment plants to care for the latter. <br><strong>Source:</strong> <a href="https://data.cityofnewyork.us/Environment/Wastewater-Treatment-Plants/b79y-xcs9">NYC Open Data, 2015</a></p>

	</div>

	<script type="text/javascript">


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



	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);



	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

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

	var numFormat = d3.format(',')

	//Now SVG goes into #container instead of body
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	d3.csv("wastewater_treatment_plants.csv", function(data) {

	data.sort(function(a, b) {
	return d3.descending(+a.pop_serve, +b.pop_serve);
	});
	// the + above coersses the string into interger context

	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.pop_serve;
	}) ]);

	// d3.max finds the biggest

	heightScale.domain(data.map(function(d) { return d.plant_name; } ));

	//Bind data to groups (not bars directly)
	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "bar");
	// commmon pattern - enter() append('g')


	//Add a rect to each group
	var rects = groups.append("rect")
	.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.plant_name);
	})
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.attr("fill", "#682e07");

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	if(widthScale(d.pop_serve) > 70){
	return padding[3] + widthScale(d.pop_serve) - 7;
	}else{
	return padding[3] + widthScale(d.pop_serve) + 70;
	}
	})
	.attr("y", function(d) {
	return heightScale(d.plant_name) + 20;
	})
	.text(function(d) {
	return "pop: " + numFormat(d.pop_serve);
	});

	rects.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.pop_serve);
	});

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

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

	});


	</script>

	</body>
	</html>
plant_name	Location	Plant in operation	Design Capacity	Dewatering	pop_serve	Receiving Waterbody	Drainage Area	Plant Staff	Note
26th Ward WWTP	East	1944	85 MGD	26th Ward	283428	Jamaica Bay	5,907 Acres, eastern section of Brooklyn, near Jamaica Bay	93
Bowery Bay WWTP	North	1939	150 MGD	Bowery Bay	848328	Upper East River	15,203 Acres, northeast section of Queens	81
Coney Island WWTP	East	1935	110 MGD	26th Ward	596326	Jamaica Bay	15,087 Acres, south and central Brooklyn	69
Hunts Point WWTP	North	1952	200 MGD	Hunts Point	684569	Upper East River	16,664 Acres, eastern section of the Bronx	108
Jamaica WWTP	East	1903 / 1943	100 MGD	Jamaica WWTP	728123	Jamaica Bay	25,313 Acres, southern section of Queens	66
Newtown Creek WWTP	South	1967	310 MGD	Hunts Point WWTP	1068012	East River	15,656 Acres, south and eastern midtown sections of Manhattan, northeast section of Brooklyn and western section of Queens	88
North River WWTP	South	1986	170 MGD	Wards Island WWTP	588772	Hudson River	6,030 Acres, west side of Manhattan above Bank Street	109
Oakwood Beach WWTP	South	1956	39.9 MGD	Oakwood Beach WWTP	244918	Lower New York Bay	10,779 Acres, southern section of Staten Island	59
Rockaway WWTP	East	1952	45 MGD	26th Ward WWTP	90474	Jamaica Bay	6,259 Acres, Rockaway Peninsula	41
Owls Head WWTP	East	1952	120 MGD	26th Ward / Wards Island WWTPs	758007	Upper New York Bay	12,947 Acres, western section of Brooklyn	68
Wards Island WWTP	North	1937	275 MGD	Wards Island WWTP	1061558	Upper East River	12,056 Acres, western section of the Bronx and upper east side of Manhattan	118
Tallman Island WWTP	North	1939	80 MGD	Tallman Island WWTP	410812	Upper East River	16,860 Acres, northeast section of Queens	71
Port Richmond WWTP	South	1953	60 MGD	Oakwood Beach WWTP	198128	Kill Van Kull	9,665 Acres, northern section of Staten Island	46
Red Hook WWTP	South	1987	60 MGD	Red Hook WWTP	192050	Lower East River	3,200 Acres, northwest section of Brooklyn and Governor's Island	55