Skip to content

Instantly share code, notes, and snippets.

@P3nny

P3nny/index.html

Last active August 29, 2015 14:20
Show Gist options
  • Save P3nny/6150b5354be907c52323 to your computer and use it in GitHub Desktop.
Save P3nny/6150b5354be907c52323 to your computer and use it in GitHub Desktop.
Download ZIP
Youth unemployment rate in selected european countries.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Verdana;
}
svg {
background-color: white;
}
text {
fill: black;
}
.line {
fill: none;
stroke: grey;
stroke-width: 2;
opacity: 0.5;
}
.line:hover {
stroke-width: 3;
stroke: black;
opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
g.highlight_eu path {
stroke: steelblue;
stroke-width: 6;
opacity: 1;
}
g.highlight_greece path {
stroke: green;
stroke-width: 3;
opacity: 1;
}
g.highlight_germany path {
stroke: indianred;
stroke-width: 3;
opacity: 1;
}
g.highlight_spain path {
stroke: purple;
stroke-width: 3;
opacity: 1;
}
g.highlight_netherlands path {
stroke: orange;
stroke-width: 3;
opacity: 1;
}
.highlight_eu {
fill: steelblue;
text-anchor: end;
font-weight: bold;
}
.highlight_greece {
fill: green;
text-anchor: end;
font-weight: bold;
}
.highlight_germany {
fill: indianred;
text-anchor: end;
font-weight: bold;
}
.highlight_spain {
fill: purple;
text-anchor: end;
font-weight: bold;
}
.highlight_netherlands {
fill: orange;
text-anchor: end;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Youth unemployment rate in selected european countries</h2>
<p>This dataset shows the evolution of youth unemployment over the course of two decades.<br>
Thanks to <a href:"http://bl.ocks.org/alebusi/dea84684cfdbeb6f59c0">Alebusi</a>
<</p>
<script type="text/javascript">
var w = 900
var h = 500
var padding = [ 50, 50, 50, 50 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
var xScale = d3.time.scale()
.range ([ padding[1], w - padding[3] ]);
var yScale = d3.scale.linear()
.range ([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(30);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(15);
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.amount);
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("youth.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",
percentage: [
{ 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 = ["1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "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].countryName,
percentage: []
};
//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 percentage data array
//for this country
dataset[i].percentage.push({
year: years[j],
amount: data[i][years[j]]
});
}
}
}
// console.log(dataset);
//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);
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.percentage, function(d) {
return +d.amount;
});
}),
0
]);
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("highlight_eu", function(d) {
if (d.country == "European Union") {
return true;
} else {
return false;
}
})
.classed("highlight_greece", function(d) {
if (d.country == "Greece") {
return true;
} else {
return false;
}
})
.classed("highlight_germany", function(d) {
if (d.country == "Germany") {
return true;
} else {
return false;
}
})
.classed("highlight_spain", function(d) {
if (d.country == "Spain") {
return true;
} else {
return false;
}
})
.classed("highlight_netherlands", function(d) {
if (d.country == "Netherlands") {
return true;
} else {
return false;
}
});
// var labels = groups.selectAll("text")
// .data(data)
// .enter()
// .append("text");
//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 emissions data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.percentage ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line);
//Make lines get to the front on mouseover
d3.selectAll("path")
.on("mouseover", function(d) {
d3.select(this)
this.parentNode.parentNode.appendChild(this.parentNode);
})
.on("mouseout", function(d) {
d3.select(this)
});
svg.append("text")
.attr("class", "highlight_eu")
.attr("x", w)
.attr("y", padding[0] + 15)
.attr("font-size", 10)
.text("Europe");
svg.append("text")
.attr("class", "highlight_greece")
.attr("x", w )
.attr("y", padding[0] + 30)
.attr("font-size", 10)
.text("Greece");
svg.append("text")
.attr("class", "highlight_germany")
.attr("x", w)
.attr("y", padding[0] + 45)
.attr("font-size", 10)
.text("Germany");
svg.append("text")
.attr("class", "highlight_spain")
.attr("x", w)
.attr("y", padding[0] + 60)
.attr("font-size", 10)
.text("Spain");
svg.append("text")
.attr("class", "highlight_netherlands")
.attr("x", w )
.attr("y", padding[0] + 75)
.attr("font-size", 10)
.text("Netherlands");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[0]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ", 0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
youth.csv
countryName 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
Belgium 14 13 19 22 22 21 21 20 22 15 16 18 22 21 22 20 19 18 22 23 19 20 23
Bulgaria 35 28 43 41 32 28 28 25 30 33 39 36 27 24 22 19 15 13 16 23 25 28 30
Bosnia and Herzegovina 48 49 54 56 51 52 58 54 52 51 56 50 53 60 53 63 59 48 49 57 57 62 60
Switzerland 3 5 7 6 6 5 6 6 6 5 6 6 9 8 9 8 7 7 9 8 8 9 9
Cyprus 20 5 20 8 8 8 7 10 13 10 8 7 8 8 13 9 10 8 13 16 21 27 37
Czech Republic 5 7 8 9 8 7 9 13 17 17 16 16 18 20 19 18 11 10 17 19 18 20 19
Germany 6 6 8 8 8 9 10 9 9 8 8 10 11 13 15 14 12 10 11 10 8 8 8
Denmark 12 12 15 10 10 11 8 7 10 7 8 7 9 8 9 8 8 8 12 14 14 14 13
Euro area 18 19 23 25 24 25 24 22 21 19 17 18 18 19 19 17 16 17 21 22 23 26 27
Spain 30 33 42 44 42 42 39 35 29 26 21 23 23 23 20 19 19 25 39 43 47 54 57
European Union 19 19 23 24 23 23 22 21 21 20 19 20 20 20 20 19 16 16 21 22 23 25 26
Finland 15 25 31 31 27 25 23 22 20 20 19 20 20 20 19 18 16 16 20 20 19 18 20
France 19 21 25 28 27 27 29 26 26 21 18 19 18 20 21 21 19 18 23 23 22 24 24
United Kingdom 14 16 18 17 16 15 14 13 12 12 11 11 12 11 13 14 15 15 19 20 20 21 20
Greece 24 24 28 26 26 29 29 29 31 29 27 26 26 26 25 25 23 22 26 32 44 55 58
Croatia 40 26 25 25 25 26 25 30 34 39 46 36 36 33 32 29 24 22 26 34 37 44 52
Ireland 23 23 25 23 19 18 16 12 9 6 6 8 8 8 9 9 9 13 24 28 29 30 27
Italy 28 28 30 32 33 35 34 34 33 31 28 27 27 25 24 22 20 21 26 28 29 35 40
Luxembourg 3 4 5 8 7 9 7 7 7 6 6 7 11 17 14 16 15 18 17 15 17 19 19
Malta 14 14 14 14 17 14 14 12 16 12 18 15 17 18 17 16 14 12 14 13 14 14 14
Netherlands 11 8 10 11 12 11 10 9 7 5 4 5 7 8 8 7 6 5 7 9 8 10 11
Norway 13 14 14 12 12 12 10 9 9 10 10 11 12 12 12 9 7 8 9 9 9 9 9
Poland 25 27 30 32 31 28 24 23 29 35 40 43 42 41 37 29 22 17 21 23 26 26 27
Portugal 9 10 13 15 16 17 15 10 9 9 9 12 15 15 16 16 17 17 20 22 30 38 38
Romania 21 23 23 23 21 21 18 17 17 18 18 22 20 22 20 22 20 19 21 22 24 23 24
Sweden 8 14 23 23 20 22 22 17 15 12 12 13 14 17 23 22 20 21 25 25 23 24 24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment