All examples By author By category About

Contrastat

Full window Github gist

Project for the Data Journalism course. Shows the unemployment rate and noncontribute pensions for catalonia's comarques. Many thanks to Scott Murray, Albert Cairo and Gloria Yanguas (who made the CSS which I'm using here).

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

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

h3.source {
				font-family: Helvetica, Arial, sans-serif;
				font-size: 12px;
				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;
  			
			}

p.aclariment {
				font-family: Helvetica;
				font-size: 8px;
				font-weight: normal;
				color: black;
				text-align:justify;
				line-height: 1.3;
				margin-top: 0em;
   				margin-bottom: 0.5em;
  			
			}

p.ClickMouse{
				font-size: 10px;
				font-weight: bold;
				font-style: italic
			}

g.highlight path {
				stroke: rgb(205,10,30);
				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: rgb(205,10,30);
				shape-rendering: crispEdges;
			}
			
			.yy.axis path,
			.yy.axis line {
				opacity: 0;
			}

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

.axisLabel{
				font-family: sans-serif;
				font-size: 11px;

}

</style>
	</head>
	<body>
		<h1>Social Situation in Catalonia </h1>
		
 
<div id="Evolution"> 
	<h2> Unemployment rate by comarca in Catalunya. 1999-2014 </h2>
 
 
<p> The social situation in Catalonia has gone very bad in the wake of the financial and economic crisis. Unemployment rate, here measured using the registerd unemployment, is one statistics that allow us to capture this situation. While some regions like, Alta Ribagorça had an unemployment rate as low as 5.5%, on the other extreme of the distribution, Baix Penedes had one of 16.9% in 2014. </p>
 
 
		<script type="text/javascript">

var w1 = 725;
			var h1 = 500;
			var padding1 = [ 20, 120, 50, 100 ];
 	
			var dateFormat = d3.time.format("%Y");

var xScale1 = d3.time.scale()
						.range([ padding1[3], w1 - padding1[1]  ]);

var yScale1 = d3.scale.linear()
						.range([ padding1[0], h1 - padding1[2] ]);

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

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

var line = d3.svg.line()
				.x(function(d) {
					return xScale1(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale1(+d.taxa);
				});

var svg1 = d3.select("body")
						.append("svg")
						.attr("width", w1)
						.attr("height", h1);

d3.csv("unemp_todos.csv", function(data1) {

var years = ["1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

var dataset1 = [];

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

dataset1[i] = {
						comarca: data1[i].Comarca,
						atur: []
					};

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

if (data1[i][years[j]]) {
							dataset1[i].atur.push({
								year: years[j],
								taxa: data1[i][years[j]]
							});
					}

}
			}

//console.log(data);

xScale1.domain([ 
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);

yScale1.domain([ 
					d3.max(dataset1, function(d) {
					return d3.max(d.atur, function(d) {
							return +d.taxa;
						});
					}),
				0  
				]);

//Append a title with the comarca name (so we get easy tooltips)
				groups.append("title")
					.text(function(d) {
						return d.comarca + " registered unemployment rate in 2014 was " + Math.round(d.atur[15].taxa*10)/10;
					});

//Within each group, create a new line/path,
				//binding just the unemployment rate data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.atur ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke", "gray")
					.attr("stroke-width", 1.5);

//prueba etiquetas

var datalabel = svg1.selectAll("text")
					.data(dataset1.filter(function(d) {
						return (d.comarca == "Barcelones" || d.comarca == "Catalunya" || d.comarca == "Baix Penedes" || d.comarca == "Alta Ribagorca" );
					}))
					.enter()
					.append("text");

datalabel.attr("x", [w1 - padding1[1] - padding1[3] + 105])
							.attr("y",(function(d) {
								return yScale1( d.atur[15].taxa ); 
							}))

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

svg1.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h1 - padding1[2]) + ")")
					.call(xAxis1);

svg1.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding1[3] - 5) + ",0)") 
					.call(yAxis1);

svg1.append("text") // label the y-axis
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", padding1[1] - 105)
					.text("Unemployment rate in percentage");

svg1.append("text") // label the x-axis
					.attr("class", "axisLabel")
					.attr("x", w1 - padding1[1] - 270)
					.attr("y", h1 - 10)
					.text("Year");

});

</script>
	</div id="Evolution"> 
 
 
	<div id="NonContribPensions"> 
 
		<h2>Distribution of non contributive pensions in Catalonia's Comarques (or De Moivre law in action)</h2>
 
		<p>In this graphic we can see what was the distribution of this type of social transfer every 1000 people of 65 or more living in the comarca. The intuition tell us that poorer comarques should receive proportionally more social transfer in order to reduce poverty. But more interesting is the fact that smaller populations in absolute terms have the largest and smallest percentages. This is what we except from De Moivre law and is a particular warning on using results from small samples.</p>
 
 
	<script type="text/javascript">

var w2 = 600;
		var h2 = 600;
		var padding2 = [20, 10, 40, 130];
		//Top, right, bottom, left

var widthScale = d3.scale.linear()
							.range([0, w2 - padding2[1] - padding2[3]]);

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

var xAxis2 = d3.svg.axis()
					.scale(widthScale)
					.orient("bottom")
					.ticks(4);

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

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

d3.csv("ddbb_pensions.csv", function(dataset2) {
			//console.log(data);

//Here we create a new variable within the dataset
			dataset2.forEach(function(d) {
				//d.noncp65 = d.TotalPensions/(d.TotalPob*d.M65/100);
				d.noncp65 = d.TotalPensions/(d.TotalPob*d.M65/100);});

//Here we sort the data
			dataset2.sort(function(a,b) {return d3.descending(+a.noncp65, +b.noncp65);});

//Here we sort the data with an alternative function
			//dataset.sort(function(a,b) {return b.Njubilacio - a.Njubilacio;});

widthScale.domain([0, d3.max(dataset2, function(d){
				return +d.noncp65*1000;
			})]);

//heightScale.domain(d3.range(dataset.length));
			heightScale.domain(dataset2.map(function (d){
				return d.Comarca;
			}));

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

rects.attr("x", padding2[3])
				.attr("y", function(d,i) {
					return heightScale(d.Comarca);
				})
				.attr("width", function(d) {
					//return d.Njubilacio/(d.Poblacio65/100*d.Poblacio)*10000;
					return widthScale(d.noncp65*1000);
					//return d.Njubilacio/10
				})
				.attr("height", heightScale.rangeBand())
				//.attr("fill", function(d) {return "rgb(0, 0, " + Math.round(d.TotalPob/1000) + ")";})
				.attr("fill", function(d) {
					if (d.Comarca==="Catalunya") {
						return "rgb(205, 10, 30)";}
					else 
						{return "rgb(0, 0, " + Math.round(d.TotalPob/1000) + ")";}
				})
				.append("title")
				//.style("font-size", "6px")
				.text(function(d) {
					//return d.Comarca + "'s number of non contrib pensionist is " + d.Njubilacio;
					return d.Comarca + " absolute number of non contrib pensionist is " + d.TotalPensions;
				});

svg2.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate (" + padding2[3]  + "," + (h2 - padding2[2]) + ")")
					.call(xAxis2)
					.append("text")
        			.attr("text-anchor", "middle")
        			.attr("x", w2/2 - 40)
        			.attr("y", 35)
        			//.attr("transform", "translate (0," + (h - 15) + ")")
        			.text("Non contributive pensions per 1000 population over 65 years");

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

});

</script>
		 <p class="aclariment">Note: Lighter colors mean a larger population in absolute terms, except for Catalonia which has a different color.</p>
 
	</div id="NonContribPensions">
 
<div id = "Transicion">
 
			<h2>Relationship between the percentatge of non contributive pensions among the elder population (over 65) and the registered unemployment rate: transition from  2000, 2007 and 2012.</h2>
 
				<p>However, the intuition does not seem to be quite right. As we can see in this last graphic the relation of registered unemployment to non contributive pensions in the comarca is not that strong, which probably tell us that the way this social transfer are assigned do not follow a pure social argument but rather a political one. Another interesting story is that in the wake of the economic crisis, the rate of this transfer was not increased (in many cases it was actually decreased) as we would have expected, probably due to the budget cuts.</p>
 
			<p class="ClickMouse" ID="ClickMouse"><u>Click</u> on this text to see the transition of the relation of non contributive pensions to registered unemployment from 2000 to 2012 (once).</p>
 
	<script type="text/javascript">

var w3 = 700;
		var h3 = 550;
		var padding3 = [20, 10, 40, 100];
		//Top, right, bottom, left

var formatAsPercentage = d3.format(".1%");

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

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

var xAxis3 = d3.svg.axis()
					.scale(xScale3)
					.orient("bottom")
					.ticks(5);

var yAxis3 = d3.svg.axis()
					.scale(yScale3)
					.orient("left")
					.ticks(5);

xAxis3.tickFormat(formatAsPercentage);

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

d3.csv("bbddcompleta.csv", function(dataset3) {
			//console.log(data);

//Here we create a new variable within the dataset
			dataset3.forEach(function(d) {
				d.noncp65_2012 = d.pensions_2012/(d.pT2012*d.p65_2012/100)*1000;
				d.regatur_2012 = d.atur_2012/(d.pT2012*d.p15a64_2012/100);
				d.noncp65_2007 = d.pensions_2007/(d.pT2007*d.p65_2007/100)*1000;
				d.regatur_2007 = d.atur_2007/(d.pT2007*d.p15a64_2007/100);
				d.noncp65_2000 = d.pensions_2000/(d.pT2000*d.p65_2000/100)*1000;
				d.regatur_2000 = d.atur_2000/(d.pT2000*d.p15a64_2000/100);
			});

//Here we sort the data
			dataset3.sort(function(a,b) {return d3.descending(+a.noncp65_2000, +b.noncp65_2000);});

//Here we sort the data with an alternative function
			//dataset.sort(function(a,b) {return b.Njubilacio - a.Njubilacio;});

yScale3.domain([
				d3.max(dataset3, function(d){return +d.noncp65_2000;}), 
				d3.min(dataset3, function(d){return +d.noncp65_2012;}) 
			]);

xScale3.domain([
				d3.min(dataset3, function(d){return +d.regatur_2007;}), 
				d3.max(dataset3, function(d){return +d.regatur_2012;}) 
			]);

var balls = svg3.selectAll("circle")
				.data(dataset3)
				.enter()
				.append("circle");

balls.attr("cy", function(d){
				return yScale3(d.noncp65_2000);
			})
				.attr("cx", function(d) {
					return xScale3(d.regatur_2000);
				})
				.attr("r", 3) 
					//return d.Njubilacio/(d.Poblacio65/100*d.Poblacio)*10000;
				//.attr("height", heightScale.rangeBand())
				//.attr("fill", function(d) {return "rgb(0, 0, " + Math.round(d.TotalPob/1000) + ")";})
				.attr("fill", function(d) {
					if (d.Comarca==="Catalunya") {
						return "rgb(205, 10, 30)";}
					else 
						{return "steelblue";}
				})
				.append("title")
				.text(function(d) {
				 	return "In 2000 " + d.Comarca + "'s ratio of non contrib pensionist per 1000 hab over 65 year was " + Math.round(d.noncp65_2000*10)/10 + " while the rate of registered unemployment was " + Math.round(d.regatur_2000*1000)/10 + ". In 2007, those values changed to " + Math.round(d.noncp65_2007*10)/10 + " and " + Math.round(d.regatur_2007*1000)/10 + ". By 2012 the values were " + Math.round(d.noncp65_2012*10)/10 + " and " + Math.round(d.regatur_2012*1000)/10;
				})
				;

// balls.transition().duration(4000)
				// .attr("cy", function(d){
				// return yScale3(d.noncp65_2007);
				// })
				// .attr("cx", function(d) {
				// 	return xScale3(d.regatur_2007);
				// })
				// .transition().duration(4000)
				// .attr("cy", function(d){
				// return yScale3(d.noncp65_2012);
				// })
				// .attr("cx", function(d) {
				// 	return xScale3(d.regatur_2012);
				// });

svg3.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate (0," + (h3 - padding3[2] + 5) + ")")
					.call(xAxis3)
        			.append("text")
        			.attr("text-anchor", "middle")
        			.attr("x", w3/2)
        			.attr("y", +30)
        			//.attr("transform", "translate (0," + (h - 15) + ")")
        			.text("Registered unemployment rate");

svg3.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate (" + (padding3[3] - 5) + ",0)")
					.call(yAxis3)
					.append("text")
        			.attr("text-anchor", "middle")
        			.attr("x", -h3/2)
        			.attr("y", -padding3[2])
        			//.attr("transform", "translate (0," + (h - 15) + ")")
        			.text("Number of non contributive pensions among the elderly")
        			.attr("transform", "rotate(-90)");

/*
				var labels = svg.selectAll("text.circle")
								.data(dataset)
								.enter()
								.append("text")
								.attr("class", "circle")
								.text(function(d){
									return d.Comarca;
								});

labels.attr("x", function(d){
						return xScale(+d.noncp65)
					})
					.attr("y", function(d){
						return yScale(+d.regatur+0.0005)
					})
					.attr("font-family", "sans-serif")
					.attr("font-size", "8px")
					.attr("fill", "black");
				*/

d3.select("#ClickMouse")
				.on("click", function() {
				balls.transition().duration(4000)
				.attr("cy", function(d){
				return yScale3(d.noncp65_2007);
				})
				.attr("cx", function(d) {
					return xScale3(d.regatur_2007);
				})
				.transition().duration(4000)
				.attr("cy", function(d){
				return yScale3(d.noncp65_2012);
				})
				.attr("cx", function(d) {
					return xScale3(d.regatur_2012);
				})

labels.transition().duration(4000)
					.attr("x", function(d){
						return xScale3(+d.regatur_2007+0.0005)
					})
					.attr("y", function(d){
						return yScale3(+d.noncp65_2007)
					})
					.attr("font-family", "sans-serif")
					.attr("font-size", "8px")
					.attr("fill", "black")
					.transition().duration(4000)
					.attr("x", function(d){
						return xScale3(+d.regatur_2012+0.0005)
					})
					.attr("y", function(d){
						return yScale3(+d.noncp65_2012)
					})
					.attr("font-family", "sans-serif")
					.attr("font-size", "8px")
					.attr("fill", "black")
					;

});
		});

</script>
 
		</div id = "Transicion">
				 <h3 class="source"> Font: Elaboració pròpia en base a <a href="https://www.idescat.cat/pub/?id=aec&n=254">Poblacio Idescat</a>, <a href="https://www.idescat.cat/pub/?id=aec&n=325">Atur registrat Idescat</a> i <a href="https://benestar.gencat.cat/ca/serveis/ajuts_i_prestacions_economiques/pensions_no_contributives/">Pensions no contributives DOG</a></h3>
	</body>
</html>

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

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