Skip to content

Instantly share code, notes, and snippets.

@ajzeigert
Created August 26, 2015 00:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ajzeigert/70945a9e8222390aa6da to your computer and use it in GitHub Desktop.
Save ajzeigert/70945a9e8222390aa6da to your computer and use it in GitHub Desktop.
Module 2 exercise, SVG drawing and load CSV file
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
<!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