Ongoing Unemployment Project

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bar Chart, Framed</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		
		<style type="text/css">
			
			body {
				margin: 0;
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}
			div {
				/*background-color: #F2F2F2;*/
				background-color: white;
			}
			#UnemploymentProject {
				height: 200px;
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				/*box-shadow: 3px 3px 5px 6px #ccc;*/
			}
			#Part1{
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				/*box-shadow: 3px 3px 5px 6px #ccc;*/
			}
			#UnemploymentRate{
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				/*box-shadow: 3px 3px 5px 6px #ccc;*/
			}
			#Part2{
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				/*box-shadow: 3px 3px 5px 6px #ccc;*/
			}
			#Scatter{
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				/*box-shadow: 3px 3px 5px 6px #ccc;*/
			}
			h1 {
				margin: 0;
				font-family: Helvetica, Arial, sans-serif;
				font-size: 48px;
				font-weight: bold;
				color: #A01E0C;
				border-bottom: solid 8px #A01E0C;
			}
			h2 {
				font-family: Helvetica, Arial, sans-serif;
				font-size: 24px;
				font-weight: bold;
				color: black;
				text-align:justify;				
			}
			h3 {
				font-family: Helvetica, Arial, sans-serif;
				font-size: 16px;
				font-weight: normal;
				font-style: italic;
				color: black;				
			}
			p {
				font-family: Helvetica;
				font-size: 12px;
				font-weight: normal;
				color: black;
				text-align:justify;
				line-height: 1.3;
				margin: 15px 0 10px 0;
				margin-top: 0em;
   				margin-bottom: 0.5em;
			}
			a:link {
				text-decoration: none;
				color: gray;
			}
			a:hover {
				text-decoration: underline;
			}
			a:visited {
				color: gray;
			}
			a:active {
				color: steelBlue;
			}
			svg {
				background-color: white;
			}
			g.bar{
				cursor:pointer;
			}
			g.bar text {
				font-size: 9px;
				/*font-weight: bold;*/
				text-anchor: end;
				opacity: 0;
				fill: white;
			}
			rect:hover {
				fill: #A01E0C;
				opacity: 1;
				color: white;
			}
			g.bar:hover text{
				cursor:pointer;
				opacity: 1;
				color: white;
			}
			.line-label {
				opacity: 1;
				color: black;
				font-size: 10px;
				font-weight: bold;
			}
			.highlight path {
				stroke: rgb(205,10,30);
				stroke-width: 3;
			}
			
			g.circle text {
				font-size: 11px;
				font-weight: bold;
				text-anchor: end;
				opacity: 0;
			}
			g.circle{
				cursor:pointer;
			}
			g.circle:hover {
				fill: #A01E0C;
			}
			g.circle:hover text {
				opacity: 1;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 9px;
			}
			.y.axis path,
			.y.axis line {
				opacity: 0;
			}
			.y2.axis path,
			.y2.axis line {
				opacity: 1;
			}
			/*
			input[type="button"]:hover{
    			border: 1px solid #999;color:#0000ff;
			}
			input[type="button"]:active{
    			border: 1px solid #999;color:#0000ff;
			}
			*/
			#buttons{
				width: 300px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 10px;
				padding: 50px;
				background-color: white;
				height: 10px;
			}
			#YVarSel{
				width: 600px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 10px;
				padding: 50px;
				background-color: white;
				height: 5px;
			}
			#XVarSel{
				width: 800px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 10px;
				padding: 50px;
				background-color: white;
				height: 5px;
			}
			.click {
				padding: 5px 10px;
    			border: 1px solid;
    			background: white;
    			margin: 5px 10px;
    			/*border-radius: 5px;*/
    			cursor: pointer;
    			transition: background .2s;
    			outline: 0;
			}
			.click:hover { 
				background: rgb(182,86,100);
				border-color: rgb(205,10,30);
				color: white;
			}
			.click.active {
    			background: rgb(140,60,70);
    			background: rgb(205,10,30);
    			color: white;
    			font-weight: bold;
			}
			.variableX {
				padding: 5px 10px;
    			border: 1px solid;
    			background: white;
    			margin: 5px 10px;
    			/*border-radius: 5px;*/
    			cursor: pointer;
    			transition: background .2s;
    			outline: 0;
			}
			.variableX:hover { 
				background: rgb(182,86,100);
				border-color: rgb(205,10,30);
				color: white;
			}
			.variableX.active {
    			background: rgb(140,60,70);
    			background: rgb(205,10,30);
    			color: white;
    			font-weight: bold;
			}
			.variableY {
				padding: 5px 10px;
    			border: 1px solid;
    			background: white;
    			margin: 5px 10px;
    			/*border-radius: 5px;*/
    			cursor: pointer;
    			transition: background .2s;
    			outline: 0;
			}
			.variableY:hover { 
				background: rgb(182,86,100);
				border-color: rgb(205,10,30);
				color: white;
			}
			.variableY.active {
    			background: rgb(140,60,70);
    			background: rgb(205,10,30);
    			color: white;
    			font-weight: bold;
			}
			.selection{
				height: 45px;
			}
		</style>
	</head>
	<body>

<h1>Unemployment Rate in Spain</h1>
		<h2>A visual explanation of the regional differences of unemployment in Spain</h2>

<p>(Use this two buttons to switch from CCAA to Province)</p>

</div>

<h1> Unemployment level</h2>

</div>

<h2> The code below shows the unemployment rate in Spain for the last quarter of 2015.</h2>
				<p>As we can see, not only the unemployment level in Spain is quite high but there is also a lot of variability among regions regarding that variable. Among the potential candidates to explain it, we selected three variables that we think correlate with low productivity of the labor force: construction sector importance, public sector share of the employent and low education attaintment.</p>

</div>

<h1>Potential Explanation</h1>

</div>

</div>
    	<div id="YVarSel">

</div>

<h2> The code below shows the relationship between the unemployment rate and the long term unemployemnt in Spain during the last quarter of 2015 and the level of three variables back at the end of 2005, that is, just before the great recession started.</h2>

<p> Although causality is a tough animal to domesticate, a couple of interesting facts arise. For instance, with the exception of Melilla, the highest the proportion of people working in construction (a proxy for the relevance of this activity in the region), the highest the unemployment rate today. The share of employment in the public sector does not seems to explain anything about the current unemployment and finally, those regions with the highest share of people in the work force without having completed the high school are the ones with the highest rate of unemployment, and does a particular good fit in the case of long term unemployment (Long term unemployment refers to the share of people unemployed for two years or more. ). That is, two variables, relevance of construction in the region up to the crisis and low education attaintment seems to be good candidates to explain the variability we observe in the unemployment rate in Spain.</p>

</div>

//Scatter Plot
	var xScale2 = d3.scale.linear()
							.range([padding.left, w - padding.right - padding.left ]);
	var yScale2 = d3.scale.linear()
						.range([padding.top, h - padding.bottom]);
	var xAxis2 = d3.svg.axis()
					.scale(xScale2)
					.orient("bottom")
					.ticks(5);
	var yAxis2 = d3.svg.axis()
					.scale(yScale2)
					.orient("left")
					.ticks(5);
	var svg2 = d3.select("#Scatter")
						.append("svg")
						.attr("id", "chart2")
						.attr("width", w)
						.attr("height", h);
	var groups2 = d3.select("#chart2")
							.append('g')
							.attr("class", "chart");
		svg2.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate (0," + (h - padding.bottom + 3) + ")")
                .append("text")
				.attr("class", "label")
				.attr("x", w - padding.left)
				.attr("y", padding.bottom - 5)
                .style("text-anchor", "end")
                .text(function(d){return changeLabel(currentScatterX) + " %"});
				
	    svg2.append("g")
                .attr("class", "y2 axis")
                .attr("transform", "translate(" + (padding.left - 5) + ",0)")
				.append("text")
				.attr("class", "label")
				.attr("x", 15)
				.attr("y", 15)
                .style("text-anchor", "end")
                .text(function(d){return changeLabel(currentScatterY) + " %"});
                //console.log(currentScatterY);
                //console.log(scatterY[0]);
                //console.log(changeLabel(currentScatterY));
	function drawscatter(data){	
			data.sort(function(a, b) {
				return d3.descending(+a[currentScatterY], +b[currentScatterY]);
			});
			yScale2.domain([
				d3.max(data, function(d){return +d[currentScatterY];}), 
				d3.min(data, function(d){return +d[currentScatterY];}) 
			]);
			xScale2.domain([
				d3.min(data, function(d){return +d[currentScatterX];}), 
				d3.max(data, function(d){return +d[currentScatterX];}) 
			]);
			//console.log(data);
			var balls = groups2.selectAll(".circle")
							.data(data)
							//.enter()
							//.append('circle')
							.attr("cy", function(d){
								return yScale2(d[currentScatterY]);
							})
							.attr("cx", function(d){
								return xScale2(d[currentScatterX]);
							})
							.attr("r", 3)
							.attr("fill", function(d) {
								if (d.id1 === "Espanya") {
									return "rgb(205, 10, 30)";}
								else 
									{return "steelblue";}
							})
							.text(function(d) {
                		        return d[currentScatterY] + d[currentScatterX] + "%";
		                    });
				balls.enter().append("g").attr("class", "circle");						
				balls.append('circle')
						.attr("cy", (h - padding.bottom + 3))
							.attr("cx", 0)
							.attr("r", 0)
							.attr("fill", function(d) {
								if (d.id1 === "Espanya") {
									return "rgb(205, 10, 30)";}
								else 
									{return "steelblue";}
							});
				balls.selectAll('circle')
       		        	.transition()
                    	.delay(function(d, i) {
                        	return i * 5;
	                    })
    	                .duration(2000)
						.attr("cy", function(d){
								return yScale2(d[currentScatterY]);
							})
						.attr("cx", function(d){
								return xScale2(d[currentScatterX]);
							})
						.attr("r", 3)
						.attr("fill", function(d) {
								if (d.id1 === "Espanya") {
									return "rgb(205, 10, 30)";}
								else 
									{return "steelblue";}
						});
				balls.append("text")
					.attr("x", function(d) {
						return xScale2(+d[currentScatterX]);
					})
					.attr("y", function(d) {
						return yScale2(+d[currentScatterY] + 0.0005);
					})
					.text(function(d) {
						return d.id1;
					});
				balls.exit().remove();

svg2.select('.x.axis')
			//.text(function(d){return changeLabel(currentScatterX)})
			.call(xAxis2)
			.select("text")
			.text(function(d){return changeLabel(currentScatterX) + " %"});
			svg2.select('.y2.axis')
			//.text(function(d){return changeLabel(currentScatterY)})
			.call(yAxis2)
			.select("text")
			.text(function(d){return changeLabel(currentScatterY) + " %"});
	}

function toggle_visibility(id){
		var e = document.getElementById(id);
		if (e.style.display !== 'none'){
			e.style.display = 'none';
		}
		else{
			e.style.display = 'block';
			}
		}

function updateScatter(){
		if (auxRegion === "Provincia"){
			d3.csv("scatterProv.csv", 
				drawscatter);
			}
		else if (auxRegion === "CCAA"){
	    	d3.csv("scatterCCAA.csv", 
				drawscatter);
			}
		}

d3.csv("tasaaturCCAA.csv", 
				//function(data) {
				//  console.log(data);})
				drawbars);
    	d3.csv("scatterCCAA.csv", 
				//function(data) {
				//  console.log(data);})
				drawscatter);

setRegion();

setVar(scatterX, scatterY);

</script>

<p class="source"> Source: Spanish National Institute of Statistics <a href="https://www.ine.es/dyngs/INEbase/es/operacion.htm?c=Estadistica_C&cid=1254736176918&menu=resultados&secc=1254736030639&idp=1254735976595">Active Population Survey Microdata </a> The raw data comes from the <a href="www.ine.es">Spanish National Statistics Institute (INE)</a>. In order to convert the raw data into an csv output that could be easily managed by D3, I made use of R, particularly the <a href = "https://www.rstudio.com/wp-content/uploads/2015/02/data-wrangling-cheatsheet.pdf"> tidyr and dplyr packages</a>. The R code can be found here. This is just a first step of a much ambicious that will try to characterize unemployment in Spain. So far, the code produces a bar chart with the unemployment rate by CCAA (first level of government) and by province (second level) and a stacked area chart with the total number of unemployed since 2005 by province or CCAA. The objective is to add more features to the html.
		</p>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js