Orthographic Labels

A quick demonstration of projected labels.

This was achieved by:

Creating labels in Inkscape and converting to paths
Overlaying labels on a Mercator Projection
Finding the geographic coordinates of the paths using projection.invert() and path.getPointAtDistance()
Creating a geojson from the converted points
Displaying the geojson

The base orthographic map shown here is a slight modification (moved to v4) of Mike's rotating orthographic bl.ock. The idea came from the answer here on Stack Overflow.

Why Mercator? Because lines of latitude and longitude are straight, which makes placing text easier. Placing things other than long strings of text, I'd probably use an azimuthal equidistant rotated to center the object to be projected.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #fcfcfa;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 720,
    speed = 1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};

var projection = d3.geoOrthographic()
    .scale(height / 2.1)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .precision(.5);

var graticule = d3.geoGraticule();

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

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

d3.json("oceanLabels.geojson", function(error, labels) {
  if (error) throw error;
  
  d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, topo) {
  
  var land = topojson.feature(topo, topo.objects.land),
      borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; }),
      grid = graticule();

d3.timer(function() {
    projection.rotate([speed * (Date.now() - start), -15]);

context.clearRect(0, 0, width, height);

context.beginPath();
    path(sphere);
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.stroke();

context.beginPath();
    path(sphere);
    context.fillStyle = "#fff";
    context.fill();
	
	context.beginPath();
    path(labels);
	context.fillStyle = "lightblue";
	context.strokeStyle = "lightblue";
	context.fill();
	context.stroke();

context.beginPath();
    path(land);
    context.fillStyle = "#222";
    context.fill();

context.beginPath();
    path(borders);
    context.lineWidth = .5;
    context.strokeStyle = "#fff";
    context.stroke();

context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();
    });
  });
});

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js