0

I have rendered the world map using world-110m topojson. I directly used the code provided by Jakob on D3 mapping tutorial - http://www.digital-geography.com/d3-js-mapping-tutorial-1-set-initial-webmap/#.V4iGN9J97IV

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Set a style for our worldshape-data -->
  <style>
  path {
    stroke: red;
    stroke-width: 0.5px;
    fill: grey;
  }
  </style>
<body>

  <!-- implementation of the hosted D3- and TopoJson js-libraries -->
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>

  <!-- map creation --> 
  <script>
  // canvas resolution
  var width = 1000,
      height = 600;

  // projection-settings for mercator    
  var projection = d3.geo.mercator()
      // where to center the map in degrees
      .center([0, 50 ])
      // zoomlevel
      .scale(100)
      // map-rotation
      .rotate([0,0]);

  // defines "svg" as data type and "make canvas" command
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  // defines "path" as return of geographic features
  var path = d3.geo.path()
      .projection(projection);

  // group the svg layers 
  var g = svg.append("g");

  // load data and display the map on the canvas with country geometries
  d3.json("world-110m.json", function(error, topology) {
      g.selectAll("path")
        .data(topojson.object(topology, topology.objects.countries)
            .geometries)
      .enter()
        .append("path")
        .attr("d", path)
  });

  // zoom and pan functionality
  /*var zoom = d3.behavior.zoom()
      .on("zoom",function() {
          g.attr("transform","translate("+ 
              d3.event.translate.join(",")+")scale("+d3.event.scale+")");
          g.selectAll("path")  
              .attr("d", path.projection(projection)); 
    });

  svg.call(zoom)*/

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

Now i want to reuse this code to render the map of India. But when I link it to India topoJSON file, only a blank SVG is created. The js console gives an error - topojson.v0.min.js:1 Uncaught TypeError: Cannot read property 'type' of undefined

I have placed world-110m.json and india.json on dropbox - https://www.dropbox.com/sh/wrxyngyq4jdie9c/AACG2-dTzC79rRvlxlOC5poBa?dl=0

  • I take it there are no errors in the js console? – John Powell Jul 15 '16 at 7:39
  • @JohnBarça the console gives an error - topojson.v0.min.js:1 Uncaught TypeError: Cannot read property 'type' of undefined – Rohan Bapat Jul 15 '16 at 8:06
  • Interestingly, both topojson files work with techslides.com/demos/d3/d3-geo-renderer.html, so the problem is not there. You might need to use the non-minified version of topojson.js to see what is causing the error? I assume there is no error with the world version? – John Powell Jul 15 '16 at 8:12
  • @JohnBarça - Both the topojson files in dropbox (world-110m.json and india.json) are prettified versions, if thats what you were referring to. And yes the world-110 version is rendered perfectly. I have been through multiple tutorials on geojson and topojson using D3, but hands-on is a different matter altogether – Rohan Bapat Jul 15 '16 at 8:21
  • My question is whether the world-110 version also gives a console error. No, I was referring to the topojson.v0.min.js, which is minimized. If you use the unminified version, you might find it easier to find out what the error Cannot read propery of type of undefined means. – John Powell Jul 15 '16 at 8:29
2

I think this is a possible answer:

The topojson file world-110m.json may have a different object tree with respect to india.json. The topojson files are all quite different. you should check if they both have the same hierarchy. If not, try to edit the code accordingly or the json file accordingly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.