Module 5 - Two Dimensional Data

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>SVG from Data with D3</title>
		<link rel="stylesheet" type="text/css" href="stylesM5.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 atcivities 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 and GDP</h3>
		
		<p class="chart">Correlation between GDP per capita and NEET index [Source <a href="https://data.oecd.org/" target="_blank">OECD</a>, 2013]</p>

//SVG SCATTERPLOT
			var w = 700;
			var h = 437;
			var padding = { 
				top: 20, 
				right: 10,	
				bottom: 30, 
				left: 120
				}; //Andrew Broman's brainchild (padding.top, padding.right etc)

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

var xAxis = d3.svg.axis()
							.scale(xScale)
							.tickFormat(function(d) {
								return d + "%"})
							.orient("bottom") // xScale labels 
							.outerTickSize(0);

var yAxis = d3.svg.axis()
							.scale(yScale)
							.tickFormat(d3.format("s"))
							.orient("left")
							.outerTickSize(0);

var svg = d3.select("body")
							.append("svg")
							.attr("width", w)
							.attr("height", h);

d3.csv("neet_def_gdp.csv", function(data) {

xScale.domain([ 
					0, 
					d3.max(data, function(d) { return +d.neet_2013 + (+d.neet_2013 * 0.05) ; }) 
				]);

yScale.domain([ d3.max(data, function(d) {
					return +d.gdpPerCap_2013 + (+d.gdpPerCap_2013 * 0.05);
					}),
					0
				]);

var circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");

circles.attr("cx", function(d) {
						return xScale(d.neet_2013);
					})
					.attr("cy", function(d) {
						return yScale(d.gdpPerCap_2013);
					})
					.attr("r", 0.3)
					.append("title")
					.text(function(d) {
						return d.OECD_Country + "\n" + "NEET: " + d.neet_2013 + "%" + "\n" + "GDP per capita: $" + d3.format("0,000")(d.gdpPerCap_2013);
					});

circles.sort(function(a, b) {
						return d3.ascending(+a.neet_2013, +b.neet_2013);
					})
					.transition()
					.delay( function(d, i) {
						return i * 50;
					})
					.duration(300)
						.attr("cx", function(d) {
						return xScale(d.neet_2013);
					})
					.attr("cy", function(d) {
						return yScale(d.gdpPerCap_2013);
					})
					.attr("r", 3)

//Labelling two countries "manually"
				//Max and Min neet values
				svg.append("text")
				      .style("font-size", "0")
				      .transition()
				      .duration(700)
				      .attr("x", d3.min(data, function(d) { 
				      		return xScale(+d.neet_2013) + 10; 
				      	}))
				      .attr("y", d3.min(data, 
				      	function(d) {
				      		return yScale(+d.gdpPerCap_2013);
						}))
				      .style("font-size", "10")
   				      .attr("class", "title")
				      .text("Luxembourg");

svg.append("text")
				      .style("font-size", "0")
				      .transition()
				      .delay(1300)
				      .duration(700)
				      .attr("x", d3.max(data, function(d) { 
				      		return xScale(+d.neet_2013) -40; 
				      	}))
				      .attr("y", d3.max(data, 
				      	function(d) {
				      		return yScale(+d.gdpPerCap_2013);
						}))
				      .style("font-size", "10")
   				      .attr("class", "title")
				      .text("Turkey");

//MouseOver/Out -> circles
		        d3.selectAll("circle")
		            .on("mouseover", function(d) {
		                    d3.select(this).transition().duration(100)
		                    .attr("r", 5)
		                    .style("fill", "#BB131A");
		            })
		            .on("mouseout", function(d) {
		                    d3.select(this).transition().duration(100)
		                    .attr("r", 3)
		                    .style("fill", "#67A8CD");
		            });

//Axis + axis labelling
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding.bottom) + ")")
					.call(xAxis)
					.append("text")
					.attr({
						"class": "label", "transform": "rotate(-90)",
						x: 0,
						y: padding.left - 45,
					})
					.text("GDP per capita (US dollars)")
					.attr("font-weight", "bolder");

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding.left + ",0)")
					.call(yAxis)
					.append("text")
					.attr({
						"class": "label", "transform": "translate(0," + ((h + padding.bottom - 20) + ")")
					})
					.text("20-24 year-olds (% in same age group)")
					.attr("font-weight", "bolder");

});

</script>
 
		<p class="smaller">Research shows that disengagement at this age is disastrous in personal terms; causes problems in the community in the form of nuisance and crime; leads to long-term costs in increased criminality, welfare dependency, housing and a wide range of social and economic factors. Without help, countries with a high NEET index will not possibly break that vicious circle</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