Last active
October 23, 2019 21:56
-
-
Save yaph/5714d48fee1f1996415f73549e1b15c6 to your computer and use it in GitHub Desktop.
d3-geomap label example for stackoverflow.com/questions/58520822
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link href="https://d3-geomap.github.io/d3-geomap/d3-geomap.css" rel="stylesheet"> | |
| <style> | |
| .place-label { | |
| fill: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="d3-geomap" id="map" style="width: 960px;"></div> | |
| </body> | |
| <script src="//unpkg.com/[email protected]/dist/d3.min.js"></script> | |
| <script src="//unpkg.com/[email protected]/dist/topojson.min.js"></script> | |
| <script src="https://d3-geomap.github.io/d3-geomap/d3-geomap.min.js"></script> | |
| <script> | |
| let selector='#map', | |
| svg = d3.select(selector), | |
| bbox=d3.select(selector).node().getBoundingClientRect(), | |
| width=bbox.width, | |
| height=0.4*bbox.width, | |
| scale=[width], | |
| tr=[width/2+200,height/2+650]; | |
| var format = function(d) { | |
| return d3.format(',.0f')(d); | |
| } | |
| var map = d3.choropleth() | |
| .geofile('https://d3-geomap.github.io/d3-geomap/topojson/countries/ESP.json') | |
| .projection(d3.geoMercator) | |
| .column('num') | |
| .unitId('name') | |
| .colors(d3.schemeYlOrRd[9]) | |
| .legend(true) | |
| .format(format) | |
| .width(width) | |
| .height(height) | |
| .scale(scale) | |
| .translate(tr) | |
| .postUpdate(drawLabels); | |
| function drawLabels() { | |
| map.svg.append("g").attr('class', 'zoom') | |
| .selectAll("text") | |
| .data(topojson.feature(map.geo, map.geo.objects.units).features) | |
| .enter().append("text") | |
| .attr("class", "place-label") | |
| .attr("x", function(d) { return map.path.centroid(d)[0]; }) | |
| .attr("y", function(d) { return map.path.centroid(d)[1]; }) | |
| .attr("text-anchor","middle") | |
| .text(function(d) { return d.properties.name; }) | |
| .on('click', map.clicked.bind(map)); | |
| } | |
| d3.csv('muertos_gusen_mauthausen.csv').then(data => { | |
| map.draw(svg.datum(data)); | |
| }); | |
| </script> | |
| </html> |
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
| id | name | num | |
|---|---|---|---|
| 51 | Ceuta | 1 | |
| 52 | Melilla | 4 | |
| 1 | Álava | 5 | |
| 26 | La Rioja | 7 | |
| 21 | Huelva | 11 | |
| 37 | Salamanca | 12 | |
| 38 | Santa Cruz de Tenerife | 12 | |
| 40 | Segovia | 13 | |
| 49 | Zamora | 13 | |
| 42 | Soria | 14 | |
| 35 | Las Palmas | 17 | |
| 34 | Palencia | 19 | |
| 36 | Pontevedra | 20 | |
| 27 | Lugo | 21 | |
| 32 | Orense | 22 | |
| 20 | Gipuzkoa | 24 | |
| 24 | León | 24 | |
| 31 | Navarra | 26 | |
| 9 | Burgos | 28 | |
| 47 | Valladolid | 33 | |
| 7 | Baleares | 34 | |
| 48 | Bizkaia | 36 | |
| 5 | Ávila | 40 | |
| 15 | La Coruña | 46 | |
| 10 | Cáceres | 54 | |
| 11 | Cádiz | 59 | |
| 39 | Cantabria | 59 | |
| 16 | Cuenca | 59 | |
| 41 | Sevilla | 80 | |
| 19 | Guadalajara | 82 | |
| 2 | Albacete | 92 | |
| 33 | Asturias | 100 | |
| 13 | Ciudad Real | 102 | |
| 12 | Castellón | 108 | |
| 3 | Alicante | 119 | |
| 23 | Jaén | 132 | |
| 17 | Gerona | 141 | |
| 6 | Badajoz | 143 | |
| 4 | Almería | 145 | |
| 29 | Málaga | 147 | |
| 46 | Valencia | 166 | |
| 25 | Lérida | 171 | |
| 18 | Granada | 177 | |
| 44 | Teruel | 183 | |
| 45 | Toledo | 183 | |
| 50 | Zaragoza | 207 | |
| 30 | Murcia | 233 | |
| 43 | Tarragona | 239 | |
| 14 | Córdoba | 241 | |
| 22 | Huesca | 259 | |
| 28 | Madrid | 275 | |
| 8 | Barcelona | 569 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment