Mark Mark - 5 months ago 49
JSON Question

Cannot show map d3.js with JSON file

I have the following code where I am trying to make a map of the world excluding Antarctica.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style>

body {
background-color: white;
}
svg {
background-color: white;
}

</style>

</head>

<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 1160;

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

d3.json("countries.json", function(error, world) {
if (error) return console.error(error);
console.log(world);
});

svg.append("path")
.datum(topojson.feature(world, world.objects.subunits))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});
</script>
</body>
</html>


When I try to open the html page nothing appears, and the error it gives is:

Failed to load resource: net::ERR_FILE_NOT_FOUND


I am following the tutorial from Mike Bostock that can be found here: https://bost.ocks.org/mike/map/.
I already have tried numerous of commands and also trying to acces the file using the correspondent path of it.
These are the commands I tried (using the correspondent local host links of them):

python -m SimpleHTTPServer
python3 -m http.server
npm install -g http-server
http-server -c-1


If anyone could tell me what I am doing wrong it would be great! I have checked my code a thousand of times and I honestly don't know what I am doing wrong.
Thanks in advance!

I tried to open the file in firefox now and the ERROR it gives is:

TypeError: world.objects is undefined

Answer

First at all: when you make a map must to define: map's center, scale and projection. (This's word map no need center)

Second: your data is a geojson and you use it as .topojson. Allways try to use .topojson:

  • Original file (geojson): 561 Kb
  • Converted file (topoJSON): 75 Kb

Here you can find your map converted:

TopoJSON Word Map

And here the complete code:

<head>
  <meta charset="utf-8">
  <style>
    body {
      background-color: white;
    }
    svg {
      background-color: white;
    }
    .county {
        fill:#696;
        stroke:#666;
        stroke-width:1px;
    }
  </style>
</head>
<body>
  <!-- D3 Base -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
  <!-- TopoJSON Library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
  <script>
    var width = 960,
        height = 1160;

    var scal = (1 << 10) / 2 / Math.PI;     //<-- Scale
    var projection = d3.geo.mercator().scale(scal).translate([width / 2, height / 2]);           //<-- Projection
    var center = projection(cent);
    var path = d3.geo.path().projection(projection);

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

    d3.json("word.topojson", function(error, world) {
      if (error) return console.error(error);

      var countries = topojson.feature(world, world.objects.collection);
      svg.selectAll("path")
          .data(countries.features)
        .enter()
          .append("path")
          .attr("class", "county")      //<-- Class to style your countries
          .attr("d", path);
    });
  </script>
</body>
</html>

Thats will give you something like this:

enter image description here

Recommendations

  • Phyton SimpleHTTPServer, work well but it's better to go with something more solid. Install WAMP if you are on Windows or XAMPP if you are on Linux
  • Try diffents browsers, I've found some bug on Firefox with SVG and Maths. Overall projection maths and representation.-