All examples By author By category About

Contrastat

Full window Github gist

Project for Udacity Visualization

<!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: lightGray;
				font-family: Helvetica, Arial, sans-serif;
			}

div {
				background-color: #F2F2F2;
			}

#UnemploymentRate {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				box-shadow: 3px 3px 5px 6px #ccc;
			}

#Unemployed {
				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 text {
				font-size: 10px;
				font-weight: bold;
				text-anchor: end;
				opacity: 0;
			}

g.bar{
				cursor:pointer;
			}

g.bar:hover rect {
				fill: #A01E0C;
			}

g.bar:hover text {
				opacity: 1;
			}

g.highlight path {
				stroke: rgb(205,10,30);
				stroke-width: 3;
			}
			
			g.area text {
				font-size: 11px;
				font-weight: bold;
				text-anchor: end;
				opacity: 0;
			}

g.area{
				cursor:pointer;
			}

g.area:hover rect {
				fill: #A01E0C;
			}

g.area:hover text {
				opacity: 1;
			}

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

.y.axis path,
			.y.axis line {
				opacity: 0;
			}

.y2.axis path,
			.y2.axis line {
				opacity: 1;
			}

</style>
	</head>
	<body>

<h1>Unemployment Rate in Spain</h1>

<p>The following code shows the unemployment rate in Spain for the last quarter of 2015. 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 in the gist. 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>

</div>

<h1>Total number of long term unemployed in Spain.</h1>
			<p>Long term unemployment is defined as people that has been actively seeking for a job but hasn't find any for at least two years.</p>

</div>

var w = 700;
			var h = 600;
			var padding = [ 20, 10, 30, 136 ];  //Top, right, bottom, left

//Bar Chart
			var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);
			
			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

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

//SVG goes into #UnemploymentRate instead of body

function drawbars(data){	
				data.sort(function(a, b) {
					return d3.descending(+a['2015'],+b['2015']);
				});

widthScale.domain([ 0, Math.ceil(d3.max(data, function(d) {
					return +d['2015'];
				})) ]);

heightScale.domain(data.map(function(d) { return d.id1; } ));

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

//Bind data to groups (not bars directly)
				var groups = svg.selectAll("g")
								.data(data);

groups.exit().remove();

groups.enter().append("g")
								.attr("class", "bar");

//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.id1);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", function(d) {
						if (d.id1 === "Espanya") {
							return "rgb(205, 10, 30)";}
						else{
							return "steelblue";}
					});
					//.attr("fill", "steelblue");

//Add a text element to each group
                groups.append("text")
                    .attr("x", function(d) {
                        return padding[3] + widthScale(d['2015']) - 3;
                    })
                    .attr("y", function(d) {
                        return heightScale(d.id1) + 10;
                    })
                    .text(function(d) {
                        return Math.round(d['2015']*100)/100 + "%";
                    });

rects.transition()
                    .delay(function(d, i) {
                        return i * 50;
                    })
                    .duration(1000)
                    .attr("width", function(d) {
                        return widthScale(d['2015']);
                    });

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

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

//groups.exit().remove();

}

//Stack are chart method
			var stack = d3.layout.stack()
							.values(function(d) {
								return d.aturats;
							})
							.order("reverse");

var dateFormat = d3.time.format("%Y");

var xScale = d3.time.scale()
								.range([ padding[3], w - padding[1] - padding[3] ]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

//Configure axis generators
			var xAxis2 = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

var yAxis2 = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.ticks(5);

var color = d3.scale.category10();

function drawstacked(data){

//d3.select("svg").remove();

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

var years = populate_years(2005,2015,1);

var dataset = [];

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

//Create new object with id name and empty array
				dataset[i] = {
					identificador: data[i].id1,
					aturats: []
					};

//Loop through all the quarters
				for (var j = 0; j < years.length; j++) {

//Default value, used in case no value is present
				var amount = null;

// If value is not empty
				if (data[i][years[j]]) {
					amount = +data[i][years[j]];
					}

//Add a new object to the aturats data array
				//for this identificador
				dataset[i].aturats.push({
					x: years[j],
					y: amount
					});

}

//Stack the data!
				stack(dataset);

//Uncomment to log the original data to the console
				//console.log(data);

//Uncomment to log the newly restructured dataset to the console
				//console.log(dataset);

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

var totals = [];

for (i = 0; i < years.length; i++) {
				totals[i] = 0;
				for (j = 0; j < dataset.length; j++) {
					totals[i] += dataset[j].aturats[i].y;
					}
				}

yScale.domain([ d3.max(totals), 0 ]);

//Append a title with the country name (so we get easy tooltips)
				paths.append("title")
					.text(function(d) {
						return d.identificador;
					});

//Create axes
				svg2.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis2);

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

//paths.exit().remove();

}

function datafilter(d){
		data = data.filter(function(d) { return d.id1  != "Espanya";});
		return data;}

function updateCCAA(){
		d3.select("svg").remove();
    	d3.csv("tasaaturCCAA2.csv", 
				//function(data) {
				//  console.log(data);})
				drawbars);
    	d3.select("svg").remove();
    	d3.csv("ltaturCCAA2.csv", drawstacked);

}

</script>

<p class="source"> Font: 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>
		</p>
	</body>
</html>

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