All examples By author By category About

alebusi

Full window Github gist

Final exercise, about youth unemployment.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="https://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.1;
			}

.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: 3;
				opacity: 1;
			}

g.highlight_me path {
				stroke: green;
				stroke-width: 3;
				opacity: 1;
			}

g.highlight_la path {
				stroke: indianred;
				stroke-width: 3;
				opacity: 1;
			}

g.highlight_ss path {
				stroke: purple;
				stroke-width: 3;
				opacity: 1;
			}

g.highlight_na path {
				stroke: orange;
				stroke-width: 3;
				opacity: 1;
			}

g.highlight_ea path {
				stroke: red;
				stroke-width: 3;
				opacity: 1;
			}

.highlight_eu {
				fill: steelblue;
				text-anchor: end;
				font-weight: bold;
			}

.highlight_me {
				fill: green;
				text-anchor: end;
				font-weight: bold;

}

.highlight_la {
				fill: indianred;
				text-anchor: end;
				font-weight: bold;

}

.highlight_ss {
				fill: purple;
				text-anchor: end;
				font-weight: bold;
			}

.highlight_na {
				fill: orange;
				text-anchor: end;
				font-weight: bold;
			}

.highlight_ea {
				fill: red;
				text-anchor: end;
				font-weight: bold;
			}

</style>
	</head>
	<body>

<h2>Youth unemployment rate across the world</h2>
		<p>This dataset shows the evolution of youth unemployment over the course of two decades. It would be interesting to further explore the subject and research the reasons behind ups and downs.</p>

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("sl.uem.1524.zs_Indicator_en_excel_v2.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_me", function(d) {

if (d.country == "Middle East & North Africa (all income levels)") {
							return true;
						} else {
							return false;
						}

})

.classed("highlight_la", function(d) {

if (d.country == "Latin America & Caribbean (all income levels)") {
							return true;
						} else {
							return false;
						}

})

.classed("highlight_ss", function(d) {

if (d.country == "Sub-Saharan Africa (all income levels)") {
							return true;
						} else {
							return false;
						}

})

.classed("highlight_na", function(d) {

if (d.country == "North America") {
							return true;
						} else {
							return false;
						}

})

.classed("highlight_ea", function(d) {

if (d.country == "East Asia & Pacific (all income levels)") {
							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 - padding[1])
		    	.attr("y", padding[0] + 15)
		    	.attr("font-size", 10)
		    	.text("Europe");

svg.append("text")
		    	.attr("class", "highlight_me")
		    	.attr("x", w - padding[1])
		    	.attr("y", padding[0] + 30)
		    	.attr("font-size", 10)
		    	.text("North Africa and Middle East");

svg.append("text")
		    	.attr("class", "highlight_la")
		    	.attr("x", w - padding[1])
		    	.attr("y", padding[0] + 45)
		    	.attr("font-size", 10)
		    	.text("South America");

svg.append("text")
		    	.attr("class", "highlight_ss")
		    	.attr("x", w - padding[1])
		    	.attr("y", padding[0] + 60)
		    	.attr("font-size", 10)
		    	.text("Sub-Saharan Africa");

svg.append("text")
		    	.attr("class", "highlight_na")
		    	.attr("x", w - padding[1])
		    	.attr("y", padding[0] + 75)
		    	.attr("font-size", 10)
		    	.text("North America");

svg.append("text")
		    	.attr("class", "highlight_ea")
		    	.attr("x", w - padding[1])
		    	.attr("y", padding[0] + 90)
		    	.attr("font-size", 10)
		    	.text("East Asia and Pacific");

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js