Module 6 - Time Series with Multiple Values

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>SVG from Data with D3</title>
		<link rel="stylesheet" type="text/css" href="styles_M6.css">
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
 
	</head>
	<body>
 
		<header><h1>NEET</h1></header>
		<h2>Young people Not in Employment, Education or Training</h2>
 
		<h3>Intro</h3>
		<div id="intro">
		<p>Youth inactivity presents the share of <strong>young people not in employment, education or training (NEET)</strong>.</p>
		<p>Young people in education include those attending part-time or full-time education, but exclude those in non-formal education and in educational activities of very short duration.</p>
		<p class="smaller">Employment is defined according to the <abbr title="International Labour Organization">ILO</abbr> Guidelines and covers all those who have been in paid work for at least one hour in the reference week of the survey or were temporarily absent from such work. Young people who are NEET are at risk of becoming socially excluded, with income below the poverty-line and without the skills to improve their economic situation.</p>
		</div>
 
		<h3>NEET in <abbr title="Organisation for Economic Co-operation and Development">OECD</abbr> countries</h3>
		<h4>20-24 year-olds not in employment, education or training [2007 to 2013]</h4>
		<p class="chart">&uarr; % in same age group - [Source <a href="https://data.oecd.org/" target="_blank">OECD</a>]</p>
		
		<script type="text/javascript">

//SVG 
			var w = 850;
			var h = 600;
			var padding = { top: 20, right: 10,	
							bottom: 20, left: 40 }; 
							//Andrew Broman's brainchild

//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");

//Set up scales
			var xScale = d3.time.scale()
								.range([ padding.left, w - padding.right - padding.left]);
			
			var yScale = d3.scale.linear()
								.range([ padding.top, h - padding.bottom ]);

//Configure axis generators
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(7)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

var yAxis = d3.svg.axis().outerTickSize(0)
							.scale(yScale)
							.tickFormat(function(d) {
								return d + "%"})
							.orient("left")
							.ticks(8); // Right axe with percentage

//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);

d3.select("body")
				.append("p")
				.attr("class", "smaller")
				.text("Despite a significant decrease of around 15 percentage points in the proportion of young people neither employed nor in education or training (NEET) between 2009 and 2012, Turkey still has the highest proportion of NEETs among 20-24 year-olds across OECD countries. Southern Europe countries -Italy, Greece and Spain are hardly recovering from the effects of the 2007/08 financial crisis.")

//Load data
			d3.csv("neet.csv", function(data) {

//Data is loaded in, but we need to restructure it.
				//
				//	[ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
				//
				//Note that this is an array of objects. Each object
				//contains two values, 'country' and 'neet'.
				//The 'neet' 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 = [ "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].OECD_Country,
						neet: []
					};

//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 neet data array
							//for this country
							dataset[i].neet.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.neet, function(d) {
							return +d.amount + ( d.amount * 0.025);
						});
					}),
					0
				]);

//Make a group for each country
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g")
					.classed("highlight_Turkey", function(d) {
						if (d.country == "Turkey" /*||
							d.country == "Spain" ||
							d.country == "Italy" ||
							d.country == "Greece"*/) {
							return true;
						} else {
							return false;
						};
					})
					.classed("highlight_Israel", function(d) {

if (d.country == "Israel") {
							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.country;
					});

//Within each group, create a new line/path,
				//binding just the neet data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.neet ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke", "#F0F0F0")
					.attr("stroke-width", "0.5");

//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)
		            });

//Axes
				svg.append("g")
					.attr("class", "axis")
					.attr("transform", "translate(0," + (h - padding.bottom + 5 ) + ")")
					.call(xAxis)
					.append("text")
					.attr({
						"class": "label", "transform": "rotate(-90)",
						x: 20,
						y: padding.left - 45,
					})
					//.text("NEET Index")
					//.attr("font-weight", "bolder")
					;

svg.append("g")
					.attr("class", "axis")
					.attr("transform", "translate(" + ( padding.left - 5 ) + ",0)")
					.call(yAxis);

});

</script>

<p></p>
 
	
 
		<footer><hr>Rubén Valero | 2015 | Data Visualization and Infographics with D3!</footer>
	</div>
 
	</body>
</html>

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

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