Testing a prototype new graphics pipeline for d3.geo. The red lines are the front hemisphere, while the gray lines are the back hemisphere. Back-hemisphere clipping is achieved by first clipping around the antipode of the front hemisphere, and then applying an additional rotation.
forked from mbostock's block: Back-facing Hemisphere
xxxxxxxxxx
<meta charset="utf-8">
<body>
<script src="./d3.js"></script>
<script>
var width = 960,
height = 960,
scale = width / 2 - 4;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var graticule = d3.geo.graticule()();
d3.json('https://gist.githack.com/mbostock/15a373ce034cbc4ad604767c0eac05cb/raw/6756e7381ffe26d285adcb99129b1234e2327634/milky-way.json', function(err, mwGeoJson) {
d3.timer(function(elapsed) {
var renderBack = d3.geo.pipeline()
.source(d3.geo.jsonSource)
.pipe(d3.geo.rotate, elapsed * .0002 + Math.PI, -elapsed * .0001, 0)
.pipe(d3.geo.clipCircle, Math.PI / 2)
.pipe(d3.geo.rotate, Math.PI, 0, 0)
.pipe(d3.geo.project, d3.geo.orthographic, .3 / scale)
.sink(d3.geom.contextSink, context)
var renderFront = d3.geo.pipeline()
.source(d3.geo.jsonSource)
.pipe(d3.geo.rotate, elapsed * .0002, elapsed * .0001, 0)
.pipe(d3.geo.clipCircle, Math.PI / 2)
.pipe(d3.geo.project, d3.geo.orthographic, .3 / scale)
.sink(d3.geom.contextSink, context);
context.clearRect(0, 0, width, height);
context.save();
context.translate(width / 2, height / 2);
context.scale(scale, -scale);
context.beginPath();
renderBack(graticule);
context.lineWidth = 1 / scale;
context.strokeStyle = "#999";
context.stroke();
context.beginPath();
renderBack(mwGeoJson);
context.fillStyle = "#999";
context.fill();
context.beginPath();
renderFront(graticule);
context.lineWidth = 1.5 / scale;
context.strokeStyle = "red";
context.stroke();
context.beginPath();
renderFront(mwGeoJson);
context.fillStyle = "rgba(255,0,0,0.1)";
context.fill();
context.restore();
});
});
</script>