Click for a new map and palette. Move the mouse sideways to change where the light source is.
[There is also a pure SVG map with elevation contours.]
This SVG filter generates elevation, flat waters and icy mesas. Also see my previous filter and twitter/@monfera for visualizations including glitchy shots from making this block. A couple of D3 color scales are added but otherwise there’s no dependency, it’s kept minimal.
This block has:
- generative topographic map creation with SVG
- use of a D3 or custom palette in an SVG filter, testing with pretty topo palettes
- bump mapping and lighting
Sometimes we lean on D3 for things that the underlying standards already provide, or miss opportunities. I’m impressed by Nadieh Bremer’s work with filters which shows how much can be done beyond the basics.
Palette copyrights in the source. Palette authors:
- tv-a: Jim Mossman
- wiki-schwarzwald-cont: W-j-s and Jide
- viridis, magma: Stéfan van der Walt and Nathaniel Smith, via D3 by Mike Bostock (not meant for topography)
This is what I wanted:
- find out how a custom palette (e.g. from d3-scale or d3-scale-chromatic can be applied via SVG filters, which have no direct notion of palettes or color scales
- explore some promising topographic and topographic-bathymetric color schemes for future D3 / WebGL tasks; I’m on the lookout for other open source topo or topo-bathy runs too
- have a contour or shaded map backdrop for datavis or UI prototyping without the need to load an actual map
- D3 works with Web standards like SVG, so most D3 learning is standards learning
- SVG filters are a simple dataflow language, and as I’m working on declarative and data flow oriented WebGL visualization tools, I wanted to refresh my memory on how this graphics DAG works
- try to make something pretty
- relive the SVG filter creation fun I had when working on a geotemporal dashboard a few years ago
I found that:
- this technique can be equally applied to rendering real DEMs rather than just noise
- my D3 and other work benefits from exploring corners of SVG that are lesser used with D3 or in general
- SVG is very powerful, but it’s not quite true to its name - it is scalable spatially, but is NOT scalable temporally (slow), all signs point to browser makers not investing too much in its performance (basic rendering such as CSS/SVG transform isn’t even hardare accelerated as of Aug 2016, unlike the HTML DOM)
- custom palettes could be passed on fairly simply with SVG, a limitation being that the input domain is sliced to even intervals, I haven’t found a way of passing on the percentage thresholds
- it’s easy to generate the basics such as the noise and the contours, but building the full data flow and tweaking the visuals took long hours
Built with blockbuilder.org
