Reputation: 11

D3 GeoJSON generated from TopoJSON renders some but not all features.. why is this?

I am trying to render a congressional boundaries map using d3. I am able to do this with the plain geojson file, but because it is quite large, I was trying to trim it down geo2topo. Now when I try to render the topojson file in d3 by calling the topojson.feature() API method, and then pass the new returned feature collection it only renders some of the geometries but not all. I have tested the topojson file on https://geojson.io/, where it able to render it correctly. So I am now a bit stumped about what to do.

<!DOCTYPE html>
<div id="container"></div>
<script src="d3.v7.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

<center>
    <div id="map"></div>
</center>
<style>
    #map {
        margin: 10px;
    }
</style>
<script>
    const longitude = -96;
    const latitude = 39;
    const scaleValue = 1000;
    const width = 960;
    const height = 640;

    // zoom helper funcitons
    function zoomFunction(event) {
        d3.selectAll("path")
            .attr("transform", event.transform);
        d3.selectAll("circle")
            .attr("transform", event.transform);
    }

    var zoom = d3.zoom()
        .scaleExtent([.6, 7])
        .on("zoom", zoomFunction);

    // Load the files and then call the render function
    function loadFiles() {
        // load all the files here
        const mapDataPromise = d3.json('assets/2002usaSIMPLE.topo.json');

        // Use Promise.all to wait for all promises to resolve for each file
        Promise.all([mapDataPromise])
            .then(([data]) => {
                const data2 = topojson.feature(data, data.objects["2002usa"])
                // Render the chart with both datasets
                renderChart(data2);
            })
            .catch(error => {
                console.error('Error loading files:', error);
            });
    }

    // Do actual rendering of map
    function renderChart(data) {

        const projection = d3.geoAlbersUsa()
            .scale(scaleValue)
            .translate([width / 2, height / 2]);

        const pathGenerator = d3.geoPath().projection(projection);

        const svg = d3.select("#map")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .style("border", "2px solid black");

        const innerSpace = svg
            .append("g")
            .attr("class", "inner_space")
            .call(zoom);

        var usaSVG = innerSpace
            .selectAll(".feature")
            .data(data.features)
            .enter().append("path")
            .attr("class", "feature")
            .attr("d", pathGenerator)
            .attr("fill", "lightblue")
            .attr("stroke", "blue")
            .on("error", (error) => console.error("Error rendering feature:", error)); // Log rendering errors;
    }

    loadFiles();
</script>

I tried to see if the topojson -> geojson api conversion call produced a broken geojson file, but it does not appear to be broken, because I can load it in mapshaper.org.

Upvotes: 0

D3 GeoJSON generated from TopoJSON renders some but not all features.. why is this?

Answers (0)

Related Questions