2

I am following tutorial in Scott Murray's D3 book. I have the following HTML / JS / D3 code script from the book:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Loading GeoJSON data and generating SVG paths</title>
        <script type="text/javascript" src="../d3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 300;

            //Define path generator, using the Albers USA projection
            var path = d3.geoPath()
                         .projection(d3.geoAlbersUsa());

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Load in GeoJSON data
            d3.json("us-states.json", function(json) {
                
                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path);
        
            });
            
        </script>
    </body>
</html>

I am using D3 v5. When I refresh my localhost browser I see nothing. I do have an error but that error is always there even for other chunks of code that works.

enter image description here

Any ideas / suggestions for why this is? ...and how to fix it?

PineNuts0
  • 4,740
  • 21
  • 67
  • 112

1 Answers1

1

From d3 v5 d3.json() doesn't use callback functions anymore, instead it needs to be a promise:
https://github.com/d3/d3/blob/main/CHANGES.md#changes-in-d3-50

stackzebra
  • 450
  • 1
  • 6
  • 13