Overview

Demonstrates P5jsColorRamp capabilites, to provide for multi-segment color bands for elevation tints, precipitation maps, etc.

This is intended to reusable component and plan to enhance with more flexibility of passing in color values.

Controls

Via Settings Panel

• color_ramp toggles between the 3 supported color-ramps, elevation, visibleSpectrum and temperatureScale

References:

• My Ecosystem sketch in which I first tried out a rudimentary color-ramp / elevation-tint / hyposometric-tint (not knowing the name). Specifically in the cell_viewer.js renderCell() function.
• ravenmaps.com - Elevation Tints - Somewhat related, it expresses the importance of using region-relative elevation scales.
• ArcGIS - Better Colors for Better Mapping The complexity and breadth of their offering validates my simple build out here.
• rampgenerator.com is a site that allows you select from a series of templates, similar to what I strived for here, and offers more controls to generate color ramps.
• Wikipedia - Hypsometric Tints, this article speaks to my primary use case as I seek to develop more maps.

Links:

• Live View
• Source on Github

Screenshot:

Elevation

Visible Spectrum

Temperature Scale