Exercise Module 5

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

svg {
				background-color: #F2F2F2;
			}

h1 {
				font-family: Helvetica, Arial, sans-serif;
				font-size: 36px;
				font-weight: bold;
				color: #A01E0C;
				border-bottom: solid 8px #A01E0C;
			
			}

h2 {
				font-family: Helvetica, Arial, sans-serif;
				font-size: 24px;
				font-weight: bold;
				color: #A01E0C;
				
			
			}
	
			p {
				font-family: Helvetica;
				font-size: 16px;
				font-weight: bold;
				color: black;
				
			}

circle:hover {
				fill: #A01E0C;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: #A01E0C;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 12px;
				
			}

.xlabel{
				font-family: Helvetica, Arial, sans-serif;
				font-size: 12px;
			}

.ylabel{
				font-family: Helvetica, Arial, sans-serif;
				font-size: 12px;
			}

</style>
	</head>
	<body>
		<h1>UNEMPLOYMENT IN SPAIN </h1>
		<h2> Relationship between unemployment rate and difficulties in making ends meet </p>
		<p> Data by region, 2014. Source: Economically Active Population Survey and Living Conditions Survey</p>
		<p> Spanish Statistical Office, <a href="https://www.ine.es">INE</a> </p>
		<p style="color:grey; font-size:18px; font-weight:normal; text-align: justify">There is a clear 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 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 d + "%"; });

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

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

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

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

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

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

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

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

.attr("cy", function(d) {
						return  yScale(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);	
					
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis);

svg.append("text")
    				.attr("class", "xlabel")
    				.attr("text-anchor", "end")
    				.attr("x", w - 10)
    				.attr("y", h - 10)
    				.text("Unemployment rate");

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

svg.append("text")
    				.attr("class", "ylabel")
    				.attr("text-anchor", "end")
    				.attr("y", 90)
    				.attr("x", -70)
    				.attr("transform", "rotate(-90)")
    				.text("Percentage of population with difficulties to make ends meet");

});

</script>

</body>
</html>

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

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