Topography via D3js image processing by hugolpz

Proof of concept of grayscale image recolored directly via D3js color scale. Wikimaps colors used.

Source: The source image is a global heightmap from the Shuttle Radar Topography Mission, released as part of NASA’s Blue Marble collection at 8km resolution. The topography data is stored in a simple 130KB black&white, 8-bit PNG. In it, darker values represent lower elevations (sea floor), lighter values represent higher elevations (mountains).

Colors are read out of the image using the Canvas API.

Data properties:

[0,255]: there are 8 bits per channel, values range thus is [0-255].
0: the deepest depression below sea level.
14: is the Sea level.

Formerly, Mike Bostock used the 5th, 50th and 95th percentiles for land elevation as 15, 35 and 132 respectively; quantiles being an effective way to maximize contrast while remapping colors, similar to auto-tone features popular in image editors.

The percentiles are used as the domain of a diverging linear scale; red values are below the median elevation, and blue values are above. Interpolating in HCL colorspace improves perception.

Stylesheet: this dataviz follow the Wikipedia Maps Conventions for Topographic maps.

var color = d3.scale.linear()
   .domain([0,14,15,40,100,200])
   .range([
           "#71ABD8", //-10000m dark blue
           "#D8F2FE", //     0m light-blue
        "#94BF8B", //     1m green
        "#EFEBC0", //   300m yellow
        "#AA8753", //  3000m brown
        "#FFFFFF"]) //~6000m white
   .interpolate(d3.interpolateHcl);

Binary images can store lots of data efficiently. Also, see Mike Bostock’s :

Note: Semantically, traditional rainbow color scale are to avoid since rainbow color scales are harmful. To do better, let’s use perceptually-optimized scales.

Topography via D3js image processing

index.html