Journathan/WaterConsumptionInTheNewYorkCity.csv

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

            	rect:hover{
		          fill-opacity: 0.5;
		          stroke:none;
                    }

			body {
				background-color: #6dcff6;
			}

            h1 {
                color: #ffffff;
                font-family:tahoma;
                font-weight:100;
                font-size:200%;
                letter-spacing:5pt;
            }

            h3 {
                color: #ffffff;
                font-family: tahoma;
                font-size: 110%;
                font-weight: 400;
                text-indent: 10px;
                letter-spacing: 5pt;
                position: absolute;
                top: -0.5em;
                left: 0em;
                width: 30em }

            }


			rect:hover {
				fill: #ffffff;
			}


			svg {
				background-color: #6dcff6;
			}

		</style>
	</head>
	<body>


		<script type="text/javascript">

                d3.select("body")
				.append("h1")
				.text("IN THE NEW YORK CITY");

                d3.select("body")
				.append("h3")
				.text("WATER CONSUMPTION");


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


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

				data.sort(function(a, b) {
					return d3.descending(a.Year, b.Year);

					//If your numeric values aren't sorting properly,
					//try commenting out the line above, and instead using:
					//
					//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
					//
					//Data coming in from the CSV is saved as strings (text),
					//so the + signs here force JavaScript to treat those
					//strings instead as numeric values, thereby fixing the
					//sort order (hopefully!).
				});

				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");


				rects.attr("x", 0)
					.attr("y", function(d, i) {
						return i * 13;
					})
                    .attr("fill", "black")
					.attr("width", function(d) {
						return d.NYCConsumptionMilliongallonsperday / 2;
					})
					.attr("height",9)
					.append("title")
					.text(function(d) {
						return d.NYCConsumptionMilliongallonsperday + " Millions of Gallons per Day in " + d.Year;


					});


			});


		</script>

	</body>
</html>

## WaterConsumptionInTheNewYorkCity.csv

          
            Year
            NYCConsumptionMilliongallonsperday
            PerCapitaGallonsperpersonperday

            
              2009
              1007.2
              125.8

            
              2008
              1082.9
              135.2

            
              2007
              1113.9
              139.1

            
              2006
              1068.7
              133.5

            
              2005
              1107.4
              138.3

            
              2004
              1099.5
              137.3

            
              2003
              1093.7
              136.6

            
              2002
              1135.6
              141.8

            
              2001
              1184
              154.6

            
              2000
              1240.4
              169.4

            
              1999
              1237.2
              168.9

            
              1998
              1219.5
              166.5

            
              1997
              1205.5
              164.6

            
              1996
              1297.9
              177.2

            
              1995
              1325.7
              181

            
              1994
              1357.7
              185.4

            
              1993
              1368.5
              186.9

            
              1992
              1368.6
              186.9

            
              1991
              1496.3
              204.1

            
              1990
              1423.8
              201.3

            
              1989
              1401.7
              198.2

            
              1988
              1483.9
              208.3

            
              1987
              1446.5
              201.9

            
              1986
              1350.7
              190.4

            
              1985
              1325.8
              187.5

            
              1984
              1465
              207.2

            
              1983
              1423.8
              201.4

            
              1982
              1382.4
              195.5

            
              1981
              1309.3
              181.4

            
              1980
              1505.9
              187.9

            
              1979
              1512.4
              189
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Water Consumption NY</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	rect:hover{
	fill-opacity: 0.5;
	stroke:none;
	}

	body {
	background-color: #6dcff6;
	}

	h1 {
	color: #ffffff;
	font-family:tahoma;
	font-weight:100;
	font-size:200%;
	letter-spacing:5pt;
	}

	h3 {
	color: #ffffff;
	font-family: tahoma;
	font-size: 110%;
	font-weight: 400;
	text-indent: 10px;
	letter-spacing: 5pt;
	position: absolute;
	top: -0.5em;
	left: 0em;
	width: 30em }

	}


	rect:hover {
	fill: #ffffff;
	}


	svg {
	background-color: #6dcff6;
	}

	</style>
	</head>
	<body>


	<script type="text/javascript">

	d3.select("body")
	.append("h1")
	.text("IN THE NEW YORK CITY");

	d3.select("body")
	.append("h3")
	.text("WATER CONSUMPTION");




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





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

	data.sort(function(a, b) {
	return d3.descending(a.Year, b.Year);

	//If your numeric values aren't sorting properly,
	//try commenting out the line above, and instead using:
	//
	//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
	//
	//Data coming in from the CSV is saved as strings (text),
	//so the + signs here force JavaScript to treat those
	//strings instead as numeric values, thereby fixing the
	//sort order (hopefully!).
	});

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");



	rects.attr("x", 0)
	.attr("y", function(d, i) {
	return i * 13;
	})
	.attr("fill", "black")
	.attr("width", function(d) {
	return d.NYCConsumptionMilliongallonsperday / 2;
	})
	.attr("height",9)
	.append("title")
	.text(function(d) {
	return d.NYCConsumptionMilliongallonsperday + " Millions of Gallons per Day in " + d.Year;


	});


	});



	</script>

	</body>
	</html>
Year	NYCConsumptionMilliongallonsperday	PerCapitaGallonsperpersonperday
2009	1007.2	125.8
2008	1082.9	135.2
2007	1113.9	139.1
2006	1068.7	133.5
2005	1107.4	138.3
2004	1099.5	137.3
2003	1093.7	136.6
2002	1135.6	141.8
2001	1184	154.6
2000	1240.4	169.4
1999	1237.2	168.9
1998	1219.5	166.5
1997	1205.5	164.6
1996	1297.9	177.2
1995	1325.7	181
1994	1357.7	185.4
1993	1368.5	186.9
1992	1368.6	186.9
1991	1496.3	204.1
1990	1423.8	201.3
1989	1401.7	198.2
1988	1483.9	208.3
1987	1446.5	201.9
1986	1350.7	190.4
1985	1325.8	187.5
1984	1465	207.2
1983	1423.8	201.4
1982	1382.4	195.5
1981	1309.3	181.4
1980	1505.9	187.9
1979	1512.4	189