Map NOT loading using d3.js?

Question

This's my first attempt to use d3 for web maps and I faced weird problem even though I literally copied the same source code. However, the map won't load I don't know if the problem from the data or there's something wrong in the code. Hope someone can figure it out !!

This's the code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    </head>
    <body>
        <script type="text/javascript">
            d3.select("body").append("p").text("new paragraph!");

            var svg = d3.select("body").append("svg")
                .attr("width", 960)
                .attr("height",1160)

            d3.json("usa.geojson", function (data) {

                var group = svg.selectAll("g")
                    .data(data.features)
                    .enter()
                    .append("g")

                var projection = d3.geo.mercator();
                var path = d3.geo.path().projection(projection);

                var areas = group.append("path")
                    .attr("d",path)
                    .attr("class", "area")
                    .attr("fill", "steelblue") 
            });

        </script>
    </body>

The geojson file:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"properties": { "GEO_ID": "0400000US23", "STATE": "23", "NAME": "Maine",
"LSAD": "", "CENSUSAREA": 30842.923000 }, 
"geometry": { "type": "MultiPolygon", "coordinates":

Graham · Accepted Answer · 2017-09-28 23:30:23Z

1

There are two issues with your code:

The GeoJSON you provided via your comment/dropbox is malformed. It is cut off on line 44 for the state of arizona.
You could improve on your JSON callback function to properly handle errors. As the API docs have it on d3.json():

the callback is invoked with two arguments: the error, if any, and the parsed JSON

You should define a callback featuring two parameters
```
d3.json("usa.geojson", function (error, data) {
```

I have corrected these errors and put together a working Plunk. Please note, that in this example only a handful of states are displayed because I had to cut down the usa.geojson file to handle it on plnkr.co.

edited Sep 28, 2017 at 23:30

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered May 27, 2015 at 16:00

altocumulus

21.7k13 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2234003 Over a year ago

thank you for noticing that. However, the map still won't load !!

altocumulus Over a year ago

What exactly do you mean by "won't load"? Do you have any errors in the console? Is the data being loaded? Does any portion of your code work, i.e. is there any svg output at all. To get further assistance it would be of great help if you provided a complete example to play around with (Plunk, JSFiddle). A link to the example you derived your code from might also be of interest.

user2234003 Over a year ago

So basically there's nothing showing in the console so i guess there's no error. However, i added this line d3.select("body").append("p").text("new paragraph!"); to make sure that d3 is working fine and the only thing showing in the page is "new paragraph!" nothing else !! and regarding the source code i took it from this video tutorial youtube.com/… you can fine a lot of geojson files available online eric.clst.org/Stuff/USGeoJSON

altocumulus Over a year ago

To get more help you should put together a MCVE including the code as well as any input files required to reproduce your results / errors. There won't be that many people around willing to gather up the bits and pieces to build an example for you.

user2234003 Over a year ago

I added up everthing in a dropbox, this's the link dropbox.com/sh/tofcwyc1gedre60/AADF8HR1Va2S7-mF52M_kTfha?dl=0

|

Collectives™ on Stack Overflow

Map NOT loading using d3.js?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related