Built with blockbuilder.org
forked from geraldo's block: d3-geomap choropleth with labels
license: mit |
Built with blockbuilder.org
forked from geraldo's block: d3-geomap choropleth with labels
<!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 { | |
stroke: black; | |
stroke-width: 0.5px; | |
pointer-events: none; | |
} | |
.place-label.shadow { | |
stroke: white; | |
stroke-width: 2.5px; | |
opacity: 0.9; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="d3-geomap" id="map"></div> | |
</body> | |
<script src="//unpkg.com/d3@5.9.2/dist/d3.min.js"></script> | |
<script src="//unpkg.com/topojson@3.0.2/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 csv = {}; // save csv file as json | |
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); | |
d3.csv('muertos_gusen_mauthausen.csv').then(data => { | |
map.draw(svg.datum(data)); | |
saveCsvAsJson(data); | |
}); | |
function drawLabels() { | |
// white shadow | |
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 shadow") | |
.style("font-size", "8px") | |
.attr("x", function(d) { return map.path.centroid(d)[0]; }) | |
.attr("y", function(d) { return map.path.centroid(d)[1]+4; }) | |
.attr("text-anchor","middle") | |
.text(function(d) { return csv[d.properties.name].num; }) | |
.on('click', map.clicked.bind(map)); | |
// black text | |
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") | |
.style("font-size", "8px") | |
.attr("x", function(d) { return map.path.centroid(d)[0]; }) | |
.attr("y", function(d) { return map.path.centroid(d)[1]+4; }) | |
.attr("text-anchor","middle") | |
.text(function(d) { return csv[d.properties.name].num; }) | |
.on('click', map.clicked.bind(map)); | |
} | |
function saveCsvAsJson(data) { | |
for (var id in data) { | |
csv[data[id].name] = data[id]; | |
} | |
} | |
</script> | |
</html> |
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 |