'D3 Not Rendering or Misrendering Select GeoJSON files

I have a series of GeoJSON files downloaded from a gazeteer being rendered via the following code:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
/* CSS goes here. */
.label {
  fill: #000;
  font-size: 10px;
  font-weight: 300;
  text-anchor: middle;
}
div.tooltip-mappiece {
     position: absolute;
     text-align: center;
     padding: 10px;
     background: white;
     color: #000;
     border: 1px solid #000;
     border-radius: 5px;
     pointer-events: none;
     height: 15px;
     width: 150px;
}
</style>
</head>
<body>
    
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<script>
var width = 960, height = 800;
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var projection = d3.geoAlbers().translate([width / 2, height / 2]).center([23,42]).scale(100);
var div = d3.select("body").append("div").attr("class", "tooltip-mappiece").style("opacity", 0);

var files = [
    {filename:"topo-arcticsea.json",name:"ArcticSea",color:"#88AED0",link:""},
    {filename:"topo_atlantic_antartic.json",name:"AtlanticAntartic",color:"#88AED0",link:""},
    {filename:"topo_atlantic_eastern_central.json",name:"AtlanticEasternCentral",color:"#88AED0",link:""},
    {filename:"topo_atlantic_northeast.json",name:"AtlanticNortheast",color:"#88AED0",link:""},
    {filename:"topo_atlantic_northwest.json",name:"AtlanticNorthwest",color:"#88AED0",link:""},
    {filename:"topo_atlantic_southeast.json",name:"AtlanticSoutheast",color:"#88AED0",link:""},
    {filename:"topo_atlantic_southwest.json",name:"AtlanticSouthwest",color:"#88AED0",link:""},
    {filename:"topo_atlantic_western_central.json",name:"AtlanticWesternCentral",color:"#88AED0",link:""},
    {filename:"topo_indian_antartic_southern_ocean.json",name:"IndianAntarticSouthernOcean",color:"#88AED0",link:""},
    {filename:"topo_indian_ocean_eastern.json",name:"IndianOceanEastern",color:"#88AED0",link:""},
    {filename:"topo_indian_ocean_western.json",name:"IndianOceanWestern",color:"#88AED0",link:""},
    {filename:"topo_mediterranean_black_sea.json",name:"MediterraneanBlackSea",color:"#88AED0",link:""},
    {filename:"topo_pacific_antarctic.json",name:"PacificAntarctic",color:"#88AED0",link:""},
    {filename:"topo_pacific_eastern_central.json",name:"PacificEasternCentral",color:"#88AED0",link:""},
    {filename:"topo_pacific_northeast.json",name:"PacificNortheast",color:"#88AED0",link:""},
    {filename:"topo_pacific_northwest.json",name:"PacificNorthwest",color:"#88AED0",link:""},
    {filename:"topo_pacific_southeast.json",name:"PacificSoutheast",color:"#88AED0",link:""},
    {filename:"topo_pacific_southwest.json",name:"PacificSouthwest",color:"#88AED0",link:""},
    {filename:"topo_pacific_western_central.json",name:"PacificWesternCentral",color:"#88AED0",link:""},
    {filename:"topo_africa.json",name:"Africa",color:"#77a361",link:""},
    {filename:"topo_antarctica.json",name:"Antarctica",color:"#bad0ae",link:""},
    {filename:"topo_asia.json",name:"Asia",color:"#80a96b",link:""},
    {filename:"topo_europe.json",name:"Europe",color:"#9bbb8a",link:""},
    {filename:"topo_north_america.json",name:"NorthAmerica",color:"#7ca666",link:""},
    {filename:"topo_south_america.json",name:"SouthAmerica",color:"#adc79f",link:""},
    {filename:"topo_australia.json",name:"Australia",color:"#92b580",link:""},
];


getJSONFile = function(filename,callback,metadata){
    d3.json(files[i].filename, function(error,file){callback(error,file,metadata)});
}

for(var i = 0; i < files.length; i++){
    getJSONFile(files[i].filename,
        function(error,file,metadata){
            if(metadata.type == "continent"){
                var subobj = metadata.continent;
            }else{
                var subobj = metadata.name;
            }
        if (error) return console.error(error);
        var path = d3.geo.path().projection(projection);
        svg.append("path")
            .datum(topojson.feature(file, file.objects[metadata.name]))
            .attr("d",path)
            .attr("fill", metadata.color)
            .attr("stroke", "black")
            .on("mouseover", function(){
                d3.select(this)
                .style("fill", metadata.color)
                .style("fill-opacity","0.85");

                div.transition()
                .duration('5')
                .style("opacity", 1)

                div.html(metadata.name)
                .style("left", (d3.event.pageX + 10) + "px")
                .style("top", (d3.event.pageY - 15) + "px");;
            })
            .on("mouseout", function(){
                d3.select(this)
                .style("fill",metadata.color)
                .style("fill-opacity","1.0")

                div.transition()
               .duration('5')
               .style("opacity", 0)

      });
    },
    files[i]);
}
</script>

Most of the files render fine, but two do not:

topo_australia.json does not appear at all
topo_atlantic_antartic.json has a sizeable gap at the top of the region

Both render as expected if loaded into an online geojson preview tool. Similar questions (first example; second example) suggest the issue is normally related to needing projection, but all files are using the same projection here, so I don't see how a few specific ones could cause issues. If the problem is with the files themselves, then I don't understand why they are rendering without issue in other tools.

Anyone know what might be going on and how to fix the issue?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'D3 Not Rendering or Misrendering Select GeoJSON files

Sources

Related Questions