P7h/Sacramento_yearly_tavg.csv

## index.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Module 3 Exercise -- Sacramento Yearly Average Temperature.</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js">
	</script>
	</head>

	<body>
		<h2>Sacramento Yearly Average Temperature</h2>
		<script type="text/javascript">
				console.clear();
			//<![CDATA[
				var w = 1200;
				var h = 1585;
				var normalFillColor = "#BCF5A9";
				var clickFillColor = "#FF6600";
				var hoverFillColor = "#006680";
				function randomIntForPickingData(min, max) {
					return Math.floor(Math.random() * (max - min + 1) + min);
				}
				var changeColorOnClick = (function(){
					var currentColor = normalFillColor;

					return function(){
						currentColor = currentColor == normalFillColor ? clickFillColor : normalFillColor;
						d3.select(this).style("fill", currentColor);
					}
				})();

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

				//Load in contents of CSV file
				d3.csv("Sacramento_yearly_tavg.csv", function(csvData) {
					console.time("barchart");
					var barPadding = 1;

					svg.selectAll("barchart")
					   .data(csvData)
					   .enter()
					   .append("rect")
					   .attr("x", function(d, i) {
							return 150;
						})
					   .attr("y", function(d, i) {
							return Math.ceil(i * (h / csvData.length));
						})
					   .attr("width", function(d, i) {
							return Math.ceil(d["tavg"] * 50);
						})
					   .attr("height", function(d, i) {
							return Math.floor(h / csvData.length - barPadding - 2.5);
						})
					   .attr("fill", function(d) {
							return normalFillColor;
						})
					   .on("mouseover", function(d, i) {
						  d3.select(this).attr("r", 10).style("fill", hoverFillColor);
						})
						.on("mouseout", function(d, i) {
						  d3.select(this).attr("r", 5.5).style("fill", normalFillColor);
						})
					   .on("click", changeColorOnClick);;
					console.timeEnd("barchart");

					console.time("data-values");
					svg.selectAll("data-values")
					   .data(csvData)
					   .enter()
					   .append("text")
					   .text(function(d, i) {
							return parseFloat(d["tavg"]).toFixed(2);;
					   })
					   .attr("text-anchor", "middle")
					   .attr("x", function(d, i) {
							return Math.floor((d["tavg"] * 50) - 5 + 140);
					   })
					   .attr("y", function(d, i) {
							return Math.floor(i * (h / csvData.length) + (h / csvData.length - barPadding) / 1.45);
					   })
					   .attr("fill", "black")
					   .attr("font-size", "10px")
					   .attr("font-family", "roboto");
					console.timeEnd("data-values");

					console.time("axis-labels");
					svg.selectAll("axis-labels")
						.data(csvData)
						.enter()
						.append("text")
						.attr("x", 145)
						.attr("y", function(d, i) {
							return Math.floor(i * (h / csvData.length) + (h / csvData.length - barPadding) / 1.35);
						})
						.attr("fill", "black")
						.attr("font-size", "10px")
						.attr("font-family", "roboto")
						.attr("font-weight", "bold")
						.attr("text-anchor", "end")
						.text(function(d) {
							return d.year
						});
					console.timeEnd("axis-labels");
				});
			//]]>
		</script>
	</body>
</html>

## Sacramento_yearly_tavg.csv

          
            year
            tavg

            
              1915
              15.877928353357

            
              1916
              15.3372481890357

            
              1917
              15.9840830951421

            
              1918
              15.6915538950237

            
              1919
              15.2778507456605

            
              1920
              15.2137783316169

            
              1921
              16.0093164519457

            
              1922
              15.3403901730479

            
              1923
              15.7414461778962

            
              1924
              15.6738737597176

            
              1925
              15.6983712999744

            
              1926
              16.7521145357175

            
              1927
              15.804692749312

            
              1928
              15.977053975567

            
              1929
              15.8029965360375

            
              1930
              15.6380132646185

            
              1931
              16.5751421696045

            
              1932
              15.9881091254326

            
              1933
              15.6865289101062

            
              1934
              17.2835807688396

            
              1935
              15.7845734867864

            
              1936
              16.9047842883991

            
              1937
              16.0584832655178

            
              1938
              15.8175180379768

            
              1939
              16.6557453296851

            
              1940
              16.6747799652129

            
              1941
              16.2735559451005

            
              1942
              15.6264982013889

            
              1943
              16.0904627309844

            
              1944
              15.6308055692977

            
              1945
              15.9356198867416

            
              1946
              15.2814571462366

            
              1947
              15.816849265265

            
              1948
              14.6822532466398

            
              1949
              15.2743076339766

            
              1950
              16.3233165803347

            
              1951
              15.792197553485

            
              1952
              15.7771772414303

            
              1953
              15.8627718711598

            
              1954
              15.4314666259153

            
              1955
              15.4766120354551

            
              1956
              15.6682378239294

            
              1957
              15.9876314576133

            
              1958
              16.936698158871

            
              1959
              16.8823028400186

            
              1960
              16.0166837561813

            
              1961
              15.6216782488543

            
              1962
              15.1539862627944

            
              1963
              14.9723746789395

            
              1964
              15.8879282126823

            
              1965
              15.6631106217998

            
              1966
              16.6951920223982

            
              1967
              16.1001937696653

            
              1968
              16.1671208119299

            
              1969
              16.2350203959709

            
              1970
              16.7170902394521

            
              1971
              15.6332184125992

            
              1972
              15.9319705301817

            
              1973
              16.4997179625768

            
              1974
              16.3531851433276

            
              1975
              16.3802260789394

            
              1976
              17.3221561438728

            
              1977
              16.1536090186668

            
              1978
              16.2905490477215

            
              1979
              16.4928355463358

            
              1980
              16.0583401488274

            
              1981
              17.0076820036802

            
              1982
              15.1061111336342

            
              1983
              16.68203810064

            
              1984
              17.0933349078822

            
              1985
              15.8285885209933

            
              1986
              16.9522440268945

            
              1987
              16.7590022742096

            
              1988
              17.2587208679768

            
              1989
              16.1942636271921

            
              1990
              16.9049376710061

            
              1991
              16.8544274463966

            
              1992
              17.2802859114325

            
              1993
              16.4839032080197

            
              1994
              16.3494768837398

            
              1995
              17.1832127265073

            
              1996
              17.7501065766314

            
              1997
              17.865331734239

            
              1998
              16.085449934863

            
              1999
              15.9121512400122

            
              2000
              16.4623527988042

            
              2001
              17.0300621726094

            
              2002
              16.5951170068548

            
              2003
              17.035199633951

            
              2004
              16.9821905871987

            
              2005
              16.8116468604487

            
              2006
              16.4585901678219

            
              2007
              16.5206649414427

            
              2008
              16.5507700517705

            
              2009
              16.6164869141065

            
              2010
              16.3514161864119

            
              2011
              16.1246474654218
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Module 3 Exercise -- Sacramento Yearly Average Temperature.</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js">
	</script>
	</head>

	<body>
	<h2>Sacramento Yearly Average Temperature</h2>
	<script type="text/javascript">
	console.clear();
	//<![CDATA[
	var w = 1200;
	var h = 1585;
	var normalFillColor = "#BCF5A9";
	var clickFillColor = "#FF6600";
	var hoverFillColor = "#006680";
	function randomIntForPickingData(min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
	}
	var changeColorOnClick = (function(){
	var currentColor = normalFillColor;

	return function(){
	currentColor = currentColor == normalFillColor ? clickFillColor : normalFillColor;
	d3.select(this).style("fill", currentColor);
	}
	})();

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

	//Load in contents of CSV file
	d3.csv("Sacramento_yearly_tavg.csv", function(csvData) {
	console.time("barchart");
	var barPadding = 1;

	svg.selectAll("barchart")
	.data(csvData)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return 150;
	})
	.attr("y", function(d, i) {
	return Math.ceil(i * (h / csvData.length));
	})
	.attr("width", function(d, i) {
	return Math.ceil(d["tavg"] * 50);
	})
	.attr("height", function(d, i) {
	return Math.floor(h / csvData.length - barPadding - 2.5);
	})
	.attr("fill", function(d) {
	return normalFillColor;
	})
	.on("mouseover", function(d, i) {
	d3.select(this).attr("r", 10).style("fill", hoverFillColor);
	})
	.on("mouseout", function(d, i) {
	d3.select(this).attr("r", 5.5).style("fill", normalFillColor);
	})
	.on("click", changeColorOnClick);;
	console.timeEnd("barchart");

	console.time("data-values");
	svg.selectAll("data-values")
	.data(csvData)
	.enter()
	.append("text")
	.text(function(d, i) {
	return parseFloat(d["tavg"]).toFixed(2);;
	})
	.attr("text-anchor", "middle")
	.attr("x", function(d, i) {
	return Math.floor((d["tavg"] * 50) - 5 + 140);
	})
	.attr("y", function(d, i) {
	return Math.floor(i * (h / csvData.length) + (h / csvData.length - barPadding) / 1.45);
	})
	.attr("fill", "black")
	.attr("font-size", "10px")
	.attr("font-family", "roboto");
	console.timeEnd("data-values");

	console.time("axis-labels");
	svg.selectAll("axis-labels")
	.data(csvData)
	.enter()
	.append("text")
	.attr("x", 145)
	.attr("y", function(d, i) {
	return Math.floor(i * (h / csvData.length) + (h / csvData.length - barPadding) / 1.35);
	})
	.attr("fill", "black")
	.attr("font-size", "10px")
	.attr("font-family", "roboto")
	.attr("font-weight", "bold")
	.attr("text-anchor", "end")
	.text(function(d) {
	return d.year
	});
	console.timeEnd("axis-labels");
	});
	//]]>
	</script>
	</body>
	</html>
	year	tavg
	1915	15.877928353357
	1916	15.3372481890357
	1917	15.9840830951421
	1918	15.6915538950237
	1919	15.2778507456605
	1920	15.2137783316169
	1921	16.0093164519457
	1922	15.3403901730479
	1923	15.7414461778962
	1924	15.6738737597176
	1925	15.6983712999744
	1926	16.7521145357175
	1927	15.804692749312
	1928	15.977053975567
	1929	15.8029965360375
	1930	15.6380132646185
	1931	16.5751421696045
	1932	15.9881091254326
	1933	15.6865289101062
	1934	17.2835807688396
	1935	15.7845734867864
	1936	16.9047842883991
	1937	16.0584832655178
	1938	15.8175180379768
	1939	16.6557453296851
	1940	16.6747799652129
	1941	16.2735559451005
	1942	15.6264982013889
	1943	16.0904627309844
	1944	15.6308055692977
	1945	15.9356198867416
	1946	15.2814571462366
	1947	15.816849265265
	1948	14.6822532466398
	1949	15.2743076339766
	1950	16.3233165803347
	1951	15.792197553485
	1952	15.7771772414303
	1953	15.8627718711598
	1954	15.4314666259153
	1955	15.4766120354551
	1956	15.6682378239294
	1957	15.9876314576133
	1958	16.936698158871
	1959	16.8823028400186
	1960	16.0166837561813
	1961	15.6216782488543
	1962	15.1539862627944
	1963	14.9723746789395
	1964	15.8879282126823
	1965	15.6631106217998
	1966	16.6951920223982
	1967	16.1001937696653
	1968	16.1671208119299
	1969	16.2350203959709
	1970	16.7170902394521
	1971	15.6332184125992
	1972	15.9319705301817
	1973	16.4997179625768
	1974	16.3531851433276
	1975	16.3802260789394
	1976	17.3221561438728
	1977	16.1536090186668
	1978	16.2905490477215
	1979	16.4928355463358
	1980	16.0583401488274
	1981	17.0076820036802
	1982	15.1061111336342
	1983	16.68203810064
	1984	17.0933349078822
	1985	15.8285885209933
	1986	16.9522440268945
	1987	16.7590022742096
	1988	17.2587208679768
	1989	16.1942636271921
	1990	16.9049376710061
	1991	16.8544274463966
	1992	17.2802859114325
	1993	16.4839032080197
	1994	16.3494768837398
	1995	17.1832127265073
	1996	17.7501065766314
	1997	17.865331734239
	1998	16.085449934863
	1999	15.9121512400122
	2000	16.4623527988042
	2001	17.0300621726094
	2002	16.5951170068548
	2003	17.035199633951
	2004	16.9821905871987
	2005	16.8116468604487
	2006	16.4585901678219
	2007	16.5206649414427
	2008	16.5507700517705
	2009	16.6164869141065
	2010	16.3514161864119
	2011	16.1246474654218