xxxxxxxxxx<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> <div id="UnemploymentRate"> <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> <input name="updateProv" type="button" value="By Provincia" onclick="updateProv()" /> <input name="updateCCAA" type="button" value="By CCAA" onclick="updateCCAA()" /> </div> <div id="Unemployed"> <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> <script type="text/javascript"> 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 area = d3.svg.area() .x(function(d) { return xScale(dateFormat.parse(d3.format("")(d.x))); }) .y0(function(d) { return yScale(d.y0); //Updated }) .y1(function(d) { return yScale(d.y0 + d.y); //Updated }); var color = d3.scale.category10(); function populate_years(start, end, step){ var years = []; //empty years array //YOUR CODE HERE //_.range(start, end, step); for (var yr = start; yr<= end; yr += step) { if (yr !== 1942 && yr!==1946){ years.push(yr); } } return years; //return years array } 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 ]); var paths = svg2.selectAll("path") .data(dataset); paths.exit().remove(); paths.enter() .append("path") //.filter(funcion(d){return d.identificador != "Espanya";}) .attr("class", "area") .attr("d", function(d) { return area(d.aturats); }) .attr("stroke", "none") .attr("fill", function(d, i) { return color(i); }); //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 updateProv(){ d3.select("svg").remove(); d3.csv("tasaaturProv2.csv", //function(data) { // console.log(data);}) drawbars); d3.select("svg").remove(); d3.csv("ltaturProv2.csv", //function(data) { // console.log(data);}) drawstacked); } 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