| border: no | |
| height: 500 | |
| license: gpl-3.0 |
Updated version of the cartogram that runs on the Spanish Socialist's primaries results story. Each province is scaled according to its population.
While the published piece uses ISO codes to label the provinces, this approach mixing full names and province abbreviatures seems to be easier to parse.
| id,name,abbr,pop | |
| 02,Albacete,Alb.,390032, | |
| 03,Alicante/Alacant,Alicante,1825332, | |
| 04,Almería,Almería,706672, | |
| 01,Araba/Álava,Álava,326574, | |
| 33,Asturias,Asturias,1034960, | |
| 05,Ávila,Áv.,160700, | |
| 06,Badajoz,Badajoz,679884, | |
| 07,"Balears, Illes",Baleares,1115999, | |
| 08,Barcelona,Barcelona,5576037, | |
| 48,Bizkaia,Vizcaya,1148302, | |
| 09,Burgos,Bur.,358171, | |
| 10,Cáceres,Các.,400036, | |
| 11,Cádiz,Cádiz,1239435, | |
| 39,Cantabria,Cant.,580295, | |
| 12,Castellón/Castelló,Cast.,575470, | |
| 13,Ciudad Real,C. Real,502578, | |
| 14,Córdoba,Córdoba,788219, | |
| 15,"Coruña, A",A Coruña,1120294, | |
| 16,Cuenca,Cue.,198718, | |
| 20,Gipuzkoa,Gui.,719282, | |
| 17,Girona,Girona,755716, | |
| 18,Granada,Granada,912938, | |
| 19,Guadalajara,Gua.,253310, | |
| 21,Huelva,Huelva,518930, | |
| 22,Huesca,Hue.,219702, | |
| 23,Jaén,Jaén,643484, | |
| 24,León,León,468316, | |
| 25,Lleida,Lleida,432384, | |
| 27,Lugo,Lugo,333634, | |
| 28,Madrid,Madrid,6507184, | |
| 29,Málaga,Málaga,1630615, | |
| 30,Murcia,Murcia,1470273, | |
| 31,Navarra,Navarra,643234, | |
| 32,Ourense,Our.,311680, | |
| 34,Palencia,Pal.,163390, | |
| 35,"Palmas, Las",Las Pal.,1100480, | |
| 36,Pontevedra,Pont.,942731, | |
| 26,"Rioja, La",Rio.,315381, | |
| 37,Salamanca,Sal.,333603, | |
| 38,Santa Cruz de Tenerife,Tenerife,1007641, | |
| 40,Segovia,Seg.,154184, | |
| 41,Sevilla,Sevilla,1939527, | |
| 42,Soria,Sor.,88903, | |
| 43,Tarragona,Tarr.,791693, | |
| 44,Teruel,Ter.,135562, | |
| 45,Toledo,Toledo,686841, | |
| 46,Valencia/València,Valencia,2540707, | |
| 47,Valladolid,Vall.,521130, | |
| 49,Zamora,Za.,177404, | |
| 50,Zaragoza,Zaragoza,953486, | |
| 51,Ceuta,Ceu.,84959, | |
| 52,Melilla,Mel.,86120 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v3.min.js"></script> | |
| <script src="https://unpkg.com/d3-composite-projections@1.2.0"></script> | |
| <script> | |
| const padding = 2; | |
| const margin = { top: 10, right: 10, bottom: 10, left: 10 }; | |
| const width = 700 - margin.left - margin.right; | |
| const height = 500 - margin.top - margin.bottom; | |
| const 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 + ')'); | |
| const pop = d3.map(); | |
| const name = d3.map(); | |
| const size = d3.scaleSqrt().range([5, 120]); | |
| const font = d3.scaleLinear().range([6, 24]); | |
| d3 | |
| .queue() | |
| .defer(d3.json, 'provinces.json') | |
| .defer(d3.csv, 'data.csv', d => { | |
| d.pop = +d.pop; | |
| pop.set(d.id, d.pop); | |
| name.set(d.id, d.abbr); | |
| return d; | |
| }) | |
| .await(ready); | |
| function ready(error, es, data) { | |
| if (error) throw error; | |
| size.domain(d3.extent(data, d => d.pop)); | |
| font.domain(d3.extent(data, d => d.pop)); | |
| const provinces = topojson.feature(es, es.objects.provinces); | |
| const features = provinces.features; | |
| const projection = d3 | |
| .geoConicConformalSpain() | |
| .fitSize([width, height], provinces); | |
| const path = d3.geoPath().projection(projection); | |
| features.forEach(function(d) { | |
| d.pos = projection(d3.geoCentroid(d)); | |
| d.area = size(pop.get(d.id)); | |
| [d.x, d.y] = d.pos; | |
| }); | |
| const simulation = d3 | |
| .forceSimulation(features) | |
| .force('x', d3.forceX(d => d.x).strength(0.1)) | |
| .force('y', d3.forceY(d => d.y).strength(0.1)) | |
| .force('collide', collide); | |
| for (let i = 0; i < 120; ++i) simulation.tick(); | |
| const rect = svg | |
| .selectAll('g') | |
| .data(features) | |
| .enter() | |
| .append('g') | |
| .attr('transform', d => `translate(${d.x}, ${d.y})`); | |
| rect | |
| .append('rect') | |
| .attr('width', d => d.area) | |
| .attr('height', d => d.area) | |
| .attr('x', d => -d.area / 2) | |
| .attr('y', d => -d.area / 2) | |
| .attr('fill', '#ccc') | |
| .attr('stroke', 'white') | |
| .attr('rx', 2); | |
| rect | |
| .append('text') | |
| .filter(d => d.id !== '51' && d.id !== '52') // Excluding Ceuta & Melilla | |
| .style('font-family', 'sans-serif') | |
| .style('font-size', d => `${font(pop.get(d.id))}px`) | |
| .attr('text-anchor', 'middle') | |
| .attr('dy', 2) | |
| .text(d => name.get(d.id)); | |
| svg | |
| .append('path') | |
| .attr('fill', 'none') | |
| .attr('stroke', 'black') | |
| .attr('d', projection.getCompositionBorders()); | |
| // From https://bl.ocks.org/mbostock/4055889 | |
| function collide() { | |
| for (var k = 0, iterations = 4, strength = 0.5; k < iterations; ++k) { | |
| for (var i = 0, n = features.length; i < n; ++i) { | |
| for (var a = features[i], j = i + 1; j < n; ++j) { | |
| var b = features[j], | |
| x = a.x + a.vx - b.x - b.vx, | |
| y = a.y + a.vy - b.y - b.vy, | |
| lx = Math.abs(x), | |
| ly = Math.abs(y), | |
| r = a.area / 2 + b.area / 2 + padding; | |
| if (lx < r && ly < r) { | |
| if (lx > ly) { | |
| lx = (lx - r) * (x < 0 ? -strength : strength); | |
| (a.vx -= lx), (b.vx += lx); | |
| } else { | |
| ly = (ly - r) * (y < 0 ? -strength : strength); | |
| (a.vy -= ly), (b.vy += ly); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> |
