Skip to content

Instantly share code, notes, and snippets.

@MariellaCC

MariellaCC/evolution.csv

Last active July 9, 2016 10:09
Download ZIP
Ghg emission's evolution by country, 2012 (v2)
Raw
evolution.csv
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
Raw
index.html
<!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: 18px;
font-weight: bold;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 20px 0;
}
.source {
font-size: 11px;
}
.source a {
color: black;
text-decoration: none;
border-bottom: 1px dotted rgba(0, 0, 0, 0.8);
}
.source a:hover {
color: rgba(0, 0, 0, 0.4);
text-decoration: none;
border-bottom: 1px dotted;
}
.title {
display: block;
max-width: 300px;
color: blue;
}
svg {
background-color: white;
}
#container {
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 20px;
background-color: white;
box-shadow: 1px 1px 2px 3px #fff;
position: relative;
}
circle:hover {
fill: orange;
cursor:pointer;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
h2 {
padding: 0 0 15px 0;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
line-height: 0;
margin: 0;
}
.figure {
font-weight: bold;
padding-left: 10px;
}
table {
padding: 0;
text-align: left;
padding: 0;
font-size: 10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Greenhouse gas (GHG) emissions' evolution by country</h1>
<p>GHG emissions' evolution between 1990 and 2012&nbsp;(%) and their level per capita and by country (Kilograms per capita, thousands, 2012).
</br>
<p>Hover over a point to display information.</p>
<span class="source">Source: <a class="source" href="http://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en#">OECD</span></a></p>
<div id="tooltip" class="hidden">
<p><span id="value">100</span></p>
</div>
</div>
<script type="text/javascript">
var w = 600;
var h = 400;
var padding = [ 20, 10, 20, 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")
.ticks(8)
.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([
0,
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;
}) - 10
]);
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "circle");
var circles = groups.append("circle")
.attr("cx", padding [3])
.attr("cy", h - padding[2])
.attr("r", 0.2)
.attr("fill", "steelblue");
svg.selectAll("circle")
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("cx"));
var yPosition = parseFloat(d3.select(this).attr("cy"));
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.html("<h2>" + d.Country + "</h2><table><tr class='ligne'><td class='bordure'>Evolution (%, 1990-2012):</td><td class='figure'>" + d.evolution + "</span></td></tr><td class='bordure'>Emissions (thousands kg/capita, 2012):</td><td class='figure'>" + d.annee2012 + "</span></td></tr></table>")
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
});
circles.sort(function(a, b) {
return d3.ascending(+a.annee2012, +b.annee2012);
})
.transition()
.attr("cx", function(d) {
return xScale(d.annee2012);
})
.attr("cy", function(d) {
return yScale(d.evolution);
})
.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]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
svg.append("line")
.attr("x1", padding[3])
.attr("y1", function(d) {
return yScale(0);
})
.attr("x2", w - padding[1] - padding[3])
.attr("y2", function(d) {
return yScale(0);
})
.attr("stroke", "#000000")
.attr("opacity", 0.1);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment