All examples By author By category About

GloriaYL

Full window Github gist

Unemployment in Spain_def

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Chart with Multiple Lines</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: #F2F2F2;
				max-width: 850px;	
			}

svg {
				background-color: #F2F2F2;
			}

h1 {
				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: 18px;
				font-weight: normal;
				color: black;
				text-align:justify;
				line-height: 1.3;
				margin-top: 0em;
   				margin-bottom: 0.5em;
  			
			}

g.highlight path {
				stroke: #6E6E6E;
				stroke-width: 3;
			}

path:hover {
				stroke: #A01E0C;
				stroke-width: 4;
			}

rect:hover {
				fill: #A01E0C;
			}

circle:hover {
				fill: #A01E0C;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: #A01E0C;
				shape-rendering: crispEdges;
			}
			
			.yy.axis path,
			.yy.axis line {
				opacity: 0;
			}

.axis text {
				font-family: sans-serif;
				font-size: 13px;
				
			}

</style>
	</head>
	<body>
		<h1>UNEMPLOYMENT IN SPAIN </h1>
		
<div ID="2014"> 
	<h2> Unemployment rate in 2014 by region </h2>

<p>Unemployment is one of the greatest concerns within Spanish society. As shown in the graph below, it is a big problem in the southern regions of the country, like Andaluc&iacutea, Canarias or Extremadura, especially in the least industrialized areas. Unemployment in these regions was higher than 30% in 2014. </p>
		<p> Although unemployment in the northern regions such as  Navarra or Pa&iacutes Vasco is much lower than in the rest of the country, the figures are still very worrying: around 15% in 2014. </p>
		<script type="text/javascript">		
			
			var w2 = 600;
			var h2 = 600;
			var padding2 = [ 20, 20, 40, 250 ];
 	
			var widthScale2 = d3.scale.linear()
								.range([ 0, w2 - padding2[1] - padding2[3]  ]);

var heightScale2 = d3.scale.ordinal()
			.rangeRoundBands([ padding2[0], h2 - padding2[2] ], 0.2);

var xAxis2 = d3.svg.axis()
							.scale(widthScale2)
							.orient("bottom")
							.ticks(8)
							.tickFormat(function(d) { return d + "%"; });

var yAxis2 = d3.svg.axis()
							.scale(heightScale2)
							.orient("left");

var svg2 = d3.select("body")
						.append("svg")
						.attr("width", w2)
						.attr("height", h2);

d3.csv("Unemployment in Spain.csv", function(data2) {

data2.sort(function(a, b) {
					return d3.descending(a.Unemp_rate_14, b.Unemp_rate_14);
				});

widthScale2.domain([ 0, d3.max(data2, function(d) {
					return +d.Unemp_rate_14;
				}) ]);

heightScale2.domain(data2.map(function(d) { return d.Region; } ));

var rects = svg2.selectAll("rect")
								.data(data2)
								.enter()
								.append("rect");

rects.attr("x", padding2[3])
					.attr("y", function(d, i) {
						return heightScale2(d.Region);
					})
					.attr("width", function(d) {
						return widthScale2(d.Unemp_rate_14);
					})
					.attr("height", heightScale2.rangeBand())
					.attr("fill",function(d){if(d.Region=="Total Espanya") return "#585858"; else return "#A4A4A4";})

.append("title")
					.text(function(d) {
						return d.Region + "'s unemployment rate in 2014 was " + d.Unemp_rate_14 + "%";
					});

svg2.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding2[3] + "," + (h2 - padding2[2]) + ")")
					.call(xAxis2);

svg2.append("g")
				.attr("class", "yy axis")
				.attr("transform", "translate(" + (padding2[3] - 5) + ",0)") 
				.call(yAxis2);

});

</script>

</div ID="2014">

<h2> Evolution of the unemployment rate by region (2007-2014)</h2>
		
		
		<p> After having reached a minimum of around 8% in 2007, with the Spanish economic crisis that began in 2008 the rate of unemployment grew quickly reaching almost 26% in 2013. In regions like Andaluc&iacutea, the rate exceeded 35%. <br> It seems, however, that there was an iflection point in 2013 or 2012 in some regions and that the unemployment rate has started to slowly fall down.</p>

var w = 850;
			var h = 500;
			var padding = [ 20, 120, 50, 100 ];
 	
			var dateFormat = d3.time.format("%Y");

var xScale = d3.time.scale()
						.range([ padding[3], w - padding[1]  ]);

var yScale = d3.scale.linear()
						.range([ padding[0], h - padding[2] ]);

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

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							 .tickFormat(function(d) { return d + "%"; });

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("unemp_rate.csv", function(data) {

var years = ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

var dataset = [];

for (var i = 0; i < data.length; i++) {

dataset[i] = {
						region: data[i].Region,
						rate: []
					};

for (var j = 0; j < years.length; j++) {

if (data[i][years[j]]) {
							dataset[i].rate.push({
								year: years[j],
								amount: data[i][years[j]]
							});
					}

}
			}

//console.log(data);

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.rate, function(d) {
							return +d.amount;
						});
					}),
				0  
				]);

var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g")
					.classed("highlight", function(d) {

if (d.region == "Total Espanya" ) {
							return true;
						} else {
							return false;
						}

});

groups.append("title")
					.text(function(d) {return d.region;
					});

groups.selectAll("path")
					.data(function(d) {
						return [ d.rate ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke", "#A4A4A4")
					.attr("stroke-width", 1.5);

//prueba etiquetas

var datalabel = svg.selectAll("text")
					.data(dataset.filter(function(d) {
						return (d.region == "Andalucia" || d.region == "Canarias" || d.region == "Extremadura" || d.region == "Navarra" || d.region == "Pais Vasco" || d.region == "Total Espanya");
					}))
					.enter()
					.append("text");

datalabel.attr("x", [w - padding[1] - padding[3]+105])
							.attr("y",(function(d) {
								return yScale( d.rate[7].amount ); 
							}))

.attr("fill", "black")
							.attr("font-size", "13px")
							.attr("font-family", "Verdana")
							.attr("font-style", "normal")
							.text(function(d) {
								return d.region;
							});

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis);

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

});

</script>
	</div ID="evolution">

<div ID="unemp vs diff"> 
	<h2> Relationship between unemployment and difficulties in making ends meet  </h2>
		<p> It seems there is a correlation between the unemployment rate and the percentage of population who find it difficult to make ends meet. </br> As shown in the scatterplot below, regions with the highest unemployment rates are also those with the highest percentage of population who declare they have difficulties or great difficulties to make ends meet every month.</br>  </p>

var yScale3 = d3.scale.linear()
			.range([ padding3[0], h3 - padding3[2] ]);

var xAxis3 = d3.svg.axis()
							.scale(xScale3)
							.orient("bottom")
							  .ticks(8)
							  .tickFormat(function(d) { return d + "%"; });

var yAxis3 = d3.svg.axis()
							.scale(yScale3)
							.orient("left")
							 .tickFormat(function(d) { return d + "%"; });

var svg3 = d3.select("body")
						.append("svg")
						.attr("width", w3)
						.attr("height", h3);

d3.csv("Unemployment in Spain2.csv", function(data3) {

data3.sort(function(a, b) {
					return d3.descending(a.Unemp_rate_14, b.Unemp_rate_14);
				});

xScale3.domain([ 
					13, 
					d3.max(data3, function(d) {
					return +d.Unemp_rate_14;
				}) ]);

yScale3.domain([ 
					d3.max(data3, function(d) {
					return +d.Difficulty;
				}),
				19  ]);

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

circles.attr("cx", function(d) {return xScale3(d.Unemp_rate_14);})

.attr("cy", function(d) {
						return  yScale3(d.Difficulty);
					})
					.attr("r", 0,1)
					.attr("fill",function(d){if(d.Region=="Total Espanya") return "#585858"; else return "#A4A4A4";})

.append("title")
					.text(function(d) {
						return d.Region + "'s unemployment rate in 2014 was " + d.Unemp_rate_14 + "% and " + d.Difficulty + "% of the population found it difficult to make ends meet";
					});

circles.sort(function(a,b) {
					return d3.ascending(+a.Unemp_rate_14, +b.Unemp_rate_14);
				})
					.transition()
					.delay(function(d,i) {
						return i * 50;
					})
					.duration(2000)
					.attr("r",5);	
					
				svg3.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h3 - padding3[2]) + ")")
					.call(xAxis3);

svg3.append("text")
    				.attr("class", "xlabel")
    				.attr("text-anchor", "end")
    				.attr("x", w3 - 10)
    				.attr("y", h3 - 10)
    				.text("Unemployment rate")
					.attr("font-size", "11px")
					.attr("font-family", "Verdana");

svg3.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + (padding3[3] - 5) + ",0)") 
				.call(yAxis3);

svg3.append("text")
    				.attr("class", "ylabel")
    				.attr("text-anchor", "end")
    				.attr("y", 50)
    				.attr("x", -100)
    				.attr("transform", "rotate(-90)")
    				.text("% of population with difficulties to make ends meet")
    				.attr("font-size", "11px")
					.attr("font-family", "Verdana");

});

</script>

</div ID="unemp vs diff">

<h3> Source: Economically Active Population Survey and Living Conditions Survey. Spanish Statistical Office, <a href="https://www.ine.es">INE</a></h3>
	</body>
</html>

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

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