From GeoJSON to TopoJSON in D3.js

forked from emacgillavry's block: From GeoJSON to TopoJSON in D3.js

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Maps in D3js</title>
        <meta name="description" content="Maps in d3js">
        <meta name="author" content="Edward Mac Gillavry">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="d3js">
        <link rel="shortcut icon" href="">
        <style>
            body {
                background-color: #fffaf5;
            }
            svg {
                background-color: #fffaf5;
            }
            .gemeente {
                fill: #ccc;
                stroke-width: 0.4;
                stroke: #fff;
            }
        </style>
    </head>
    <body>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="https://d3js.org/topojson.v1.min.js"></script>
        <script>
            let width = 450,
                height = 600,
                svg = d3.select("body")
                    .append("svg")
                    .attr('width', width)
                    .attr('height', height);
            d3.json("gemeenten2017.topojson", function(error, municipalities) {
                if (error) throw error;
                let gemeenten = topojson.feature(municipalities, municipalities.objects.municipalities);
                let projection = d3.geoMercator()
                    .fitSize([width, height], gemeenten);
                let path = d3.geoPath()
                    .projection(projection);
                svg.append("g")
                    .selectAll("path")
                    .data(gemeenten.features)
                    .enter()
                    .append("path")
                    .attr("class","gemeente")
                    .attr("d", path)
                    .append("title")
                    .text(function(d) { return d.properties.name});
            });
        </script>
    </body>
</html>

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

https://d3js.org/topojson.v1.min.js