Inverse Projection

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Inverse Projection</title>

<style>

body {
    margin: 0;
  }

svg {
    background-color: #4B4B55;
    cursor: crosshair;
  }

.sphere {
    fill: none;
    stroke: #d6ff9f;
  }

.coords {
    stroke: none;
    fill: #8DBD0C;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
  }

.land {
    fill: #8DBD0C;
    fill-opacity: 0.25;
    stroke: #8DBD0C;
    stroke-width: 1;
  }
  </style>

// Set the dimensions of the map
    var width  = 960,
        height = 480;

// Create a selection for the container div and append the svg element
    var div = d3.select('#map-container'),
        svg = div.append('svg');

// Set the size of the SVG element
    svg.attr('width', width).attr('height', height);

// Create a text element to write the coordinates
    var label = svg.append('text')
      .classed('coords', true)
      .attr('x', 20)
      .attr('y', 30);

// Create and configure a geographic projection
    var projection = d3.geo.equirectangular()
      .translate([width / 2, height / 2]);

// Create and configure a path generator
    var pathGenerator = d3.geo.path()
      .projection(projection);

// Create and configure the graticule generator (one line every 20 degrees)
    var graticule = d3.geo.graticule()
      .step([20, 20]);

// Retrieve the geographic data asynchronously
    d3.json('land.topojson', function(err, data) {

// Throw errors on getting or parsing the file
      if (err) { throw err; }

// Convert the TopoJSON features to GeoJSON
      var features = topojson.feature(data, data.objects.land);

// Sphere
      var sphere = svg.selectAll('path.sphere').data([{type: 'Sphere'}]);

sphere.enter().append('path').classed('sphere', true);
      sphere.attr('d', pathGenerator);
      sphere.exit().remove();

// Land
      var land = svg.selectAll('path.land').data([features]);

land.enter().append('path').classed('land', true);
      land.attr('d', pathGenerator);
      land.exit().remove();

});

// Attach a listener for the mousemove event
    svg.on('mousemove', function(ev) {

// Get the (x, y) position of the mouse (relative to the SVG element)
      var pos = d3.mouse(svg.node()),
          px = pos[0],
          py = pos[1];

// Compute the corresponding geographic coordinates using the inverse projection
      var coords = projection.invert([px, py]);

// Format the coordinates to have at most 4 decimal places
      var lon = coords[0].toFixed(4),
          lat = coords[1].toFixed(4);

// Set the content of the label
      label.text([lat, lon].join(', '));
    });

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js