Skip to content

Instantly share code, notes, and snippets.

@scotthmurray
Forked from MariellaCC/evolution.csv
Last active November 1, 2015 16:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scotthmurray/4073dae7c46d4427e589 to your computer and use it in GitHub Desktop.
Save scotthmurray/4073dae7c46d4427e589 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;
}
/* Scott added this */
circle {
cursor: pointer;
}
#tooltip {
pointer-events: none;
}
</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). 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")
.on("mouseover", function(d) {
//Scott edited this section
//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"));
//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. In 2012, GHG emissions' amount for " + d.Country + " were at a level of " + d.annee2012 + " thousands kg per capita.")
.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);
//Scott added this section
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