score:12

Accepted answer

you don't need to loop through the array of features. your data file is a featurecollection, which d3 can draw, either as a single path element:

svg.append("path").datum(data).attr("d", d3.geo.path());

or as separate path elements, one for each feature (country):

svg.selectall("path").data(data.features)
  .enter().append("path").attr("d", d3.geo.path())

by default d3 uses the projection d3.geo.albersusa() which brings hawaii to mexico and alaska to just outside the tropics. you can switch to the equirectangular projection to see the whole world:

d3.json(
  "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
  function(error, data) {
    var projection = d3.geo.equirectangular();
    var path = d3.geo.path().projection(projection);
    var width = 960;
    var height = 600;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    svg.selectall("path")
      .data(data.features)
      .enter().append("path")
      .attr("d", path)
      .attr("fill", "#3e429a");
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


epilogue: i initially tried to use the more common mercator projection, only to find that it cannot handle antarctica. d3 draws the shape for the continent, then fills the rest of the oceans instead.

in the same d3 forum thread, the author of d3 mentioned a bug in the topojson tool used to generate maps, so it might be an issue with the data file you use. if you prefer mercator, you might need to work with the maintainer of geo-boundaries-world-110m to fix the data file, or just exclude antarctica from your maps.

demo of antarctica in mercator:

d3.json(
  "https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
  function(error, data) {
    var projection = d3.geo.mercator();
    var path = d3.geo.path().projection(projection);
    var width = 960;
    var height = 600;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    var antarctica = data.features.splice(6, 1);
    // now "data" has the rest of the world
    svg.selectall("path")
      .data(antarctica)
      .enter().append("path")
      .attr("d", path)
      .attr("stroke", "red").attr("stroke-width", 10)
      // thick borders so we can see the odd paths
      .attr("fill", "#3e429a");
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query

More Query from same tag