Forked from Canvas globe with cities
to illustrate how to simulate depth using the d3.geoDistance() function, using an interactive globe (zoom & rotate).
Also demonstrates additive blending via context.globalCompositeOperation = 'lighter', where drawing pixels on top of each other adds the RGB values. Starting with any base color that has non-zero red, blue and green components will ultimately saturate to white, giving a glow effect. This is different than opacity-based blending where continually over-drawing using a partially transparent color eventually converges to the non-transparent version of that same color.
Here we use a blue => red color shift and simulate a see-through world, but we could equally hide points where distance > π/2. We need to dim colors based on the normal vector at the globe’s surface to avoid a “glow” effect around the edges where points tend to overlap more often.
Built with blockbuilder.org