| license: mit | |
| border: none |
Comparing Spanish unemployment rate per province of 2005T4 and 2015T4.
This type of (bar?) chart allows to compare two data points easily. It is inspired by Lisa's Charlotte Rost German unemployment graphic.
An alternative could be a Tufte's slopegraph.
| id | province | rate_2015 | rate_2005 | |
|---|---|---|---|---|
| 02 | Albacete | 21.97 | 10.78 | |
| 03 | Alicante/Alacant | 22.96 | 10.28 | |
| 04 | Almería | 25.13 | 9.83 | |
| 01 | Araba/Álava | 12.21 | 6.46 | |
| 33 | Asturias | 20.33 | 9.3 | |
| 05 | Ávila | 21.08 | 8.52 | |
| 06 | Badajoz | 30.01 | 16.58 | |
| 07 | Illes Balears | 17.02 | 7.5 | |
| 08 | Barcelona | 17.15 | 6.51 | |
| 48 | Bizkaia | 14.79 | 7.12 | |
| 09 | Burgos | 17.72 | 6.47 | |
| 10 | Cáceres | 24.68 | 12.86 | |
| 11 | Cádiz | 36.73 | 17.41 | |
| 39 | Cantabria | 17.71 | 8.01 | |
| 12 | Castellón/Castelló | 19.53 | 6.56 | |
| 13 | Ciudad Real | 28.95 | 10.02 | |
| 14 | Córdoba | 29.7 | 15.67 | |
| 15 | A Coruña | 15.81 | 9.07 | |
| 16 | Cuenca | 18.78 | 7.72 | |
| 20 | Gipuzkoa | 10.16 | 5.36 | |
| 17 | Girona | 19.73 | 6.68 | |
| 18 | Granada | 28.82 | 13.14 | |
| 19 | Guadalajara | 19.29 | 7.01 | |
| 21 | Huelva | 32.65 | 16.52 | |
| 22 | Huesca | 12.38 | 6.75 | |
| 23 | Jaén | 30.84 | 17.04 | |
| 24 | León | 20.31 | 10.77 | |
| 25 | Lleida | 14.26 | 6.86 | |
| 27 | Lugo | 15.85 | 7.53 | |
| 28 | Madrid | 16.51 | 5.9 | |
| 29 | Málaga | 26.98 | 11.06 | |
| 30 | Murcia | 23.51 | 7.43 | |
| 31 | Navarra | 13.53 | 5.92 | |
| 32 | Ourense | 18.78 | 9.44 | |
| 34 | Palencia | 19.09 | 5.21 | |
| 35 | Las Palmas | 27.64 | 12.0 | |
| 36 | Pontevedra | 20.47 | 9.68 | |
| 26 | La Rioja | 13.97 | 6.69 | |
| 37 | Salamanca | 15.78 | 11.92 | |
| 38 | Santa Cruz de Tenerife | 25.82 | 9.62 | |
| 40 | Segovia | 15.75 | 4.96 | |
| 41 | Sevilla | 29.08 | 13.0 | |
| 42 | Soria | 13.33 | 4.06 | |
| 43 | Tarragona | 21.86 | 7.42 | |
| 44 | Teruel | 13.0 | 5.54 | |
| 45 | Toledo | 27.91 | 9.48 | |
| 46 | Valencia/València | 20.79 | 7.08 | |
| 47 | Valladolid | 15.62 | 8.12 | |
| 49 | Zamora | 19.56 | 10.71 | |
| 50 | Zaragoza | 15.33 | 5.56 | |
| 51 | Ceuta | 23.25 | 17.14 | |
| 52 | Melilla | 32.64 | 12.3 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <style> | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #ccc; | |
| shape-rendering: crispEdges; | |
| } | |
| path.domain { | |
| stroke: none; | |
| } | |
| .axis text { | |
| font-family: "Monaco", monospace; | |
| font-size: 12px; | |
| } | |
| .line { | |
| stroke-width: 5px; | |
| } | |
| .min, | |
| .max { | |
| font-size: 9px; | |
| font-family: "Monaco", monospace; | |
| text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff; | |
| } | |
| .tooltip, | |
| .annotation { | |
| position: absolute; | |
| font-size: 11px; | |
| font-family: "Monaco", monospace; | |
| pointer-events: none; | |
| text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff; | |
| } | |
| </style> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var margin = { top: 10, right: 70, bottom: 10, left: 30 }, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var format = d3.format(".2"); | |
| var svg = d3 | |
| .select("body") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var y = d3.scaleLinear().range([height, 0]); | |
| var x = d3.scaleLinear().range([0, width]); | |
| var xAxis = d3.axisBottom(x); | |
| var yAxis = d3 | |
| .axisLeft(y) | |
| .tickValues([5, 15, 25, 35]) | |
| .tickSize(-width) | |
| .tickFormat(function(d) { | |
| return d + "%"; | |
| }); | |
| var color = d3 | |
| .scaleLinear() | |
| .range(["blue", "red"]) | |
| .domain([0, 36]); | |
| var div = d3 | |
| .select("body") | |
| .append("div") | |
| .attr("class", "tooltip"); | |
| var annotation = d3 | |
| .select("body") | |
| .append("div") | |
| .attr("class", "annotation"); | |
| var firstYear = d3 | |
| .select("body") | |
| .append("div") | |
| .attr("class", "annotation"); | |
| var lastYear = d3 | |
| .select("body") | |
| .append("div") | |
| .attr("class", "annotation"); | |
| d3.csv("data.csv", type, function(error, data) { | |
| // sort the data from min to max | |
| data.sort(function(a, b) { | |
| return a.rate_2015 - b.rate_2015; | |
| }); | |
| y.domain([0, 40]); | |
| x.domain([ | |
| 0, | |
| d3.max(data, function(d, i) { | |
| return i; | |
| }) | |
| ]); | |
| // call the axis | |
| var axis = svg | |
| .append("g") | |
| .attr("class", "axis") | |
| .call(yAxis); | |
| // paint the lines | |
| var lines = svg.append("g").attr("class", "lines"); | |
| var lineGroup = lines | |
| .selectAll("line") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("class", "line-g") | |
| .on("mousemove", function(d, i) { | |
| div | |
| .html(d.province) | |
| .style("left", x(i) + 35 + "px") | |
| .style("top", y(d.rate_2015) - 20 + "px"); | |
| }) | |
| .on("mouseleave", function() { | |
| d3 | |
| .select(this) | |
| .selectAll("text") | |
| .style("font-weight", "400"); | |
| }); | |
| lineGroup | |
| .append("line") | |
| .attr("class", "line") | |
| .attr("x1", function(d, i) { | |
| return x(i) + 15; | |
| }) | |
| .attr("y1", function(d) { | |
| return y(d.rate_2015); | |
| }) | |
| .attr("x2", function(d, i) { | |
| return x(i) + 15; | |
| }) | |
| .attr("y2", function(d, i) { | |
| return y(d.rate_2005); | |
| }) | |
| .style("stroke", function(d, i) { | |
| return color(d.rate_2015); | |
| }); | |
| // annotate the last item in the array | |
| var last = data[data.length - 1]; | |
| annotation | |
| .html(last.province) | |
| .style("left", function(d, i) { | |
| return x(data.length + 1.1) + "px"; | |
| }) | |
| .style("top", y(last.rate_2015) - 20 + "px"); | |
| firstYear | |
| .html("— 2005") | |
| .style("left", function(d, i) { | |
| return x(data.length + 2) + "px"; | |
| }) | |
| .style("top", y(last.rate_2005) + 10 + "px"); | |
| lastYear | |
| .html("— 2015") | |
| .style("left", function(d, i) { | |
| return x(data.length + 2) + "px"; | |
| }) | |
| .style("top", y(last.rate_2015) + 10 + "px"); | |
| // 2005 unemployment | |
| lineGroup | |
| .append("text") | |
| .attr("class", "min") | |
| .attr("x", function(d, i) { | |
| return x(i) + 12; | |
| }) | |
| .attr("y", function(d, i) { | |
| return y(d.rate_2005) + 10; | |
| }) | |
| .text(function(d) { | |
| return round(d.rate_2005, 0); | |
| }); | |
| // 2015 unemployment | |
| lineGroup | |
| .append("text") | |
| .attr("class", "max") | |
| .attr("x", function(d, i) { | |
| return x(i) + 9; | |
| }) | |
| .attr("y", function(d, i) { | |
| return y(d.rate_2015) - 5; | |
| }) | |
| .text(function(d) { | |
| return round(d.rate_2015, 0); | |
| }); | |
| }); | |
| function type(d) { | |
| d.id = +d.id; | |
| d.rate_2015 = +d.rate_2015; | |
| d.rate_2005 = +d.rate_2005; | |
| return d; | |
| } | |
| // From https://github.com/d3/d3-format/issues/32 | |
| function round(x, n) { | |
| return n == null ? Math.round(x) : Math.round(x * (n = Math.pow(10, n))) / n; | |
| } | |
| </script> |
