Skip to content

Instantly share code, notes, and snippets.

@peripherie

peripherie/G7GDP.csv

Created April 25, 2015 12:08
Show Gist options
  • Save peripherie/272a7941b5c0e40a5515 to your computer and use it in GitHub Desktop.
Save peripherie/272a7941b5c0e40a5515 to your computer and use it in GitHub Desktop.
Download ZIP
G7 GDP (module6)
Raw
G7GDP.csv
COUNTRY 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019
CANADA 11212 12378 12525 13443 13849 14061 14438 16291 19001 20828 21519 21810 20877 20075 19889 20572 21203 21796 20962 22205 24128 23658 24036 28093 31925 36152 40297 44383 46465 40822 47531 51850 52489 52037 50577 52287 54056 56008 57202 57010
FRANCE 13111 11494 10858 10329 9733 10146 14003 16869 18324 18324 22599 22517 24718 23210 24395 27894 27869 25163 25950 25681 23318 23342 25226 30809 35154 36210 37900 43156 47273 43234 42249 45430 42415 44099 45384 45691 46895 48468 50107 51854
GERMANY 10699 8985 8682 8692 8222 8358 11929 14842 15904 15632 19501 22586 25551 24694 26401 30862 29725 26321 26588 25971 23000 22835 24398 29424 33090 33614 35297 40485 44398 40424 40496 45208 42569 44999 47201 48226 50097 52183 54187 56209
ITALY 8336 7547 7453 7729 7636 7882 11162 14010 15518 16128 20112 21226 22512 18087 18649 19920 22283 21097 21548 21258 19451 19745 21575 26560 30225 30918 32287 36587 39523 35875 34789 37031 33915 34715 35512 35743 36749 37911 38984 40142
JAPAN 9313 10218 9431 10216 10787 11464 16891 20367 24604 24522 25140 28542 30973 35377 38759 42516 37425 34307 30981 35014 37304 32711 31241 33718 36444 35781 34077 34038 37865 39321 42917 46175 46531 38468 37540 38522 39586 40945 42216 43504
UK 9630 9228 8746 8281 7818 8292 10071 12395 15036 15172 17900 18627 19326 17298 18680 20353 21373 23743 25275 25876 25415 25132 27370 31521 37130 38585 41044 46866 44131 35885 36891 38945 38781 39372 44141 46244 48162 50465 52946 55536
USA 12576 13966 14410 15531 17099 18232 19078 20063 21442 22879 23914 24366 25467 26442 27756 28763 30047 31554 32929 34602 36433 37241 38114 39592 41838 44218 46352 47955 48302 46909 48314 49746 51450 53001 54678 57045 59503 62118 64749 67348
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>G7 GDP OUTLOOK</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
path:hover{
cursor:pointer;
stroke:orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>G7 GDP OUTLOOK</h1>
<p>GDP per capita of G7 countries, 1980-2019. Source: <a href="https://www.imf.org/external/pubs/ft/weo/2014/02/weodata/index.aspx">IMF</a>, 2014</p>
<script type="text/javascript">
//Dimensions and padding
var w = 1000;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.amount);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load data
d3.csv("G7GDP.csv", function(data) {
//Data is loaded in, but we need to restructure it.
//Remember, each line requires an array of x/y pairs;
//that is, an array of arrays, like so:
//
// [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
//
//We, however, are using 'year' as x and 'amount' as y.
//We also need to know which country belongs to each
//line, so we will build an array of objects that is
//structured like this:
/*
[
{
country: "Australia",
GDP: [
{ year: 1961, amount: 90589.568 },
{ year: 1962, amount: 94912.961 },
{ year: 1963, amount: 101029.517 },
…
]
},
{
country: "Bermuda",
GDP: [
{ year: 1961, amount: 176.016 },
{ year: 1962, amount: 157.681 },
{ year: 1963, amount: 150.347 },
…
]
},
…
]
*/
//Note that this is an array of objects. Each object
//contains two values, 'country' and 'GDP'.
//The 'GDP' value is itself an array, containing
//more objects, each one holding 'year' and 'amount' values.
//New array with all the years, for referencing later
var years = d3.range("1980","2019");
years = years.map(function(d){
return d+"";
})
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this country's name and empty array
dataset[i] = {
country: data[i].COUNTRY,
GDP: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the GDP data array
//for this country
dataset[i].GDP.push({
year: years[j],
amount: data[i][years[j]]
});
}
}
}
//Uncomment to log the original data to the console
// console.log(data);
//Uncomment to log the newly restructured dataset to the console
// console.log(dataset);
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.GDP, function(d) {
return +d.amount;
});
}),
0
]);
//Make a group for each country
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g");
//Append a title with the country name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.country;
});
//Within each group, create a new line/path,
//binding just the GDP data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.GDP ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 3);
//Axes
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)
.append("text")
.attr({
"class": "labels",
"transform": "rotate(-90)",
x: -h/2-10,
y: -50,
})
.text("GDP per capita in US$");
});
//End USA data load function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment