hydrosquall/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Yale College Dorm Energy Usage</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

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

			#container {
				width: 700px;
				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 text {
				font-size: 12px;
				fill: #eee;
				text-anchor: end;
				opacity: 0;
			}

			g.bar:hover rect {
				fill: #0074D9;
			}

			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: 12px;
			}

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

		</style>
	</head>
	<body>

		<div id="container">

			<h1>Energy Usage by Building on Yale Campus</h1>

			<p>Energy Usage in MMBTU (Million British Thermal Units) per Square Foot.</p>
			<p>Includes electricity, steam, chilled water, and gas usage. <strong>Source:</strong> <a href="http://java.facilities.yale.edu/energy/">Yale Campus Facilities, 2015</a></p>


		</div>

		<script type="text/javascript">

			// New vars
			var yaleBlue = "#0E4C92";
			var parseFormat = d3.format(".4f");

			var w = 700;
			var h = 600;
			var padding = [ 20, 10, 30, 150 ];  //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)
							.ticks(6)
							.orient("bottom");

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


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


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

				data.sort(function(a, b) {
					return d3.descending(+a.sqf15, +b.sqf15);
				});

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

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

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

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

				//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						return padding[3] + widthScale(d.sqf15) - 3;
					})
					.attr("y", function(d) {
						return heightScale(d.facility) + 14;
					})
					.text(function(d) {
						return parseFormat(d.sqf15);
					});

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

				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>

## yaleEnergy.csv

          
            TYPE
            facility
            GSF
            FYTD16 MMBTU
            FYTD15 MMBTU
            % Change
            Size Rank
            Energy 2016 Rank
            Energy 2015 Rank
            sqf16
            sqf15
            SQF 2016 Rank
            SQF 2015 Rank

            
              RES
              SILLIMAN
              239258
              3550
              3265
              8%
              1
              1
              1
              0.014837539
              0.013646357
              8
              10

            
              RES
              MORSE
              144259
              3511
              2984
              15%
              8
              2
              2
              0.02433817
              0.020685018
              1
              2

            
              RES
              EZRA STILES
              144250
              3269
              2759
              16%
              9
              3
              4
              0.022662045
              0.019126516
              3
              4

            
              RES
              DAVENPORT
              157488
              3013
              2650
              12%
              4
              4
              5
              0.019131616
              0.016826679
              5
              6

            
              RES
              JONATHAN EDWARDS
              122968
              2706
              2950
              9%
              13
              5
              3
              0.022005725
              0.023989981
              4
              1

            
              RES
              BERKELEY
              146431
              2388
              2312
              3%
              7
              6
              6
              0.016308022
              0.015789006
              7
              8

            
              RES
              TRUMBULL
              128809
              2211
              2216
              0%
              12
              7
              8
              0.01716495
              0.017203767
              6
              5

            
              RES
              PIERSON
              174906
              2094
              2312
              10%
              2
              8
              6
              0.011972145
              0.013218529
              12
              11

            
              RES
              BRANFORD
              154221
              2032
              1713
              16%
              6
              9
              10
              0.013175897
              0.011107437
              11
              13

            
              RES
              SAYBROOK
              164794
              1857
              1525
              18%
              3
              10
              11
              0.011268614
              0.009253978
              13
              15

            
              RES
              CALHOUN,JOHN
              131249
              1738
              2181
              26%
              11
              11
              9
              0.013242006
              0.016617269
              10
              7

            
              RES
              TIMOTHY DWIGHT
              154555
              1245
              1045
              16%
              5
              12
              13
              0.008055385
              0.006761347
              17
              20

            
              ANNEX
              BAKER
              137443
              1178
              1079
              8%
              10
              13
              12
              0.008570826
              0.007850527
              15
              19

            
              OC
              DURFEE,BRADFORD
              43805
              1037
              893
              14%
              18
              14
              14
              0.023673097
              0.020385801
              2
              3

            
              OC
              LANMAN-WRIGHT
              65410
              905
              720
              20%
              15
              15
              15
              0.013835805
              0.011007491
              9
              14

            
              ANNEX
              HELEN HADLEY
              64801
              548
              421
              23%
              16
              16
              19
              0.00845666
              0.006496813
              16
              22

            
              OC
              BINGHAM,CHARLES
              62202
              476
              532
              12%
              17
              17
              16
              0.007652487
              0.00855278
              19
              16

            
              ANNEX
              ROSENFELD
              40056
              322
              269
              16%
              20
              18
              21
              0.008038746
              0.006715598
              18
              21

            
              OC
              FARNAM, HENRY
              30353
              262
              456
              74%
              22
              19
              17
              0.008631766
              0.015023227
              14
              9

            
              OC
              LAWRANCE,THOMAS
              37139
              262
              456
              74%
              21
              19
              17
              0.007054579
              0.012278198
              20
              12

            
              OC
              VANDERBILT
              79459
              221
              330
              49%
              14
              21
              20
              0.002781309
              0.004153085
              24
              24

            
              OC
              WELCH,HARMANUS
              40942
              176
              222
              26%
              19
              22
              22
              0.004298764
              0.005422305
              23
              23

            
              OC
              ARNOLD
              26159
              150
              219
              46%
              23
              23
              23
              0.005734164
              0.00837188
              22
              17

            
              ANNEX
              MCCLELLAN,EDWIN
              21747
              142
              171
              20%
              24
              24
              24
              0.006529636
              0.007863154
              21
              18
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Yale College Dorm Energy Usage</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

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

	#container {
	width: 700px;
	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 text {
	font-size: 12px;
	fill: #eee;
	text-anchor: end;
	opacity: 0;
	}

	g.bar:hover rect {
	fill: #0074D9;
	}

	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: 12px;
	}

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

	</style>
	</head>
	<body>

	<div id="container">

	<h1>Energy Usage by Building on Yale Campus</h1>

	<p>Energy Usage in MMBTU (Million British Thermal Units) per Square Foot.</p>
	<p>Includes electricity, steam, chilled water, and gas usage. <strong>Source:</strong> <a href="http://java.facilities.yale.edu/energy/">Yale Campus Facilities, 2015</a></p>


	</div>

	<script type="text/javascript">

	// New vars
	var yaleBlue = "#0E4C92";
	var parseFormat = d3.format(".4f");

	var w = 700;
	var h = 600;
	var padding = [ 20, 10, 30, 150 ]; //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)
	.ticks(6)
	.orient("bottom");

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


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


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

	data.sort(function(a, b) {
	return d3.descending(+a.sqf15, +b.sqf15);
	});

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

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

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

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

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.sqf15) - 3;
	})
	.attr("y", function(d) {
	return heightScale(d.facility) + 14;
	})
	.text(function(d) {
	return parseFormat(d.sqf15);
	});

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

	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>
TYPE	facility	GSF	FYTD16 MMBTU	FYTD15 MMBTU	% Change	Size Rank	Energy 2016 Rank	Energy 2015 Rank	sqf16	sqf15	SQF 2016 Rank	SQF 2015 Rank
RES	SILLIMAN	239258	3550	3265	8%	1	1	1	0.014837539	0.013646357	8	10
RES	MORSE	144259	3511	2984	15%	8	2	2	0.02433817	0.020685018	1	2
RES	EZRA STILES	144250	3269	2759	16%	9	3	4	0.022662045	0.019126516	3	4
RES	DAVENPORT	157488	3013	2650	12%	4	4	5	0.019131616	0.016826679	5	6
RES	JONATHAN EDWARDS	122968	2706	2950	9%	13	5	3	0.022005725	0.023989981	4	1
RES	BERKELEY	146431	2388	2312	3%	7	6	6	0.016308022	0.015789006	7	8
RES	TRUMBULL	128809	2211	2216	0%	12	7	8	0.01716495	0.017203767	6	5
RES	PIERSON	174906	2094	2312	10%	2	8	6	0.011972145	0.013218529	12	11
RES	BRANFORD	154221	2032	1713	16%	6	9	10	0.013175897	0.011107437	11	13
RES	SAYBROOK	164794	1857	1525	18%	3	10	11	0.011268614	0.009253978	13	15
RES	CALHOUN,JOHN	131249	1738	2181	26%	11	11	9	0.013242006	0.016617269	10	7
RES	TIMOTHY DWIGHT	154555	1245	1045	16%	5	12	13	0.008055385	0.006761347	17	20
ANNEX	BAKER	137443	1178	1079	8%	10	13	12	0.008570826	0.007850527	15	19
OC	DURFEE,BRADFORD	43805	1037	893	14%	18	14	14	0.023673097	0.020385801	2	3
OC	LANMAN-WRIGHT	65410	905	720	20%	15	15	15	0.013835805	0.011007491	9	14
ANNEX	HELEN HADLEY	64801	548	421	23%	16	16	19	0.00845666	0.006496813	16	22
OC	BINGHAM,CHARLES	62202	476	532	12%	17	17	16	0.007652487	0.00855278	19	16
ANNEX	ROSENFELD	40056	322	269	16%	20	18	21	0.008038746	0.006715598	18	21
OC	FARNAM, HENRY	30353	262	456	74%	22	19	17	0.008631766	0.015023227	14	9
OC	LAWRANCE,THOMAS	37139	262	456	74%	21	19	17	0.007054579	0.012278198	20	12
OC	VANDERBILT	79459	221	330	49%	14	21	20	0.002781309	0.004153085	24	24
OC	WELCH,HARMANUS	40942	176	222	26%	19	22	22	0.004298764	0.005422305	23	23
OC	ARNOLD	26159	150	219	46%	23	23	23	0.005734164	0.00837188	22	17
ANNEX	MCCLELLAN,EDWIN	21747	142	171	20%	24	24	24	0.006529636	0.007863154	21	18