Created
August 26, 2015 00:33
-
-
Save ajzeigert/70945a9e8222390aa6da to your computer and use it in GitHub Desktop.
Module 2 exercise, SVG drawing and load CSV file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Loading CSV Data with D3</title> | |
<script type="text/javascript" src="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment