Skip to content

Instantly share code, notes, and snippets.

@wwwebb42
Created April 5, 2015 20:35
Show Gist options
  • Save wwwebb42/13926181542fe5ff6280 to your computer and use it in GitHub Desktop.
Save wwwebb42/13926181542fe5ff6280 to your computer and use it in GitHub Desktop.
First D3 bar chart of emissions data
Country Year totalEmissions emissionsPerCapita
Australia 2012 543648.448 23.966
Austria 2012 80059.363 9.497
Belgium 2012 116520.315 10.471
Canada 2012 698626.468 20.029
Czech Republic 2012 131466.115 12.51
Denmark 2012 53118.009 9.5
Estonia 2012 19188.429 14.435
Finland 2012 60965.731 11.261
France 2012 496221.214 7.812
Germany 2012 939083.308 11.464
Greece 2012 110985.473 10.005
Hungary 2012 61980.663 6.249
Iceland 2012 4467.73 13.93
Ireland 2012 58531.237 12.763
Italy 2012 460083.45 7.603
Japan 2012 1343117.721 10.533
Luxembourg 2012 11839.24 22.298
Netherlands 2012 191668.699 11.44
New Zealand 2012 76047.982 17.155
Norway 2012 52733.242 10.507
Poland 2012 399267.97 10.361
Portugal 2012 68751.894 6.539
Russia 2012 2295045.375 16.041
Slovak Republic 2012 42710.198 7.898
Slovenia 2012 18910.982 9.197
Spain 2012 340808.593 7.383
Sweden 2012 57604.15 6.051
Switzerland 2012 51449.018 6.467
Turkey 2012 439873.724 5.851
United Kingdom 2012 584304.295 9.172
United States 2012 6487847.054 20.668
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Greenhouse gas emissions in 2012</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type = "text/css">
svg{background-color : #f0f0f0;}
</style>
</head>
<body>
<h1> Greenhouse gas emissions in 2012 by country </h1>
<script type="text/javascript">
// Add the SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 400);
// Load the greenhouse gas data
d3.csv("greenhouseGasData2012.csv", function(data) {
// Sort the data
data.sort(function(a,b) {return d3.descending(+a.totalEmissions, +b.totalEmissions);});
// Create rectangles
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
// Set rectangle attributes
rects.attr("x", 0)
.attr("y", function(d, i) {return i*12;})
.attr("width", function(d) {return d.totalEmissions / 12000;})
.attr("height", 10)
.attr("fill", "blue")
.append("title")
.text(function(d) {return "Total emissions for " + d.Country + " in 2012 are "
+ Math.round(d.totalEmissions / 1000, 0) + " million tonnes CO2 equivalent.";});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment