FrieseWoudloper/index.html

## index.html
<!DOCTYPE html>
<head>
    <style>
        path {
            fill: #ccc;
            stroke: #fff;
            stroke-width: .5px;
        }
        path:hover {
            fill: orange;
        }
        div.tooltip {
            position: absolute;
            text-align: center;
            width: 100%;
            height: 14px;
            padding: 2px;
            font: 12px sans-serif;
            background: #fff;
            border: 0px;
            pointer-events: none;
	    white-space: nowrap;
        }
    </style>
</head
<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <div class="graph"></div>
    <script>
    var w = 600;
		var h = 400;
		//setup our display area
		var svg = d3.select("#"+divName)
            .append('svg')
            .attr('w',w+'px')
            .attr('h',h+'px');

		var projection = d3.geo.mercator()
								.translate([w/2, h/2]);
		//						.scale([500]);
		var path = d3.geo.path()
						.projection(projection);


		//load the data
		//url = "https://gist.githubusercontent.com/michellechandra/0b2ce4923dc9b5809922/raw/a476b9098ba0244718b496697c5b350460d32f99/us-states.json"
		url = "https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wfs?service=wfs&request=GetFeature&typeName=cbs_arrondissementsgebied_2019_gegeneraliseerd&outputFormat=json&srsName=EPSG:4326";
		d3.json(url, function(json) {
			svg.selectAll('path')
				.data(json.features)
				.enter()
				.append("path")
				.attr('d', path);

		});
    </script>
</body>
	<!DOCTYPE html>
	<head>
	<style>
	path {
	fill: #ccc;
	stroke: #fff;
	stroke-width: .5px;
	}
	path:hover {
	fill: orange;
	}
	div.tooltip {
	position: absolute;
	text-align: center;
	width: 100%;
	height: 14px;
	padding: 2px;
	font: 12px sans-serif;
	background: #fff;
	border: 0px;
	pointer-events: none;
	white-space: nowrap;
	}
	</style>
	</head
	<body>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<div class="graph"></div>
	<script>
	var w = 600;
	var h = 400;
	//setup our display area
	var svg = d3.select("#"+divName)
	.append('svg')
	.attr('w',w+'px')
	.attr('h',h+'px');

	var projection = d3.geo.mercator()
	.translate([w/2, h/2]);
	// .scale([500]);
	var path = d3.geo.path()
	.projection(projection);


	//load the data
	//url = "https://gist.githubusercontent.com/michellechandra/0b2ce4923dc9b5809922/raw/a476b9098ba0244718b496697c5b350460d32f99/us-states.json"
	url = "https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wfs?service=wfs&request=GetFeature&typeName=cbs_arrondissementsgebied_2019_gegeneraliseerd&outputFormat=json&srsName=EPSG:4326";
	d3.json(url, function(json) {
	svg.selectAll('path')
	.data(json.features)
	.enter()
	.append("path")
	.attr('d', path);

	});
	</script>
	</body>