SVG non-rotating version of a rotating transparent globe by Mike Bostock.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #fcfcfa;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script>
var width = 960,
height = 960,
speed = -1e-2,
start = Date.now();
var sphere = {type: "Sphere"};
var projection = d3.geo.orthographic()
.scale(width / 2.1)
.translate([width / 2, height / 2])
.precision(.5);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
d3.json("world-110m.json", function(error, topo) {
if (error) throw error;
var land = topojson.feature(topo, topo.objects.land),
grid = graticule();
console.log(land)
console.log(grid)
projection.clipAngle(180);
svg.selectAll("path.background")
.data([land])
.enter()
.append("path")
.attr("class", "background")
.attr("d", path)
.style("fill", "lightgray")
.style("stroke", "gray")
.style("stroke-width", "1px");
svg.selectAll("path.gridbg")
.data([grid])
.enter()
.append("path")
.attr("class", "gridbg")
.attr("d", path)
.style("fill", "none")
.style("stroke", "darkgrey")
.style("stroke-width", "1px");
projection.clipAngle(90);
svg.selectAll("path.foreground")
.data([land])
.enter()
.append("path")
.attr("class", "foreground")
.attr("d", path)
.style("fill", "pink")
.style("stroke", "red")
.style("stroke-width", "1px");
svg.selectAll("path.gridfg")
.data([grid])
.enter()
.append("path")
.attr("class", "gridfg")
.attr("d", path)
.style("fill", "none")
.style("stroke", "darkgreen")
.style("stroke-width", "1px");
});
d3.select(self.frameElement).style("height", height + "px");
</script>