D3.js map visualization v7

Community Help
1

Please guys, im trying to understand why this code doesnt work for version 7 of d3.js. It s working for version 4

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<!-- <script src="https://d3js.org/d3.v4.js"></script> -->
<script src="https://d3js.org/d3.v7.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="400" height="300"></svg>

<script>
    // The svg
    var svg = d3.select("svg")
        width = +svg.attr("width"),
        height = +svg.attr("height");
    
    // Map and projection - centraliza em bangkok
    //var projection = d3.geoNaturalEarth1()
    var projection = d3.geoMercator()
        .scale(width / 1.3 / Math.PI)
        .translate([width / 2, height / 2])
        //.center([100, 13])
        //.rotate([0., 0])
        //.parallels([0, 0])
        //.scale(800)
        //.translate([width / 2, height / 2]);

    
    // Load external data and boot
    //d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
    d3.json("world.geojson", function(data){
        // Draw the map
        svg.append("g")
            .selectAll("path")
            .data(data.features)
            .enter().append("path")
                .attr("fill", "#69b3a2")
                .attr("d", d3.geoPath()
                    .projection(projection)
                )
                .style("stroke", "#fff")
    })
</script>
2

d3.json now returns a promise, instead of calling a callback function. So you might want to try changing the call to

d3.json("world.geojson").then(function(data){ …