Skip to content

Instantly share code, notes, and snippets.

@MelanieJulien
Created April 19, 2015 23:46
Show Gist options
  • Save MelanieJulien/f563283b7f5b9fcdc684 to your computer and use it in GitHub Desktop.
Save MelanieJulien/f563283b7f5b9fcdc684 to your computer and use it in GitHub Desktop.
Scatterplot GHG (total and per capita)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 3 exercice</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #EBEFEB;
}
h {
font-size: 30px;
font-family: arial;
margin: 2;
}
p {
font-size: 14px;
font-family: arial;
margin: 15px 0 0 0;
}
svg {
background-color: #EBEFEB;
}
circle:hover {
fill: #635C5C;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: arial;
font-size: 12px;
}
</style>
</head>
<body>
<h1>GHG emissions in the world in 2012<h1/>
<p>Countries are ranked by total greenhouse gases (GHG) emissions (tonnes of CO2 equivalent), and per capita (thousand kgs). Based on <a href="http://stats.oecd.org/">OECD data.<a/></p>
<p>Overall, we can see that the United States are far away from the others, and Australia has a high level of greenhouse gas emissions per person, but a low total emissions. </p>
<script type="text/javascript">
var w = 900;
var h = 600;
var padding = [7, 10, 30, 95 ]; //top - 0, right - 1, bottom - 2, left - 3
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] ]);
var yScale = d3.scale.linear()
.range ( [ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10)
.tickFormat(function(d)
{ return d + " kg ";
})
;
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(7)
.tickFormat(function(d)
{ return d + " t. ";
})
;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("melaniejuliendata.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.GHG2012,
+b.GHG2012);
});
xScale.domain( [
d3.min(data, function(d) {
return +d.GHGin2012;
}),
d3.max(data, function(d) {
return +d.GHGin2012;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.totalGHG;
}),
d3.min(data, function(d) {
return +d.totalGHG;
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", -100)
.attr("cy", function(d, i) {
return yScale(d.totalGHG);
})
.attr("r", 0,1)
.attr("fill", "#D11919")
.append("title")
.text(function(d) {
return d.Country + "'s total GHG emissions in 2012 are " + d.totalGHG +" tonnes of CO2 equivalent, and emissions per capita are "+ d.GHGin2012 +" thousand kg";
});
circles.transition()
.duration(2000)
.attr("cx", function(d) {
return xScale(d.GHGin2012);
})
.attr ("fill", "#006600")
.attr ("r", 4);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Country GHGin1990 GHGin1991 GHGin1992 GHGin1993 GHGin1994 GHGin1995 GHGin1996 GHGin1997 GHGin1998 GHGin1999 GHGin2000 GHGin2001 GHGin2002 GHGin2003 GHGin2004 GHGin2005 GHGin2006 GHGin2007 GHGin2008 GHGin2009 GHGin2010 GHGin2011 GHGin2012 totalGHG
Australia 24.32 24.1 24.05 23.93 23.7 24.17 24.21 24.61 25.15 25.34 25.57 25.88 25.63 25.45 25.79 25.67 25.6 25.6 25.47 24.85 24.48 24.26 23.97 543648.45
Austria 10.17 10.59 9.62 9.55 9.62 10.03 10.4 10.33 10.24 10.01 10.02 10.48 10.64 11.33 11.21 11.25 10.85 10.48 10.42 9.58 10.11 9.85 9.5 80059.36
Belgium 14.34 14.49 14.31 14.16 14.68 14.83 15.19 14.31 14.82 14.17 14.23 14.11 14.01 14.01 14.05 13.56 13.12 12.56 12.68 11.41 11.96 10.88 10.47 80059.36
Canada 21.34 20.8 21.15 20.99 21.46 21.81 22.33 22.6 22.66 22.9 23.51 23.02 22.95 23.39 23.28 22.82 22.34 22.76 21.94 20.44 20.49 20.33 20.03 698626.47
Czech Republic 18.93 17.67 16.05 15.44 14.46 14.69 15.08 14.73 14.05 13.33 14.25 14.31 14 14.29 14.43 14.26 14.32 14.26 13.63 12.79 13.03 12.89 12.51 131466.12
Denmark 13.62 15.62 14.4 14.77 15.48 14.77 17.15 15.28 14.51 13.96 13.1 13.35 13.2 14.07 12.93 12.1 13.51 12.62 11.91 11.32 11.36 10.42 9.5 53118.01
Estonia 25.88 23.98 17.86 14.22 14.98 13.97 14.64 14.53 13.57 12.64 12.44 12.77 12.38 13.82 14.11 13.63 13.25 15.61 14.58 12.1 14.88 15.34 14.44 19188.43
Finland 14.11 13.59 13.23 13.58 14.58 13.85 14.93 14.61 13.88 13.74 13.37 14.34 14.73 16.22 15.41 13.08 15.17 14.8 13.2 12.36 13.87 12.41 11.26 60965.73
France 9.88 10.25 10.04 9.54 9.51 9.63 9.85 9.73 9.96 9.66 9.56 9.47 9.32 9.34 9.25 9.21 8.96 8.76 8.64 8.22 8.3 7.85 7.81 496221.21
Germany 15.72 15.02 14.28 14.06 13.78 13.69 13.88 13.42 13.11 12.7 12.66 12.83 12.54 12.51 12.36 12.06 12.17 11.87 11.93 11.14 11.58 11.36 11.46 939083.31
Greece 10.33 10.19 10.22 10.04 10.22 10.32 10.53 10.91 11.37 11.31 11.59 11.65 11.6 11.91 11.91 12.19 11.82 12.03 11.64 11 10.51 10.31 10. 110985.47
Hungary 9.41 8.65 7.69 7.75 7.66 7.6 7.83 7.7 7.7 7.78 7.49 7.69 7.57 7.86 7.83 7.77 7.69 7.52 7.31 6.68 6.76 6.62 6.25 61980.66
Iceland 13.89 13.08 12.56 12.67 12.32 12.4 12.67 13.14 13.48 14.14 13.88 13.58 13.57 13.41 13.44 13.04 14.43 14.84 15.73 14.97 14.61 13.92 13.93 4467.73
Ireland 15.77 15.9 15.78 15.81 16.12 16.36 16.82 17.06 17.62 17.7 17.99 18.23 17.43 17.18 16.83 16.82 16.3 15.59 15.15 13.73 13.58 12.62 12.76 58531.24
Italy 9.15 9.17 9.11 9.06 8.89 9.35 9.22 9.32 9.5 9.61 9.64 9.72 9.71 9.98 10.02 9.88 9.64 9.43 9.11 8.2 8.32 8.07 7.6 460083.45
Japan 9.99 10.04 10.09 10.03 10.52 10.64 10.72 10.65 10.28 10.43 10.56 10.34 10.58 10.59 10.55 10.57 10.43 10.68 10.03 9.46 9.81 10.22 10.53 1343117.72
Luxembourg 33.79 34.75 33.71 33.55 31.04 24.91 24.72 22.73 20.35 21.05 22.38 23.23 24.74 25.2 28.08 28.15 27.39 25.75 24.94 23.47 24.16 23.39 22.3 1343117.72
Netherlands 14.17 14.36 14.17 14.39 14.3 14.44 14.9 14.39 14.36 13.49 13.38 13.37 13.22 13.21 13.24 12.83 12.58 12.47 12.36 11.97 12.6 11.69 11.44 191668.7
New Zealand 18.03 17.63 17.84 17.54 17.61 17.55 17.85 18.28 17.57 17.99 18.38 18.97 18.83 19.07 18.64 18.94 18.68 18.03 17.75 16.94 16.83 16.89 17.16 76047.98
Norway 11.89 11.34 10.86 11.25 11.63 11.53 12.18 12.11 12.07 12.22 12.04 12.25 11.93 12.03 12.07 11.78 11.65 11.89 11.42 10.73 11.12 10.76 10.51 52733.24
Poland 12.26 11.97 11.58 11.57 11.46 11.53 11.86 11.64 10.89 10.62 10.35 10.27 9.95 10.3 10.43 10.45 10.86 10.9 10.65 10.16 10.58 10.53 10.36 399267.97
Portugal 6.09 6.29 6.74 6.61 6.7 7.12 6.87 7.14 7.59 8.34 8.17 8.09 8.45 7.87 8.14 8.35 7.85 7.61 7.39 7.08 6.68 6.57 6.54 68751.89
Slovak Republic 13.82 11.95 10.89 10.18 9.69 9.93 9.99 9.76 9.62 9.42 9.08 9.57 9.28 9.43 9.48 9.36 9.37 9 9.11 8.3 8.42 8.28 7.9 42710.2
Slovenia 9.23 8.65 8.62 8.77 8.87 9.33 9.66 9.86 9.76 9.42 9.52 9.95 10.01 9.85 10.01 10.15 10.22 10.24 10.57 9.49 9.47 9.48 9.2 18910.98
Spain 7.3 7.53 7.72 7.43 7.83 8.18 7.98 8.29 8.51 9.12 9.44 9.26 9.56 9.58 9.77 9.94 9.62 9.63 8.74 7.83 7.54 7.5 7.38 18910.98
Sweden 8.5 8.46 8.35 8.31 8.53 8.4 8.82 8.24 8.29 7.91 7.73 7.8 7.85 7.87 7.75 7.41 7.35 7.13 6.84 6.36 6.94 6.43 6.05 57604.15
Switzerland 7.88 8.03 7.91 7.44 7.26 7.33 7.39 7.24 7.41 7.37 7.21 7.31 7.1 7.2 7.24 7.29 7.2 6.88 7.02 6.76 6.91 6.32 6.47 57604.15
Turkey 3.42 3.58 3.72 3.85 3.71 4 4.28 4.44 4.41 4.35 4.64 4.29 4.35 4.54 4.62 4.82 5.06 5.45 5.19 5.15 5.52 5.71 5.85 439873.73
United Kingdom 13.61 13.69 13.24 12.88 12.68 12.53 12.86 12.41 12.36 11.8 11.78 11.83 11.47 11.54 11.59 11.42 11.31 11.08 10.53 9.74 9.93 8.95 9.17 439873.73
United States 24.92 24.49 24.54 24.74 24.7 24.78 25.29 25.19 24.9 24.84 25.08 24.49 24.38 24.33 24.58 24.46 23.97 24.19 23.32 21.65 22.16 21.56 20.67 6487847.05
Russia 22.69 21.43 18.12 17.2 15.4 14.85 14.44 13.75 13.53 13.81 13.99 14.21 14.29 14.62 14.93 14.88 15.38 15.43 15.71 14.9 15.54 15.98 16.04 2295045.38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment