Map does not render in D3

Question

I am trying to render this simple map in D3, but its showing absolutely nothing. Here is the JSON file a link. I ran this JSON file through jsonlint so guess the file is okay. However it does not show a thing.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"      type="text/javascript" ></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
  <link rel="stylesheet" href="#">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
<h3>Map</h3>
<div>
  <script type="text/javascript">
  var projection = d3.geo.mercator()
    .scale(29100)
    .translate([7310, 3500]);

     var path = d3.geo.path();
     .projection(projection);
     d3.json("pak.json", function(json) {
     g.append("g")
     .attr("id", "District")
        svg.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", d3.geo.path());

});
  </script>
  </div>

</body>
</html>

What is this `g` that you're appending to? – Lars Kotthoff Apr 17 '14 at 21:26 — Lars Kotthoff, Apr 17 '14 at 21:26

score 0 · Answer 1 · answered Apr 17 '14 at 23:10

You haven't actually created an svg, that's why you won't see anything.

Also, there are a few things in your code that will throw errors. You are referring to the svg and g variables without defining them. You have a semicolon separating path from .projection. Here's the basic idea of what you'll want to do, but you'll need to make adjustments to it according to your data:

// setup your path and projection functions
var projection = d3.geo.mercator()
  .scale(29100)
  .translate([7310, 3500]);
var path = d3.geo.path()
  .projection(projection);

// create an svg
var svg = d3.select('body').append('svg')
  // give it a size, you'll need to adjust this to fit your needs
  .attr('width', 500)
  .attr('height', 300)

// load the json file
d3.json('pak.json', function(json) {
  // when it loads, create a 'g' element inside the svg
  svg.append('g')
    .attr('id', 'District')
    // bind your data to it
    .data(json.features)
      // append a 'path' to the 'g' element for each datum
      .enter()
      .append('path')
        // use your path function to construct a path based on the data
        .attr('d', path)

score 0 · Answer 2 · edited May 23 '17 at 12:11

The main thing is that the svg hasn't been defined. You need to have an svg canvas if you want to use svg on your page. It looks to me as if the sv were accidently cut off when copy and pasting the line g.append etc.

Once that was sorted out the scale and translation need to be updated to get your map viewable. You can use trial and error to get this right or calculate it. If you want to calculate it. this question is worth a read.

Another thing was changing the .attr("path", ...) line. You had already defined the path variable that would generate the paths, so there was no need to repeat it, just call the variable.

// changed the scale and translation to something more suitable var projection = d3.geo.mercator()
    .scale(1700)
    .translate([-1700, 1200]);

// setup dimensions of svg container 
var h = 500,
    w = 900;

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

// create svg container (NB this requires a div with id map
var svg = d3.select("#map")
    .append("svg")
    .attr("height", h)
    .attr("width", w);

d3.json("pak.json", function(json) {

    // Not sure what this is meant to do
    svg.append("g")
        .attr("id", "District");

    // The last line just needs to call the path variable defined above
    svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);

});

Thanks for your help I was able to render the map finally. – user343 Apr 24 '14 at 11:23 — user343, Apr 24 '14 at 11:23

Map does not render in D3

2 Answers2