title: D3 mapping with geoJson US Map working but not World
body: <p>Hi I have been following an example on how to create a geo map using D3 and a Geo Json file.</p>
  
  <p>So far I have created the following no problem using this book:
  h**p://chimera.labs.oreilly.com/books/1230000000345/ch12.html#_projections</p>
  
  
  
  <pre><code>    &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript"&gt;
  
                      //Width and height
                      var w = 500;
                      var h = 300;
  
                      //Define map projection
                      var projection = d3.geo.albersUsa()
                                         .translate([w/2, h/2])
                                         .scale([500]);
  
                      //Define path generator
                      var path = d3.geo.path()
                                   .projection(projection);
  
                      //Create SVG element
                      var svg = d3.select("body")
                                              .append("svg")
                                              .attr("width", w)
                                              .attr("height", h);
  
                      //Load in GeoJSON data
                      d3.json("us-states.json", function(json) {
  
                              //Bind data and create one path per GeoJSON feature
                              svg.selectAll("path")
                                 .data(json.features)
                                 .enter()
                                 .append("path")
                                 .attr("d", path);
  
                      });
  
              &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>using this json file: 
  <a href="https://dl.dropboxusercontent.com/u/49159198/us-states.json" rel="nofollow">https://dl.dropboxusercontent.com/u/49159198/us-states.json</a></p>
  
  <p>When I try to create world map using the following json file (In the same format as US just countries not states) it does not come out right.</p>
  
  <p><a href="https://dl.dropboxusercontent.com/u/49159198/countries.geo.json" rel="nofollow">https://dl.dropboxusercontent.com/u/49159198/countries.geo.json</a></p>
  
  <p>The US map comes out as a black regtangle. After applying some stroke to the path in CSS I can see that the map is there but this will not work as I need to edit the path later on through data from a CSV.</p>
  
  <p>Code for world map:</p>
  
  
  
  <pre><code>    &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript"&gt;
  
                      //Width and height
                      var w = 960;
                      var h = 480;
  
  
  
                      var projection = d3.geo.equirectangular()
                                        .translate([w/2, h/2])
                                       .scale([150]);
  
                                      var path = d3.geo.path()
                                          .projection(projection);
  
                      //Create SVG element
                      var svg = d3.select("body")
                                              .append("svg")
                                              .attr("width", w)
                                              .attr("height", h);
  
                      //Load in GeoJSON data
                      d3.json("countries.geo.json", function(json) {
  
                              //Bind data and create one path per GeoJSON feature
                              svg.selectAll("path")
                                 .data(json.features)
                                 .enter()
                                 .append("path")
                                 .attr("d", path);
  
                      });
  
              &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any help would be great as it will be aiding my college project.</p>
  
  <p><em><strong>Updated due to answers below</em></strong></p>