Create A Curved Border Around A D3 Map Projection

I have created a world map in d3 using the geoNaturalEarth1() shown here. I used a geojson map of the world with this projection to get the map as shown in the code below. However,

Solution 1:

You can provide geojson with type Sphere to the path generator:

The type Sphere is also supported, which is useful for rendering the outline of the globe; a sphere has no coordinates. (docs)

This looks like:

var outline = {type:"Sphere"}

And it can be passed directly to the path generator:

var context = d3.select("canvas").node().getContext("2d"),
    projection = d3.geoNaturalEarth1()
      .scale(70)
      .translate([200,100])
    path = d3.geoPath()
      .context(context)
      .projection(projection);

d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
  if (error) throw error;

  context.beginPath();
  context.fillStyle = "lightgreen";
  path(topojson.feature(world, world.objects.land));
  context.fill();
  
  context.beginPath();
  context.strokeStyle = "#ccc";
  path({type: "Sphere"})
  context.stroke();
  
});

<canvas width="500" height="300"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>

---

As an aside, there is also d3.geoGraticule, which allows for drawing meridians and parallels at regular intervals:

var context = d3.select("canvas").node().getContext("2d"),
        projection = d3.geoNaturalEarth1()
          .scale(70)
          .translate([200,100])
        path = d3.geoPath()
          .context(context)
          .projection(projection);

    d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
      if (error) throw error;

      context.beginPath();
      context.fillStyle = "lightgreen";
      path(topojson.feature(world, world.objects.land));
      context.fill();
  
      context.beginPath();
      context.strokeStyle = "#eee";
      path(d3.geoGraticule10())
      context.stroke();
      
      context.beginPath();
      context.strokeStyle = "#000";
      path({type:"Sphere"})
      context.stroke();        
      
    });

<canvas width="500" height="300"></canvas>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>

Solution 2:

Translating the code of Andrew Reid, whom I thank for the explanation, to SVG instead of canvas the code is the following

var projection = d3.geoNaturalEarth1()
  .translate([w / 2, h / 2])
  .scale(247);

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

svg.enter("path")
  .datum({type: "Sphere"})
  .attr("d", path)
  .style("fill", "none")
  .style("stroke", "black")
  .style("stroke-width", 3);