Skip to content

Instantly share code, notes, and snippets.

@MariellaCC
Last active November 2, 2015 00:17
Show Gist options
  • Save MariellaCC/79be0eb5fda6fc640a4e to your computer and use it in GitHub Desktop.
Save MariellaCC/79be0eb5fda6fc640a4e to your computer and use it in GitHub Desktop.
Ghg emissions' evolution by country, 2012 - scatterplot
Country annee1990 annee1991 annee1992 annee1993 annee1994 annee1995 annee1996 annee1997 annee1998 annee1999 annee2000 annee2001 annee2002 annee2003 annee2004 annee2005 annee2006 annee2007 annee2008 annee2009 annee2010 annee2011 annee2012 evolution
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 -1.44
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 -6.59
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 -26.99
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 -6.14
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 -33.91
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 -30.25
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 -44.20
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 -20.20
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 -20.95
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 -27.10
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.01 -3.10
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 -33.58
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 0.29
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 -19.09
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 -16.94
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 5.41
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 -34.00
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 -19.27
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 -4.83
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 -11.61
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 -15.50
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 7.39
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 -42.84
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 -0.33
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 1.10
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 -28.82
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 -17.89
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 71.05
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 -32.62
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 -17.05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<title>Ghg emissions' evolution by country, 2012</title>
<style type="text/css">
body {
margin: 0;
background-color: steelBlue;
font-family: Verdana, Arial, sans-serif;
}
h1 {
color: grey;
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 20px 0;
}
a {
color: steelBlue;
text-decoration: none;
}
a:hover {
color: grey;
text-decoration: underline;
}
.title {
display: block;
max-width: 300px;
color: blue;
}
svg {
background-color: white;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 1px 1px 2px 3px #fff;
}
circle:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
circle {
cursor: pointer;
}
#tooltip {
pointer-events: none;
background-color: white;
}
</style>
</head>
<body>
<div id="container">
<h1>Greenhouse gas (GHG) emissions' evolution by country</h1>
<p>GHG emissions' evolution between 1990 and 2012&nbsp;(%). Source: <a href="http://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en#">OECD</a>.</p>
</div>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(8);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return d + "%";
});
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("evolution.csv", function(data) {
xScale.domain([
d3.min(data, function(d) {
return +d.annee2012;
}),
d3.max(data, function(d) {
return +d.annee2012;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.evolution;
}),
d3.min(data, function(d) {
return +d.evolution;
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.annee2012);
})
.attr("cy", function(d) {
return yScale(d.evolution);
})
.attr("r", 0.2)
.attr("fill", "steelblue")
.attr("opacity", 0.6)
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("cx")) + 10;
var yPosition = parseFloat(d3.select(this).attr("cy"));
//Position the tooltip, set it's text contents, then make it visible
tooltip.attr("x", xPosition)
.attr("y", yPosition)
.text(d.Country + "'s GHG emissions evolved by " + d.evolution + " % between 1990 and 2012")
.attr("opacity", 1)
})
.on("mouseout", function(d) {
tooltip.attr("opacity", 0);
});
circles.sort(function(a, b) {
return d3.ascending(+a.annee2012, +b.annee2012);
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(2000)
.attr("r", 4);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
.call(yAxis);
});
var tooltip = svg.append("text")
.attr("id", "tooltip")
.attr("x", 0)
.attr("y", 0)
.attr("text-anchor", "start")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr("opacity", 0)
.text("");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment