Groninger gemeenten

Gemeenten in de provincie Groningen gevisualiseerd met Turf en D3. Bron: bestuurlijke grenzen WFS van PDOK.

<!DOCTYPE html>
<head>
    <style>
        path {
            fill: #ccc;
            stroke: #fff;
            stroke-width: .5px;
        }
        path:hover {
            fill: orange;
        }
        div.tooltip { 
            position: absolute;     
            text-align: center;     
            width: 80px;          
            height: 14px;         
            padding: 2px;       
            font: 12px sans-serif;    
            background: #fff; 
            border: 0px;        
            pointer-events: none;     
        }
    </style>
</head
<body>    
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turf.js/5.1.5/turf.min.js"></script>
    <div class="graph"></div>
    <script>
        var width = 700, height = 400;
        var svg = d3.select(".graph").append("svg")
                                     .attr("viewBox", "0 0 " + (width) + " " + (height))
                                     .style("max-width", "700px");
        var url = "https://geodata.nationaalgeoregister.nl/bestuurlijkegrenzen/wfs?service=wfs&request=GetFeature&typeName=bestuurlijkegrenzen:gemeenten&cql_filter=gemeentenaam%20IN%20(%27Het%20Hogeland%27,%20%27Loppersum%27,%20%27Appingedam%27,%20%27Westerkwartier%27,%20%27Groningen%27,%20%27Delfzijl%27,%20%27Midden-Groningen%27,%20%27Oldambt%27,%20%27Veendam%27,%20%27Pekela%27,%20%27Westerwolde%27,%20%27Stadskanaal%27)&outputFormat=json&srsName=EPSG:4326"; 
        var tooltip = d3.select("body")
	                    .append("div") 
                        .attr("class", "tooltip")       
                        .style("opacity", 0);
        d3.json(url, function(error, mapdata) {
            var fixed = mapdata.features.map(function(f) {
                return turf.rewind(f, {reverse:true}); 
            });
            var projection = d3.geoMercator();
            var path = d3.geoPath().projection(projection);
            projection.fitSize([width, height], {"type": "FeatureCollection", "features": fixed});
            svg.append("g")
               .attr("class", "gemeente")
               .selectAll("path")
               .data(fixed)
               .enter()
               .append("path")
               .attr("d", path)
		       .on("mouseover", function(d) {    
                   tooltip.transition()    
                          .duration(200)    
                          .style("opacity", .9);    
                   tooltip.html(d.properties.gemeentenaam)  
                          .style("left", (d3.event.pageX) + "px")   
                          .style("top", (d3.event.pageY - 28) + "px");  
                })          
                .on("mouseout", function(d) {   
                   tooltip.transition()    
                          .duration(500)    
                          .style("opacity", 0); 
                }); 
        });
    </script>
</body>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js to https://cdnjs.cloudflare.com/ajax/libs/turf.js/5.1.5/turf.min.js

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js