GloriaYL/Unemployment in Spain.csv

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Chart with Multiple Lines</title>
		<script type="text/javascript" src="http://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">


		<div ID="evolution">

		<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>


		<script type="text/javascript">


			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>


<script type="text/javascript">

			var w3 = 700;
			var h3 = 550;
			var padding3 = [ 20, 20, 50, 120 ];

			var xScale3 = d3.scale.linear()
								.range([ padding3[3], w3 - padding3[1]  ]);

			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="http://www.ine.es">INE</a></h3>
	</body>
</html>

## unemp_rate.csv

          
            Region
            2007
            2008
            2009
            2010
            2011
            2012
            2013
            2014

            
              Total Espanya
              8.6
              13.9
              18.8
              20.2
              22.7
              25.9
              25.8
              23.8

            
              Andalucia
              14.0
              21.7
              26.4
              28.1
              31.2
              35.8
              36.4
              34.4

            
              Aragon
              5.2
              9.8
              13.6
              16.4
              16.9
              18.9
              20.7
              18.8

            
              Asturias
              8.0
              10.1
              14.2
              16.7
              19.0
              24.0
              22.5
              20.9

            
              Balears
              9.4
              12.0
              19.6
              21.9
              25.7
              24.5
              22.7
              19

            
              Canarias
              11.0
              21.1
              27.0
              28.9
              30.6
              32.8
              33.2
              31.3

            
              Cantabria
              4.8
              8.9
              12.8
              14.8
              16.1
              19.3
              19.9
              18.5

            
              Castilla y Leon
              7.0
              11.5
              14.3
              15.9
              17.3
              20.8
              22.1
              20.4

            
              Castilla La Mancha
              8.2
              15.1
              19.4
              21.8
              24.6
              30.2
              29.1
              28.6

            
              Catalunya
              6.5
              11.8
              17.0
              18.0
              20.6
              24.0
              22.0
              20

            
              Comunitat Valenciana
              9.0
              14.7
              22.2
              22.7
              24.9
              27.7
              27.3
              23.6

            
              Extremadura
              14.9
              18.2
              21.4
              24.1
              28.4
              34.1
              32.5
              30.1

            
              Galicia
              7.6
              9.7
              12.9
              15.7
              18.3
              21.3
              22.1
              21

            
              Madrid
              6.5
              10.1
              14.6
              15.7
              18.1
              19.5
              20.5
              18.1

            
              Murcia
              8.3
              15.4
              21.9
              24.6
              26.4
              29.6
              28.7
              27.3

            
              Navarra
              4.3
              8.2
              10.6
              11.8
              13.9
              17.3
              16.5
              15

            
              Pais Vasco
              5.9
              8.5
              12.2
              11.0
              13.3
              16.7
              16.7
              16.7

            
              Rioja La
              5.9
              9.8
              13.8
              15.7
              18.7
              18.9
              20.3
              17.3

## Unemployment in Spain.csv

          
            Region
            Active_pop_14
            Unemp_14
            Unemp_rate_07
            Unemp_rate_08
            Unemp_rate_09
            Unemp_rate_10
            Unemp_rate_11
            Unemp_rate_12
            Unemp_rate_13
            Unemp_rate_14
            Unemp_rate_14_(16-25yo)
            long-term_unemp_14
            Difficulty

            
              Total Espanya
              23026800
              5457700
              8.6
              13.9
              18.8
              20.2
              22.7
              25.9
              25.8
              23.8
              51.8
              61.4
              38.8

            
              Andalucia
              4077600
              1395700
              14.0
              21.7
              26.4
              28.1
              31.2
              35.8
              36.4
              34.4
              59.0
              60.3
              48.2

            
              Aragon
              647200
              120700
              5.2
              9.8
              13.6
              16.4
              16.9
              18.9
              20.7
              18.8
              48.3
              52.9
              36.2

            
              Asturias
              473700
              98400
              8.0
              10.1
              14.2
              16.7
              19.0
              24.0
              22.5
              20.9
              45.5
              61.8
              23.5

            
              Balears
              589900
              111400
              9.4
              12.0
              19.6
              21.9
              25.7
              24.5
              22.7
              19.0
              44.1
              46.2
              33.5

            
              Canarias
              1100800
              342200
              11.0
              21.1
              27.0
              28.9
              30.6
              32.8
              33.2
              31.3
              59.0
              68.1
              44.2

            
              Cantabria
              278000
              51200
              4.8
              8.9
              12.8
              14.8
              16.1
              19.3
              19.9
              18.5
              47.3
              62.1
              43.3

            
              Castilla y Leon
              1155300
              234300
              7.0
              11.5
              14.3
              15.9
              17.3
              20.8
              22.1
              20.4
              53.6
              64.2
              29.0

            
              Castilla La Mancha
              993500
              283100
              8.2
              15.1
              19.4
              21.8
              24.6
              30.2
              29.1
              28.6
              62.3
              65.3
              41.0

            
              Catalunya
              3804600
              756500
              6.5
              11.8
              17.0
              18.0
              20.6
              24.0
              22.0
              20.0
              45.9
              59.7
              36.5

            
              Comunitat Valenciana
              2424800
              569400
              9.0
              14.7
              22.2
              22.7
              24.9
              27.7
              27.3
              23.6
              50.2
              64.7
              40.2

            
              Extremadura
              506600
              151800
              14.9
              18.2
              21.4
              24.1
              28.4
              34.1
              32.5
              30.1
              56.6
              57.0
              44.6

            
              Galicia
              1264300
              263800
              7.6
              9.7
              12.9
              15.7
              18.3
              21.3
              22.1
              21.0
              50.1
              59.1
              37.7

            
              Madrid
              3401400
              612300
              6.5
              10.1
              14.6
              15.7
              18.1
              19.5
              20.5
              18.1
              46.4
              62.0
              37.0

            
              Murcia
              722100
              196900
              8.3
              15.4
              21.9
              24.6
              26.4
              29.6
              28.7
              27.3
              58.4
              60.9
              50.0

            
              Navarra
              310700
              46400
              4.3
              8.2
              10.6
              11.8
              13.9
              17.3
              16.5
              15.0
              39.1
              58.2
              20.7

            
              Pais Vasco
              1048600
              174100
              5.9
              8.5
              12.2
              11.0
              13.3
              16.7
              16.7
              16.7
              43.2
              64.3
              24.2

            
              Rioja La
              154000
              26400
              5.9
              9.8
              13.8
              15.7
              18.7
              18.9
              20.3
              17.3
              42.7
              61.7
              32.0

## Unemployment in Spain2.csv

          
            Total Espanya
            23026800
            5457700
            8.6
            13.9
            18.8
            20.2
            22.7
            25.9
            25.8
            23.8
            51.8
            61.4
            38.8

            
              Andalucia
              4077600
              1395700
              14.0
              21.7
              26.4
              28.1
              31.2
              35.8
              36.4
              34.4
              59.0
              60.3
              48.2

            
              Aragon
              647200
              120700
              5.2
              9.8
              13.6
              16.4
              16.9
              18.9
              20.7
              18.8
              48.3
              52.9
              36.2

            
              Asturias
              473700
              98400
              8.0
              10.1
              14.2
              16.7
              19.0
              24.0
              22.5
              20.9
              45.5
              61.8
              23.5

            
              Balears
              589900
              111400
              9.4
              12.0
              19.6
              21.9
              25.7
              24.5
              22.7
              19.0
              44.1
              46.2
              33.5

            
              Canarias
              1100800
              342200
              11.0
              21.1
              27.0
              28.9
              30.6
              32.8
              33.2
              31.3
              59.0
              68.1
              44.2

            
              Cantabria
              278000
              51200
              4.8
              8.9
              12.8
              14.8
              16.1
              19.3
              19.9
              18.5
              47.3
              62.1
              43.3

            
              Castilla y Leon
              1155300
              234300
              7.0
              11.5
              14.3
              15.9
              17.3
              20.8
              22.1
              20.4
              53.6
              64.2
              29.0

            
              Castilla La Mancha
              993500
              283100
              8.2
              15.1
              19.4
              21.8
              24.6
              30.2
              29.1
              28.6
              62.3
              65.3
              41.0

            
              Catalunya
              3804600
              756500
              6.5
              11.8
              17.0
              18.0
              20.6
              24.0
              22.0
              20.0
              45.9
              59.7
              36.5

            
              Comunitat Valenciana
              2424800
              569400
              9.0
              14.7
              22.2
              22.7
              24.9
              27.7
              27.3
              23.6
              50.2
              64.7
              40.2

            
              Extremadura
              506600
              151800
              14.9
              18.2
              21.4
              24.1
              28.4
              34.1
              32.5
              30.1
              56.6
              57.0
              44.6

            
              Galicia
              1264300
              263800
              7.6
              9.7
              12.9
              15.7
              18.3
              21.3
              22.1
              21.0
              50.1
              59.1
              37.7

            
              Madrid
              3401400
              612300
              6.5
              10.1
              14.6
              15.7
              18.1
              19.5
              20.5
              18.1
              46.4
              62.0
              37.0

            
              Murcia
              722100
              196900
              8.3
              15.4
              21.9
              24.6
              26.4
              29.6
              28.7
              27.3
              58.4
              60.9
              50.0

            
              Navarra
              310700
              46400
              4.3
              8.2
              10.6
              11.8
              13.9
              17.3
              16.5
              15.0
              39.1
              58.2
              20.7

            
              Pais Vasco
              1048600
              174100
              5.9
              8.5
              12.2
              11.0
              13.3
              16.7
              16.7
              16.7
              43.2
              64.3
              24.2

            
              Rioja La
              154000
              26400
              5.9
              9.8
              13.8
              15.7
              18.7
              18.9
              20.3
              17.3
              42.7
              61.7
              32.0
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Line Chart with Multiple Lines</title>
	<script type="text/javascript" src="http://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">


	<div ID="evolution">

	<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>


	<script type="text/javascript">




	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>


	<script type="text/javascript">

	var w3 = 700;
	var h3 = 550;
	var padding3 = [ 20, 20, 50, 120 ];

	var xScale3 = d3.scale.linear()
	.range([ padding3[3], w3 - padding3[1] ]);

	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="http://www.ine.es">INE</a></h3>
	</body>
	</html>
Region	2007	2008	2009	2010	2011	2012	2013	2014
Total Espanya	8.6	13.9	18.8	20.2	22.7	25.9	25.8	23.8
Andalucia	14.0	21.7	26.4	28.1	31.2	35.8	36.4	34.4
Aragon	5.2	9.8	13.6	16.4	16.9	18.9	20.7	18.8
Asturias	8.0	10.1	14.2	16.7	19.0	24.0	22.5	20.9
Balears	9.4	12.0	19.6	21.9	25.7	24.5	22.7	19
Canarias	11.0	21.1	27.0	28.9	30.6	32.8	33.2	31.3
Cantabria	4.8	8.9	12.8	14.8	16.1	19.3	19.9	18.5
Castilla y Leon	7.0	11.5	14.3	15.9	17.3	20.8	22.1	20.4
Castilla La Mancha	8.2	15.1	19.4	21.8	24.6	30.2	29.1	28.6
Catalunya	6.5	11.8	17.0	18.0	20.6	24.0	22.0	20
Comunitat Valenciana	9.0	14.7	22.2	22.7	24.9	27.7	27.3	23.6
Extremadura	14.9	18.2	21.4	24.1	28.4	34.1	32.5	30.1
Galicia	7.6	9.7	12.9	15.7	18.3	21.3	22.1	21
Madrid	6.5	10.1	14.6	15.7	18.1	19.5	20.5	18.1
Murcia	8.3	15.4	21.9	24.6	26.4	29.6	28.7	27.3
Navarra	4.3	8.2	10.6	11.8	13.9	17.3	16.5	15
Pais Vasco	5.9	8.5	12.2	11.0	13.3	16.7	16.7	16.7
Rioja La	5.9	9.8	13.8	15.7	18.7	18.9	20.3	17.3
Region	Active_pop_14	Unemp_14	Unemp_rate_07	Unemp_rate_08	Unemp_rate_09	Unemp_rate_10	Unemp_rate_11	Unemp_rate_12	Unemp_rate_13	Unemp_rate_14	Unemp_rate_14_(16-25yo)	long-term_unemp_14	Difficulty
Total Espanya	23026800	5457700	8.6	13.9	18.8	20.2	22.7	25.9	25.8	23.8	51.8	61.4	38.8
Andalucia	4077600	1395700	14.0	21.7	26.4	28.1	31.2	35.8	36.4	34.4	59.0	60.3	48.2
Aragon	647200	120700	5.2	9.8	13.6	16.4	16.9	18.9	20.7	18.8	48.3	52.9	36.2
Asturias	473700	98400	8.0	10.1	14.2	16.7	19.0	24.0	22.5	20.9	45.5	61.8	23.5
Balears	589900	111400	9.4	12.0	19.6	21.9	25.7	24.5	22.7	19.0	44.1	46.2	33.5
Canarias	1100800	342200	11.0	21.1	27.0	28.9	30.6	32.8	33.2	31.3	59.0	68.1	44.2
Cantabria	278000	51200	4.8	8.9	12.8	14.8	16.1	19.3	19.9	18.5	47.3	62.1	43.3
Castilla y Leon	1155300	234300	7.0	11.5	14.3	15.9	17.3	20.8	22.1	20.4	53.6	64.2	29.0
Castilla La Mancha	993500	283100	8.2	15.1	19.4	21.8	24.6	30.2	29.1	28.6	62.3	65.3	41.0
Catalunya	3804600	756500	6.5	11.8	17.0	18.0	20.6	24.0	22.0	20.0	45.9	59.7	36.5
Comunitat Valenciana	2424800	569400	9.0	14.7	22.2	22.7	24.9	27.7	27.3	23.6	50.2	64.7	40.2
Extremadura	506600	151800	14.9	18.2	21.4	24.1	28.4	34.1	32.5	30.1	56.6	57.0	44.6
Galicia	1264300	263800	7.6	9.7	12.9	15.7	18.3	21.3	22.1	21.0	50.1	59.1	37.7
Madrid	3401400	612300	6.5	10.1	14.6	15.7	18.1	19.5	20.5	18.1	46.4	62.0	37.0
Murcia	722100	196900	8.3	15.4	21.9	24.6	26.4	29.6	28.7	27.3	58.4	60.9	50.0
Navarra	310700	46400	4.3	8.2	10.6	11.8	13.9	17.3	16.5	15.0	39.1	58.2	20.7
Pais Vasco	1048600	174100	5.9	8.5	12.2	11.0	13.3	16.7	16.7	16.7	43.2	64.3	24.2
Rioja La	154000	26400	5.9	9.8	13.8	15.7	18.7	18.9	20.3	17.3	42.7	61.7	32.0