Color Range Explorer

Color Range Explorer is a javascript library which creates an interactive color scale for exploring color-mapped, continuous data. There’s a link to the github project below, as well as some examples.

The map of the SF Bay Area to the right shows elevation data between Bernal Hill, and SFO. I created a fictional terrain color scale which creates water, beaches, forests and mountains.

The beach region initially represents about a 6m change in elevation. Drag the color bar horizontally to move the beach up and down the landscape. Use the mouse wheel, or pinch the bar to widen or shrink the size of the beach area.

I made this because I wanted something which let me explore color scaled plots more easily. Check out the github project for source code.

The numeric scale can be panned and zoomed as well. This is useful if you’re satisfied with the color scale, and would like to move the data within it.

Thermal Imaging

Interactive Example | Video

Splitting up the color scale into discrete levels is useful for seeing contour lines, and grouping ranges of values. For example, plotting a 30 degree scale with 30 levels means that all values plotted by a single color lay within a 1 degree band.

Try examining the thermal image to the right using different numbers of levels.

CFD Data

Interactive Example | Video

Compare the color scale with a color scale.

The rainbow color scale is commonly used by NASA to display CFD results. It’s very pretty, but not very useful.

For an engineer concerned with which regions were above or below a certain value, a bipolar color scale is much more useful. With this scale, any regions in red are above the center value and regions in blue are below.