# D3.js map visualization v7

**URL:** <https://talk.observablehq.com/t/d3-js-map-visualization-v7/6476>\
**Category:** Help\
**Created:** [April 25, 2022, 5:24pm UTC](https://talk.observablehq.com/t/d3-js-map-visualization-v7/6476 "2022-04-25T17:24:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![gluizon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gluizon/32/6406_2.png) [@gluizon](https://talk.observablehq.com/u/gluizon)\
**Post date:** [April 25, 2022, 5:24pm UTC](https://talk.observablehq.com/t/d3-js-map-visualization-v7/6476/1 "2022-04-25T17:24:15Z")

</div>

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

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [April 25, 2022, 5:25pm UTC](https://talk.observablehq.com/t/d3-js-map-visualization-v7/6476/2 "2022-04-25T17:25:23Z")

</div>

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){ …`
