D3 Geojson map won't display

Question

I'm trying to display a map of DMA's from a Geojson file but the map won't load. I believe it is a scaling/positioning issue but none of the fixes I've found have worked. Looking for any help.

var width = 960
        var height = 500

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


        d3.json("nielsenDMA.json", function(error, data) {
            if(error) throw error;

            var projection = d3.geoMercator().fitSize([width, height], geojson);
            var path = d3.geoPath().projection(projection);

            g.selectAll("path")
                .data(data.features)
                .enter()
                .append("path")
                .style("fill", "red")
                .style("stroke-width", "1")
                .style("stroke", "black");


        });

hello and welcome to stackoverflow! do you have the error message text to help aid the community in troubleshooting your issue? — Matthew Thurston, Jun 11 '19 at 02:03
There is no error message. The Canvas is there when I inspect the page but the map does not show up. This is why I believe it's a scaling or position issue but none of the fixes I've found change the outcome. — dhaef, Jun 11 '19 at 02:28
thank you for clarifying - I found a potential resource from a similar question posted elsewhere. hope this helps! https://stackoverflow.com/a/14691788/4846648 — Matthew Thurston, Jun 11 '19 at 02:34
The suggested reference is good for v3, but v4 and v5 incorporated the fitSize and fitExtent methods to deal with this problem specifically. D3 does not throw errors if there is an error in the geojson, can you share the geojson or a sample of it? And, while you see the SVG in the inspector, do you see any paths while inspecting the SVG or is it empty? — Andrew Reid, Jun 11 '19 at 04:28

torresomar · Accepted Answer · 2019-06-11T06:17:08.053

Without having a sample of the json file or the version of d3 you are using it is pretty difficult to understand why the map rendering is failing, because of this I will assume the following, I think you might want to use a file similar to this one and that you are using the latest d3 version. The d3.json function in d3 v5 is just a parsing utility built on to of fetch as the docs explain.

The fetch() method takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise that resolves to the Response to that request, whether it is successful or not. You can also optionally pass in an init options object as the second argument (see Request).

The important part is that it returns a Promise, now lets see the docs for d3.json

d3.json(input[, init])

Fetches the JSON file at the specified input URL. If init is specified, it is passed along to the underlying call to fetch.

The second optional argument is an init object that allows you to control a number of different settings with the fetch request.

So why the code you provided doesn't work? Well the callback you are providing is not being called at all. It is being passed as the second argument for the function, which won't do nothing at all.

The correct way to get the data is by using the Promise returned by the function:

d3.json("url-to-retrieve")
  .then(data => {
     console.log(data);
  })
  .catch(err => {
     console.log(err);
  });

With that in mind we just need to use the correct projection for the data and being careful of whether you are using a topojson or geojson file.

In this case this geojson file works with the geoMercator projection.

d3.json("url-to-retrieve")
.then(data => {
  var width = 960,
    height = 500;
  // Create a projection fitted to our width/height
  var projection = d3.geoMercator() 
    .fitSize([width, height], data);
  // Creates a new geographic path generator
  var path = d3.geoPath()
    .projection(projection);

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

  svg.append("rect")
    .attr("class", "background")
    .attr("fill", "#cacaca")
    .attr("width", width)
    .attr("height", height);

  svg.append("g")
    .attr("id", "dmas")
    .selectAll("path")
    .data(data.features)
    .enter()
    .append("path")
    .attr('fill', 'white')
    .attr('stroke', '#222')
    .attr('stroke-width', '2')
    .attr("d", path);

})
.catch(err => {
  console.log(err);
});

Here is a jsfiddle with the above code.

It worked! Sorry for the lack of info there. Very new to this and really appreciate the help! — dhaef, Jun 11 '19 at 23:05

D3 Geojson map won't display

1 Answers1