<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Unemployment rate in Europe</title>
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #F0F0F0;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
color: #FF007F;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: #F0F0F0;
}
path {
stroke: #333333;
stroke-width: 1;
opacity: 0.5;
}
path:hover {
stroke: #FF007F;
stroke-width: 3;
opacity: 0.9;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Unemployment in Europe</h1>
<p>Unemployment rate in Europe, December each year 2004-2014. Source: <a href="//ec.europa.eu/eurostat/web/products-datasets/-/ei_lmhr_m">Eurostat</a>, 2014</p>
<script type="text/javascript">
//Dimensions and padding
var w = 700;
var h = 500;
var padding = [ 30, 10, 50, 30 ]; //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")
.ticks(15)
.tickFormat(function(d) {
return d + "%";
});
//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("unemployment.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",
u_rates: [
{ year: 1961, amount: 90589.568 },
{ year: 1962, amount: 94912.961 },
{ year: 1963, amount: 101029.517 },
…
]
},
{
country: "Bermuda",
u_rates: [
{ 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 'u_rates'.
//The 'u_rates' 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 = ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];
//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,
u_rates: []
};
//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 u_rates data array
//for this country
dataset[i].u_rates.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.u_rates, 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 u_rates data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.u_rates ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.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>country,2014,2013,2012,2011,2010,2009,2008,2007,2006,2005,2004
Austria,5.6,5.5,5.1,4.7,4.5,5.2,4.7,4.3,5.0,5.7,5.4
Belgium,8.5,8.5,8.4,7.2,7.7,8.2,7.0,7.3,7.9,8.4,8.1
Bulgaria,10.9,12.9,12.5,11.7,11.4,8.4,5.3,6.1,8.2,9.7,11.5
Cyprus,16.4,16.5,13.8,9.7,6.0,6.6,3.8,3.8,4.3,5.4,5.2
Czech Republic,5.9,6.7,7.1,6.5,7.0,7.5,4.7,4.9,6.4,7.8,8.1
Germany,4.8,5.1,5.3,5.5,6.5,7.5,7.2,8.1,9.4,10.7,10.7
Denmark,6.2,7.2,7.3,7.6,7.7,6.9,4.4,3.3,3.8,4.1,5.3
Estonia,6.4,8.5,9.5,10.9,14.1,16.8,9.0,4.1,5.1,6.8,9.5
Greece,26.0,27.3,26.4,21.7,14.8,10.7,8.7,8.1,9.0,9.7,10.4
Spain,23.6,25.6,26.0,22.9,20.3,19.0,14.8,8.8,8.2,8.7,10.3
Finland,8.8,8.4,7.9,7.5,8.0,8.7,6.8,6.5,7.3,8.1,8.7
France,10.3,10.2,10.2,9.4,9.2,9.5,8.0,7.4,8.4,9.1,8.9
Croatia,16.3,17.0,17.8,14.1,12.3,9.8,9.0,10.1,10.6,12.2,13.4
Hungary,7.3,8.7,10.9,11.1,11.1,10.7,8.4,8.0,7.4,7.4,6.5
Ireland,10.2,12.1,14.0,15.1,15.0,13.1,8.6,5.0,4.4,4.3,4.4
Iceland,4.5,5.3,5.7,6.5,7.5,7.5,4.8,2.5,2.6,2.7,2.8
Italy,12.7,12.5,11.4,9.6,8.1,8.4,6.8,6.5,6.2,7.6,7.8
Lithuania,10.0,11.4,12.7,14.1,17.4,16.6,9.0,4.1,5.0,6.9,10.3
Luxemburg,5.9,6.0,5.4,4.9,4.8,4.8,5.2,4.2,4.6,4.7,4.9
Latvia,10.6,11.6,13.8,15.3,18.1,20.3,10.5,5.5,6.6,8.7,11.9
Malta,5.8,6.5,6.3,6.6,6.8,6.9,6.2,6.0,6.5,6.9,6.9
Netherlands,7.2,7.7,6.4,5.4,5.0,5.0,3.7,3.9,4.6,5.7,5.9
Norway,3.7,3.6,3.5,3.2,3.4,3.3,2.9,2.4,2.8,4.3,4.4
Poland,8.2,10.0,10.4,9.9,9.5,9.0,7.0,8.2,11.9,16.6,18.3
Portugal,13.6,15.1,17.3,14.4,12.2,11.3,9.3,8.8,9.2,8.8,8.3
Romania,6.6,7.1,6.8,7.2,6.9,7.0,5.7,5.8,7.2,6.7,7.8
Sweden,7.6,8.1,8.1,7.8,8.0,9.0,6.8,6.0,6.4,7.7,7.5
Slovenia,9.7,9.9,9.7,8.5,7.9,6.5,4.3,4.7,5.4,6.9,6.3
Slovakia,12.5,14.0,14.4,14.0,13.9,14.4,9.1,10.5,12.1,15.4,17.6
United Kingdom,5.5,7.1,7.7,8.3,7.8,7.6,6.4,5.0,5.4,5.1,4.7