jonek/.a map for klimawatch.md

## .a map for klimawatch.md

      
    Raw
  

              .a map for klimawatch.md
            
          
    Suggestion of how to visualize municipalities on https://klimawatch.codefor.de/
Preview

https://bl.ocks.org/jonek/raw/5648ae644f9c4ffd9bffc6bed78dbce8/
Blocks

https://bl.ocks.org/jonek/5648ae644f9c4ffd9bffc6bed78dbce8

  
## .block
license: apache-2.0
height: 900

## 250_NUTS3_simplified_wgs84.topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              250_NUTS3_simplified_wgs84.topo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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>
	<!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>