title: Drawing map with d3js from openstreetmap geojson
body: <p>Hy </p>
  
  <p>I'm trying to draw an svg with d3.v3.js from geojson. I fetch the geojson from openstreetmap(my test data: <a href="http://pastebin.com/4GQne42i" rel="nofollow">http://pastebin.com/4GQne42i</a>) and try to render it to svg.</p>
  
  <p>My JS code:</p>
  
  <pre><code>var path, vis, xy, jdata;
  
      xy = d3.geo.mercator().translate([0, 0]).scale(200);
  
      path = d3.geo.path().projection(xy);
  
      vis = d3.select("body").append("svg").attr("width", 960).attr("height", 600);
  
      //22.json is the name of the file which contains the geojson data
      d3.json("22.json", function(error, json) { 
        jdata = json;
        if(error!=null)
      console.log(error);
        return vis.append("svg:g")
            .selectAll("path")
            .data(json.coordinates)
            .enter().append("path")
            .attr("d", path);
      });
  </code></pre>
  
  <p>And somehow my svg result is this:</p>
  
  <pre><code>&lt;svg width="960" height="600"&gt;
   &lt;g&gt;
    &lt;path&gt;&lt;/path&gt;
   &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I know the projection is not good, but I think the svg should have nodes.</p>
  
  <p>What is the problem with my code? Would you post a correct solution?</p>