Skip to content

Instantly share code, notes, and snippets.

@jkeohan
Last active August 29, 2015 14:18
Show Gist options
  • Save jkeohan/5f71e26acda4aef041d1 to your computer and use it in GitHub Desktop.
Save jkeohan/5f71e26acda4aef041d1 to your computer and use it in GitHub Desktop.
D3_Course_Mod1_SimpleShapes
<!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>
</head>
<body>
<svg width="500" height="500">
<text x="10" y="50" fill="charcoal" font-size="30" font-weight="bold" font-family="Helvetica">Circles and Rectangles</text>
<circle cx="50" cy="140" r="5" fill="rgba(0,0,204,0.75)" stroke="rgba(153,0,0,0.25)" stroke-width="20"/>
<circle cx="90" cy="120" r="10" fill="rgba(0,0,204,0.75)" stroke="rgba(153,0,0,0.25)" stroke-width="10"/>
<circle cx="90" cy="160" r="10" fill="rgba(0,0,204,0.75)" stroke="rgba(153,0,0,0.25)" stroke-width="10"/>
<circle cx="130" cy="100" r="15" fill="rgba(0,0,204,0.75)" stroke="rgba(153,0,0,0.25)" stroke-width="5"/>
<circle cx="130" cy="140" r="15" fill="rgba(0,0,204,0.75)" stroke="rgba(153,0,0,0.25)" stroke-width="5"/>
<circle cx="130" cy="180" r="15" fill="rgba(0,0,204,0.75)" stroke="rgba(153,0,0,0.25)" stroke-width="5"/>
<rect x="160" y="85" width="25" height="100" fill="rgba(0,0,204,0.75)"/>
<rect x="160" y="95" width="25" height="100" fill="rgba(153,0,0,0.25)"/>
<rect x="200" y="85" width="25" height="75" fill="rgba(0,0,204,0.75)"/>
<rect x="200" y="115" width="25" height="80" fill="rgba(153,0,0,0.25)"/>
<rect x="240" y="85" width="25" height="55" fill="rgba(0,0,204,0.75)"/>
<rect x="240" y="140" width="25" height="55" fill="rgba(153,0,0,0.25)"/>
</svg>
<script type="text/javascript">
Load in contents of CSV file
d3.csv("renewable-energy-perc-of-total-energy-generation.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);
});
</script>
</body>
</html>
Location 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012
Australia 6.2 6 5.8 5.7 5.8 5.8 5.8 4.6 4.8 5.1 4.6
Austria 21.3 18.7 19.7 21 22.1 24.1 25.3 27.8 27.2 26.6 29.5
Belgium 1.3 1.5 1.6 2 2.3 2.7 3.1 3.8 4.2 4.9 5.1
Brazil 39.4 42 42.3 42.9 43.3 44.4 44.5 45.8 44 42.7 42.2
Canada 16.9 15.6 15.6 15.9 15.7 16.2 16.8 17.5 17.1 18 17.9
Chile 26.2 24.8 24.2 25.1 25.3 23.5 24.4 26.1 22 23.1 24.1
China (People's Republic of) 18.4 16.2 14.5 13.7 12.8 12.5 12.6 12.1 11.4 10.7 9.8
Czech Republic 3.7 3.4 3.8 4 4.2 4.7 4.9 5.8 6.3 6.9 7.5
Denmark 11 11.9 13.6 15 14.2 16.1 16.7 17.8 20 22.2 24.4
Estonia 11.7 11.2 11.4 11.4 10.5 10.7 11.9 15.2 15.3 14.8 14.5
Finland 22.4 21.3 23.4 23.6 23.3 23.5 25.8 24 25.4 26.1 29.1
France 5.8 5.8 5.8 5.7 5.9 6.3 7.1 7.5 7.9 7.2 7.9
Germany 3.2 3.8 4.4 5 5.8 7.9 8 8.8 9.9 10 10.7
Greece 4.9 5.3 5.3 5.4 5.9 5.7 5.6 6.4 7.7 7.9 8.7
Hungary 3.4 3.5 3.6 4.3 4.5 5.1 6 7.4 7.6 7.6 8
Iceland 75 75.2 74.8 75.9 78.4 81.6 81.3 81.8 82.5 83.8 84.7
India 33.2 32.9 31.7 31.2 30.4 29.9 28.9 26.8 26.5 26.5 26.4
Indonesia 37.3 37.4 35.5 34.9 34.7 35.3 36.2 34.8 33.9 33.6 33.4
Ireland 1.8 1.7 2 2.5 2.9 3.2 3.9 4.6 4.7 6.2 6.1
Israel 3.6 3.5 3.8 4 3.7 3.7 4.7 5 5 4.9 4.8
Italy 5.8 6 6.6 6.3 6.9 6.7 7.7 9.7 10.6 11.9 13.2
Japan 3.2 3.4 3.3 3.2 3.4 3.2 3.3 3.4 3.9 4.2 4.2
Korea 0.4 0.5 0.5 0.5 0.6 0.6 0.6 0.7 0.7 0.7 0.7
Luxembourg 1.1 1 1.2 1.6 1.8 3.1 3.1 3.3 3.1 2.9 3.2
Mexico 10.2 10.2 10.4 10.3 9.9 9.9 10 9.5 9.8 9.3 8.7
Netherlands 1.9 1.8 2.1 2.7 3 3 3.5 4 3.8 4.3 4.3
New Zealand 29.8 29.7 31.3 31.6 32 32.2 32.9 35.8 38.9 40.4 38.3
Norway 49.5 38.2 40 48.5 42.6 46.5 44.9 40.9 36.1 42.8 46.9
Poland 4.7 4.6 4.7 4.8 4.8 5 5.7 6.7 7.2 7.8 8.8
Portugal 13.7 16.9 14.7 13.1 17.1 17.7 17.7 19.9 23.3 22.3 21.2
Russia 2.8 2.7 2.9 2.9 2.8 2.9 2.6 2.8 2.5 2.4 2.3
Slovak Republic 4 3.5 4 4.3 4.5 5.3 5.1 6.8 7.4 7.4 7.6
Slovenia 10.5 10.3 11.5 10.6 10.5 10.1 11 14.2 14.7 13.1 13.9
South Africa 12.1 11.3 10.5 10.7 11 10.2 9.7 10.1 10.3 10.5 10.6
Spain 5.4 6.9 6.3 5.9 6.5 7 7.6 9.7 11.7 11.7 11.9
Sweden 25.3 24.5 25 28.8 28.7 30.5 31.5 34.8 33.9 32.1 35.6
Switzerland 16.8 16.8 16.4 16 15.5 17.8 17.8 17.8 19 18.1 20.5
Turkey 13.5 12.9 13.3 12 11.1 9.6 9.5 10.2 11.1 10 10.2
United Kingdom 1.2 1.2 1.5 1.8 1.9 2.2 2.6 3.2 3.3 4.1 4.5
United States 4 4.3 4.4 4.5 4.8 4.7 5.1 5.4 5.6 6.1 6.3
European Union (28 countries) 5.7 5.9 6.3 6.5 6.9 7.6 8.2 9.2 10 10.2 10.5
World 12.7 12.6 12.4 12.4 12.4 12.5 12.7 13.1 13 13 13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment