CODEWITHSUNDEEP
javascriptd3.jssvggeojsontopojson
connoisseur
connoisseur

Reputation: 187

D3 Map not showing despite having it on my web server

I have been working on d3 JavaScript library and I was trying to come up with a map that can render on the svg tags on my html. This is what I have so far:

<!DOCTYPE html>
<html>
    <head>
        <title>D3 Map</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/vendor/jquery.min.js"></script>
        <script src="js/d3.min.js"></script>
        <script src="http://d3js.org/topojson.v1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
    </head>
    <body>
        <svg width="1000" height="1300">

        </svg>
        <script>
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(900)
    .rotate([-180,0]);

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

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

var g = svg.append("g");

// load and display the World
d3.json("kenya.geojson", function(error, data) {
    g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

</script>
    </body>
</html>

I only get a blank page with my web inspectir telling me of an Uncaught ReferenceError: topology is not defined Now here is where I need some clarification: Am I using the correct data file (json data file) that will give me the drawings for a specific country? Or what is it that I'm missing from my code so far? Also with regards to the exception, what could be the exception being caught given that I'm working from a Python HTTP server? Any feedback is welcome

Upvotes: 0

Views: 337

Answers (1)

rby
rby

Reputation: 786

As the error said, the variable topology is not defined in your code. In your d3.json call, data should be topology. So make that change and try it again (as follows):

`d3.json("geojson", function(error, topology) {
   g.selectAll("path")
    .data(topojson.object(topology, topology.objects.countries)
      .geometries)
    ...
  });

Upvotes: 1

Related Questions