block by ajzeigert 70945a9e8222390aa6da

Module 2 exercise, SVG drawing and load CSV file

Full Screen

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
		<style>
			svg {
				background-color: #7aa0b4;
			}
		</style>
	</head>
	<body>

		<p>You should see something sort of like an eclipse below?</p>

		<script type="text/javascript">		

			//Load in contents of CSV file
			d3.csv("CPI_Historical_Data_1974-2014.csv", function(data) {

				//Now CSV contents have been transformed into
				//an array of JSON objects.

				//Log 'data' to the console, for verification.
				console.log(data);

			});
			
			var newSVG = d3.select("body").append("svg");
			
			newSVG.attr({
				"width": 500,
				"height": 400,
			}).append("circle").attr({
				"cx": 100,
				"cy": 100,
				"r": 200,
				"fill": '#d9b410'
			});
			
			newSVG.append("circle").attr({
				"cx": 200,
				"cy": 200,
				"r": 100,
				"fill": '#eeedeb'
			});
			
			newSVG.append("ellipse").attr({
				"cx": 380,
				"cy": 350,
				"rx": 100,
				"ry": 30,
				"fill": '#595959'
			});


		</script>

	</body>
</html>

CPI_Historical_Data_1974-2014.csv

Item,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014
All food,14.3,8.5,3,6.3,9.9,11,8.6,7.8,4.1,2.1,3.8,2.3,3.2,4.1,4.1,5.8,5.8,2.9,1.2,2.2,2.4,2.8,3.3,2.6,2.2,2.1,2.3,3.2,1.8,2.2,3.4,2.4,2.4,4,5.5,1.8,0.8,3.7,2.6,1.4,2.4
Food away from home,12.7,9.4,6.8,7.6,9.1,11.1,9.9,9,5.4,4.4,4.2,3.9,3.9,4,4.1,4.6,4.7,3.4,2,1.8,1.7,2.3,2.5,2.8,2.6,2.5,2.4,2.9,2.5,2.1,3,3.1,3.1,3.6,4.4,3.5,1.3,2.3,2.8,2.1,2.4
Food at home,14.9,8.2,2.1,5.9,10.5,10.8,8.1,7.2,3.5,1,3.7,1.5,2.9,4.3,4.2,6.5,6.5,2.6,0.7,2.4,2.9,3.3,3.7,2.5,1.9,1.9,2.3,3.3,1.3,2.2,3.8,1.9,1.7,4.2,6.4,0.5051562521,0.3,4.8,2.5,0.9,2.4
"Meats, poultry, and fish",2.2,8.5,0.9,-0.6,16.7,14.9,3.7,4.1,4.1,-0.7,1.7,-0.4,4.4,6.5,3.5,5,7.3,2.3,-0.8,3.3,1.5,0.9,3.5,2.9,-0.8,0.7,4.5,4.4,0.5,4,7.4,2.4,0.8,3.8,4.2,0.5177692529,1.922184867,7.4,3.6,2.1,7.2
Meats,1.8,8.5,0.2,-2.3,18.6,17,2.9,3.6,4.9,-1.2,0.3,-0.9,3.1,7.5,2.4,4,10.1,3.1,-1.4,3,0.6,0.1,3.5,3,-1.9,0.5,5.9,5.7,0.6,5.4,8.4,2.3,0.7,3.3,3.5,-0.6293710048,2.835563574,8.8,3.4,1.2,9.2
Beef and veal,2.9,1,-3.2,-0.7,22.9,27.4,5.7,0.8,1.4,-1.5,1.2,-2.1,0.6,7.6,5.5,6.4,8,2.8,-0.1,3.6,-0.8,-0.8,-0.3,1.7,-0.2,2,6.4,8.4,0.1,9,11.5,2.6,0.8,4.4,4.5,-1.04887087,2.858159497,10.2,6.4,2,12.1
Pork,-0.5,22.4,1.3,-5.4,12.9,1.6,-3.3,9.3,12.8,-0.9,-1.3,0.3,8.2,8.2,-3,0.6,14.7,3.3,-4.7,3.1,1.7,0.7,9.9,5.2,-4.7,-1.8,7.3,3.8,-0.4,1.9,5.6,2,-0.2,2,2.3,-1.982162697,4.737062412,8.5,0.3,0.9,9.1
Other meats,3.1,5.9,5.9,-0.6,17.7,14.7,3.8,4.3,3,-0.4,0.4,0.7,2.6,6.3,2.6,2.8,9.3,3.7,0.2,1.6,2.4,1.5,3.6,2.8,-0.9,1,2.6,2.9,3.5,2.5,4.5,2.4,1.8,2.3,3.1,2.263519334,-0.05921774429,6.4,1.7,-0.1,3.9
Poultry,-5.1,10.5,-4.1,0.7,10.4,4.9,5.2,4.1,-1.7,1.3,10.6,-1,7.5,-1.4,7.2,9.9,-0.2,-0.8,-0.1,4.2,3.4,1.4,6.2,2.8,0.3,0.5,1.2,3.2,1.3,1.3,7.5,2,-1.8,5.1,5,1.652012575,-0.1184586582,2.9,5.5,4.7,2
Fish and seafood,15.3,8.5,11.7,10.8,9.4,9.7,9.2,8.3,3.6,1.1,3.2,4.9,9.2,10.6,5.8,4.5,2.2,1.1,2.3,3.2,4.5,4.8,0.9,2.3,2.6,2,2.8,0.4,-1.6,1,2.3,3,4.7,4.6,5.9,3.63346613,1.110862459,7.1,2.4,2.5,5.8
Eggs,0.4,-1.8,9.2,-3.2,-5.4,9.5,-1.8,8.2,-2.7,4.7,11.7,-16.6,6.8,-5.9,2.3,26.6,4.7,-2.3,-10.6,8.1,-2.4,5.4,17.9,-1.5,-3.3,-5.4,3,3.4,1.3,13.8,6.2,-13.7,4.9,29.2,14,-14.67554277,1.478232383,9.2,3.2,3.3,8.4
Dairy products,18.6,3.1,8.1,2.7,6.8,11.6,9.8,7.2,1.4,1.2,1.3,1.9,0.1,2.5,2.4,6.6,9.4,-1.1,2.7,0.7,1.8,0.8,7,2.4,3.6,5.8,0.7,4,0.6,-0.1,7.3,1.2,-0.5,7.4,8,-6.361100021,1.133007635,6.8,2.1,0.1,3.6
Fats and oils,41.9,10.7,-12.5,10.1,9.6,7.9,6.7,10.6,-2.7,1.4,9.4,2.2,-2.2,1.5,4.6,7.2,4.2,4.3,-1.4,0.2,2.7,2.8,2.3,0.9,3.7,1,-0.6,5.6,-0.2,1.3,6.6,-0.1,0.2,2.9,13.8,2.273690845,-0.3165210924,9.3,6.1,-1.4,0.1
Fruits and vegetables,16.5,3.1,2.6,9.2,11.1,8,7.2,12.1,5.4,0.3,8.6,2.6,0.9,8.9,7.6,7.7,8,4.6,-0.3,2.3,3.8,7.7,3.5,2,5.7,2.5,0.7,3.7,4.1,2.3,3,3.7,4.8,3.8,6.2,-2.146607198,0.1880721929,4.1,-0.6,2.5,1.5
Fresh fruits & vegetables,7.8,2.3,2.4,13.6,12.9,7.6,7.5,12,5.6,-0.3,10.9,2.6,3,12.2,7.3,8.5,9,8.1,-1.8,4.4,4.5,10.3,2.8,1.7,7.3,2.6,0.7,3.8,4.2,2.7,3.5,3.9,5.3,3.9,5.2,-4.8,0.7,4.5,-2,3.3,1.9
Fresh fruits,8.7,6.8,-0.2,14.9,19.5,12.4,6.3,5.4,11.1,-4.2,11,10.1,2.1,11.2,8.3,6.6,12.1,13.5,-5,2.5,6.6,8.8,7,0.8,4.3,8,-3,2.6,1.9,3.3,2.8,3.7,6,4.5,4.8,-6.094589417,-0.6274586576,3.3,1,2,4.8
Fresh vegetables,7.3,-1.1,4.3,12.6,8,3,8.8,18.6,0.5,3.6,10.9,-4.3,4.1,12.9,6.3,10.7,5.6,2.2,2.3,6.6,2.3,12.1,-2,2.9,10.9,-3,4.8,5.1,6.4,2.1,4.3,4,4.6,3.2,5.6,-3.376586558,2.04438132,5.6,-5.1,4.7,-1.3
Processed fruits & vegetables,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,N/A,2.3,1.1,3.2,3.8,0.9,1.2,3.3,2.9,3.6,9.5,6.621508869,-1.301959306,2.9,3.8,0.3,0.1
Sugar and sweets,52.4,26.1,-11.3,5,12.3,7.8,23,8,-0.2,1.8,3.9,2.5,3,1.8,2.7,4.7,4.4,3.7,2.9,0.2,1.3,1.7,4.5,2.9,1.6,1.4,1.1,1.1,2.1,1.9,0.7,1.2,3.8,3.1,5.5,5.550667286,2.1879701,3.3,3.3,-1.7,-0.8
Cereals and bakery products,29.9,11.3,-2.2,1.6,9,10,12,10,4.6,3.2,4.3,3.8,2.8,3.5,6.4,8.4,5.7,4.1,3.9,3.4,4.1,2.8,3.9,2.1,2,2.2,1.8,2.9,2.2,2.4,1.6,1.5,1.8,4.4,10.2,3.150425527,-0.8385890877,3.9,2.8,1,0.2
Nonalcoholic beverages,19.3,15,19.6,50.6,5.8,5,10.7,4.3,2.7,1.9,2.5,2,5.8,-2.6,0,3.5,2,0.5,0.2,0.3,7.5,6.9,-2.4,3.7,-0.3,1,2.6,1,0,0.4,0.4,2.8,2.1,4.1,4.3,1.867760806,-0.8783964065,3.2,1.1,-1,-0.5
Other foods,21.4,12.8,4.1,3.4,8,10.1,10.9,10.3,5.2,3.1,3,3.3,2.6,4.2,3.7,6.4,4.5,4.5,2.2,2.6,2.6,2.4,3.4,3.2,2.7,2.1,2,2.2,0.6,1,0.5,1.6,1.4,1.8,5.2,3.732278774,-0.4592128255,2.3,3.5,0.5,1