Skip to content

Instantly share code, notes, and snippets.

@timsny

timsny/GDPperHour_2.csv

Created May 1, 2015 21:48
Show Gist options
  • Save timsny/2ff128645c850758987b to your computer and use it in GitHub Desktop.
Save timsny/2ff128645c850758987b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
GDPperHour_2.csv
Location 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
Australia 40.622 40.992 41.269 41.624 41.903 42.176 42.998 42.847 43.699 45.195 45.772
Austria 40.093 40.853 41.77 42.862 43.87 43.905 43.827 44.446 44.914 45.364 45.696
Belgium 50.007 51.396 51.875 52.341 52.884 52.657 51.982 52.73 52.462 52.322 52.497
Canada 39.399 39.526 40.482 40.921 40.913 40.889 41.24 41.857 42.276 42.276 42.739
Chile 14.243 14.884 15.743 16.295 16.965 17.299 17.407 17.896 18.326 19.19 19.859
Czech Republic 23.318 24.368 25.443 27.1 28.244 28.306 27.599 28.197 28.731 28.855 28.754
Denmark 43.4 44.82 45.508 46.077 46.158 45.487 44.607 46.739 46.685 46.912 46.879
Estonia 16.183 17.229 18.241 19.274 20.784 20.024 20.42 21.514 21.359 22.381 22.705
Finland 39.128 40.387 41.119 42.123 43.419 42.957 40.957 42.294 42.971 42.286 42.597
France 47.318 47.647 48.264 49.646 49.571 49.21 48.9 49.668 50.273 50.622 50.862
Germany 46.578 47.047 47.76 48.684 49.427 49.505 48.226 49.424 50.403 50.723 50.914
Greece 28.014 28.832 28.097 29.35 30.188 29.741 28.939 28.98 26.89 28.224 28.346
Hungary 19.01 20.032 20.938 21.712 21.724 22.323 21.552 21.73 21.933 22.556 22.824
Iceland 32.714 35.273 36.385 36.308 38.63 38.692 40.937 40.225 40.081 40.676 40.786
Ireland 44.389 45.174 45.31 45.784 46.373 45.967 47.528 49.689 51.991 52.007 50.63
Israel 28.22 29.508 29.931 30.933 31.309 31.368 31.317 32.212 32.711 32.846 33.213
Italy 38.136 38.516 38.735 38.738 38.706 38.453 37.616 38.472 38.665 38.359 38.379
Japan 32.256 33.05 33.464 33.695 34.268 34.342 34.045 35.389 35.4 35.553 36.066
Korea 19.953 20.796 21.694 22.578 23.931 25.118 25.526 27.372 29.19 28.34 29.885
Luxembourg 61.926 63.519 65.357 65.952 66.66 63.918 64.183 68.414 70.708 68.309 68.994
Mexico 14.779 15.024 14.929 15.485 15.84 15.353 15.438 14.681 15.119 15.218 15.103
Netherlands 48.449 49.21 50.467 51.4 52.046 52.264 51.264 52.19 52.562 51.86 52.3
New Zealand 27.542 27.444 27.748 27.917 28.678 28.156 29.463 29.171 29.532 30.436 30.165
Norway 63.819 65.119 65.846 65.253 64.052 61.901 62.135 62.381 62.067 62.607 62.633
Poland 17.069 17.741 18.03 18.543 19.051 19.147 19.728 21.069 22.004 22.423 22.854
Portugal 23.485 24.002 24.271 24.706 25.092 25.224 25.155 25.967 26.32 26.449 26.702
Russia 11.24 11.896 12.514 13.339 14.119 14.792 14.128 14.64 15.041 15.385 15.591
Slovak Republic 22.706 23.341 24.091 25.478 27.363 27.919 27.167 28.519 28.974 29.489 30.44
Slovenia 29.251 30.238 32.331 34.226 35.681 35.583 33.342 34.261 35.562 35.371 35.247
Spain 35.415 35.503 35.635 35.843 36.27 36.414 37.307 38.178 38.786 39.738 40.415
Sweden 41.838 43.299 44.414 45.891 46.028 45.212 44.141 45.605 45.913 45.844 46.295
Switzerland 40.232 40.522 41.572 42.589 43.505 43.701 42.795 43.562 43.481 43.721 44.487
Turkey 18.009 19.577 20.58 21.536 22.6 22.49 21.562 22.254 22.964 22.849 23.411
United Kingdom 42.023 42.964 43.221 44.245 44.951 45.01 43.919 44.575 45.099 44.512 44.487
United States 49.586 50.87 51.87 52.287 52.802 53.207 54.747 56.276 56.394 56.653 56.882
Raw
mod6_work2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Conditional Styling</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 {
stroke: gray;
stroke-width: 0.5;
}
g.highlight path {
stroke: steelblue;
stroke-width: 2;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Productivity</h1>
<p>GDP per Hour Worked for OECD countries from 2003 to 2013. Source: <a href="https://data.oecd.org/lprdty/gdp-per-hour-worked.htm">OECD</a>, 2013</p>
<script type="text/javascript">
//Dimensions and padding
var w = 700;
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(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(7)
.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 USA data
d3.csv("GDPperHour_2.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",
emissions: [
{ year: 1961, amount: 90589.568 },
{ year: 1962, amount: 94912.961 },
{ year: 1963, amount: 101029.517 },
…
]
},
{
country: "Bermuda",
emissions: [
{ 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 'emissions'.
//The 'emissions' 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 = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"];
//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].Location,
GDP_Hour: []
};
//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 emissions data array
//for this country
dataset[i].GDP_Hour.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_Hour, function(d) {
return +d.amount;
});
}),
0
]);
//Make a group for each country
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("highlight", function(d) {
if (d.country == "Korea" ||
d.country == "Norway") {
return true;
} else {
return false;
}
});
//Append a title with the country name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.Location;
});
//Within each group, create a new line/path,
//binding just the emissions data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.GDP_Hour ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke-width", 2)
;
//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);
});
//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