Choropleth using D3.js - List of metropolitan areas in Spain
Information from Wikipedia
Last active
May 2, 2016 16:44
-
-
Save ackuser/4320a4df6c64ad539225b61c0b0c8fca to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .subunit-boundary { | |
| fill: none; | |
| stroke: #777; | |
| stroke-dasharray: 2,2; | |
| stroke-linejoin: round; | |
| } | |
| .place, | |
| .place-label { | |
| fill: red; | |
| } | |
| text { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 10px; | |
| pointer-events: none; | |
| text-transform: capitalize; | |
| font-weight: bold; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: 60px; | |
| height: 18px; | |
| padding: 2px; | |
| font: 10px sans-serif; | |
| background: lightsteelblue; | |
| border: 0px; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| } | |
| .q0-9 { fill:rgb(247,251,255); } | |
| .q1-9 { fill:rgb(222,235,247); } | |
| .q2-9 { fill:rgb(198,219,239); } | |
| .q3-9 { fill:rgb(158,202,225); } | |
| .q4-9 { fill:rgb(107,174,214); } | |
| .q5-9 { fill:rgb(66,146,198); } | |
| .q6-9 { fill:rgb(33,113,181); } | |
| .q7-9 { fill:rgb(8,81,156); } | |
| .q8-9 { fill:rgb(8,48,107); } | |
| .legend { | |
| display: table; | |
| margin: 0 auto; | |
| font-family: "Helvetica Neue", sans-serif; | |
| font-size: 12px; | |
| height: 35px; | |
| width: 250px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="//d3js.org/queue.v1.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.min.js"></script> | |
| <script> | |
| var color = d3.scale.linear() | |
| .domain([0, .02, .05, .15]) | |
| .range(["rgb(247,251,255)", "rgb(198,219,239)", "rgb(33,113,181)", "rgb(8,48,107)"]) | |
| var rateByName = d3.map(); | |
| var width = 960, | |
| height = 1160; | |
| var projection = d3.geo.mercator() | |
| .center([-10, 30]) | |
| .scale(1800) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| .pointRadius(2); | |
| d3.select("body").append("svg") | |
| .attr("class", "legend") | |
| var legend = d3.legend.color() | |
| .shapeHeight(10) | |
| .shapeWidth(50) | |
| .shapePadding(0) | |
| .labelOffset(5) | |
| .labelFormat(d3.format("%")) | |
| .orient("horizontal") | |
| .labelAlign("start") | |
| .scale(color) | |
| d3.select(".legend") | |
| .call(legend) | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Define the div for the tooltip | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| queue() | |
| .defer(d3.json, "spain.json") | |
| .defer(d3.tsv, "spain-provinces-population.tsv", function(d) { | |
| // console.log(d.Nombre + " " + d['Porcentaje_Población']) | |
| rateByName.set(d.Nombre, +d['Porcentaje_Población']); | |
| }) | |
| .await(ready); | |
| function ready(error, spain){ | |
| // console.log(map) | |
| var quantize = d3.scale.quantize() | |
| .domain([0, 5]) | |
| .range(d3.range(9).map(function(i) { return "q" + i + "-9"; })); | |
| svg.selectAll(".subunit") | |
| .data(topojson.feature(spain, spain.objects.subunits).features) | |
| .enter().append("path") | |
| .attr("class", function(d) { | |
| return "subunit " + d.properties.name; }) | |
| .attr("class", function(d) { return quantize(rateByName.get(d.properties.name)); }) | |
| .attr("d", path) | |
| .on("mouseover", function(d) { | |
| console.log(d.properties.name) | |
| div.transition() | |
| .duration(200) | |
| .style("opacity", .9); | |
| div .html(d.properties.name) | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| div.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| svg.append("path") | |
| .datum(topojson.mesh(spain, spain.objects.subunits, function(a, b) { return a !== b; })) | |
| .attr("d", path) | |
| .attr("class", "subunit-boundary"); | |
| svg.append("path") | |
| .datum(topojson.feature(spain, spain.objects.places)) | |
| .attr("d", path) | |
| .attr("class", "place"); | |
| svg.selectAll(".place-label") | |
| .data(topojson.feature(spain, spain.objects.places).features) | |
| .enter().append("text") | |
| .attr("class", "place-label") | |
| .attr("transform", function(d) { | |
| return "translate(" + projection(d.geometry.coordinates) + ")"; }) | |
| .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; }) | |
| .attr("dy", ".15em") | |
| .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; }) | |
| .text(function(d) { | |
| // debugger | |
| // console.log(d.properties.NAME + " " + d.properties.POP_MAX) | |
| return d.properties.NAME; }); | |
| }; | |
| </script> |
We can make this file beautiful and searchable if this error is corrected: It looks like row 4 should actually have 7 columns, instead of 6 in line 3.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Nombre Población Porcentaje_Población Densidad Superficie Porcentaje_superficie Comunidad_Autónoma | |
| Álava 321932 0.69 106 3037 0.6 País Vasco | |
| Albacete 395007 0.85 26.46 14926 2.96 Castilla-La Mancha | |
| Alicante 1 842963 3.97 316.82 5817 1.15 Comunidad Valenciana | |
| Almería 690851 1.49 78.73 8775 1.74 Andalucía | |
| Asturias 1041754 2.22 98.25 10603 2.10 Asturias | |
| Ávila 165786 0.36 20.59 8050 1.60 Castilla y León | |
| Badajoz 686032 1.48 31.52 21766 4.31 Extremadura | |
| Barcelona 5427322 11.69 701.84 7733 1.53 Cataluña | |
| Burgos 366900 0.78 26.17 14022 2.77 Castilla y León | |
| Cáceres 405560 0.87 20.41 19868 3.94 Extremadura | |
| Cádiz 1 248625 2.69 167.82 7440 1.47 Andalucía | |
| Cantabria 588656 1.26 110.63 5321 1.05 Cantabria | |
| Castellón 574906 1.24 86.63 6636 1.31 Comunidad Valenciana | |
| Ciudad Real 514543 1.11 25.97 19813 3.93 Castilla-La Mancha | |
| Córdoba 795718 1.71 57.78 13771 2.73 Andalucía | |
| La Coruña 1128807 2.43 141.99 7950 1.58 Galicia | |
| Cuenca 206653 0.44 12.06 17140 3.40 Castilla-La Mancha | |
| Gerona 740537 1.59 125.32 5909 1.17 Cataluña | |
| Granada 919329 1.98 72.69 12646 2.51 Andalucía | |
| Guadalajara 254388 0.55 20.83 12214 2.41 Castilla-La Mancha | |
| Gipuzkoa 707298 1.52 354.18 1997 0.39 País Vasco | |
| Huelva 522216 1.12 51.57 10127 2.01 Andalucía | |
| Huesca 221942 0.48 14.19 15636 3.10 Aragón | |
| Baleares 1124 744 2.42 225.35 4991 0.99 Islas Baleares | |
| Jaén 652253 1.40 48.33 13496 2.67 Andalucía | |
| León 480209 1.03 30.82 15580 3.09 Castilla y León | |
| Lérida 430655 0.93 35.38 12172 2.41 Cataluña | |
| Lugo 338873 0.73 34.38 9856 1.95 Galicia | |
| Madrid 6377364 13.73 794.48 8027 1.59 Comunidad de Madrid | |
| Málaga 1632949 3.52 223.51 7306 1.45 Andalucía | |
| Murcia 1463249 3.15 129.34 11313 2.24 Región de Murcia | |
| Navarra 636638 1.37 61.27 10391 2.05 Navarra | |
| Orense 318739 0.69 43.82 7273 1.44 Galicia | |
| Palencia 165782 0.36 20.59 8052 1.60 Castilla y León | |
| Las Palmas 1106779 2.38 272.27 4065 0.81 Canarias | |
| Pontevedra 948496 2.04 211.09 4494 0.89 Galicia | |
| La Rioja 319002 0.68 62.16 5045 0.99 La Rioja | |
| Salamanca 342045 0.74 27.70 12349 2.45 Castilla y León | |
| Santa Cruz de Tenerife 1021868 2.20 302.24 3381 0.67 Canarias | |
| Segovia 158085 0.34 22.84 6920 1.35 Castilla y León | |
| Sevilla 1939625 4.17 138.19 14036 2.78 Andalucía | |
| Soria 92221 0.2 111.77 10306 2.04 Castilla y León | |
| Tarragona 792619 1.71 125.77 6302 1.25 Cataluña | |
| Teruel 137838 0.30 9.31 14809 2.96 Aragón | |
| Toledo 699136 1.49 45.49 15369 3.04 Castilla-La Mancha | |
| Valencia 2521681 5.43 233.34 10807 2.14 Comunidad Valenciana | |
| Valladolid 527508 1.14 65.04 8110 1.61 Castilla y León | |
| Bizkaia 1151905 2.46 519.58 2217 0.44 País Vasco | |
| Zamora 184238 0.40 17.45 10561 2.09 Castilla y León | |
| Zaragoza 960111 2.05 55.58 17274 3.41 Aragón | |
| Ceuta 84726 0.18 4 579.78 18.5 Ceuta | |
| Melilla 84621 0.18 6 315.00 13.4 Melilla |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment