Suggestion of how to visualize municipalities on https://klimawatch.codefor.de/
https://bl.ocks.org/jonek/raw/5648ae644f9c4ffd9bffc6bed78dbce8/
Suggestion of how to visualize municipalities on https://klimawatch.codefor.de/
https://bl.ocks.org/jonek/raw/5648ae644f9c4ffd9bffc6bed78dbce8/
license: apache-2.0 | |
height: 900 |
<!DOCTYPE html> | |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
<style> | |
h1 { | |
font-family:arial; | |
font-size:2em; | |
color:#333; | |
} | |
h2 { | |
font-family:arial; | |
font-size:1.5em; | |
color:#666; | |
} | |
#map { | |
display: flex; | |
justify-content: end; | |
} | |
#info { | |
position:absolute; | |
top: 10px; | |
left: 10px; | |
} | |
.municipality { | |
fill: #e5e5e5; | |
stroke: #fff; | |
stroke-width:1px; | |
} | |
.municipality:hover { | |
fill: #4974a5; | |
} | |
.highlighted { | |
fill: #01873b; | |
} | |
</style> | |
<body> | |
<div id="info"> | |
<h1 id="name"></h1> | |
<h2 id="code"></h2> | |
</div> | |
<div id="map"> | |
</div> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var width = 800; | |
var height = 900; | |
var svg = d3.select('#map').append('svg') | |
.attr('width', width) | |
.attr('height', height); | |
var projection = d3.geoMercator() | |
.center([10.4, 51.3]) | |
.scale(3900) | |
.translate([width / 2, height / 2]); | |
var path = d3.geoPath() | |
.projection(projection); | |
let municipalitiesWithData = ['DED51', 'DEA23', 'DE600', 'DEA33', 'DE122', 'DEB33']; | |
let files = [ | |
'250_NUTS3_simplified_wgs84.topo.json' | |
]; | |
d3.json(files[0], function(error, de) { | |
//console.log(de); | |
svg.selectAll('.municipality') | |
.data(topojson.feature(de, de.objects.NUTS3_250).features) | |
.enter() | |
.append('path') | |
.attr('class', 'municipality') | |
.classed('highlighted', d => municipalitiesWithData.includes(d.properties.NUTS_CODE)) | |
.attr('d', path) | |
.on('mouseover', function(d) { | |
var code = d.properties.NUTS_CODE; | |
document.getElementById('code').innerHTML=code; | |
var name = d.properties.NUTS_NAME; | |
return document.getElementById('name').innerHTML=name; | |
}); | |
}); | |
</script> | |
</body> | |
</html> |