Mismatched length between sequential visualization colors and colorRange prop for Deck.gl map layer components

[jaronheard]

Description

Some Deck.gl layers expect a colorRange array of 6 colors, but the sequential visualization colors arrays in our theme have 9 colors.

As noted by @mendozaline here, this affects the ScreenGridMap component, but may impact other map components:

3. The colorRange prop should only take an array of 6 colors, according to the deck.gl documentation.

• I think this is why the map doesn't display all 9 colors from the CIVIC thermal color scheme. It may be only using the first six colors in the array. This could be why the map appears so light

Definition of done

• Components in component-library using Deck.gl layers with colorRange prop have an array length added to their PropTypes
• Sequential visualization color arrays are available in VisualizationColors.js for each length of colorRange needed for Deck.gl layers
• Usage of sequential visualization color arrays in other packages (e.g. Sandbox) adjusted to use sequential color arrays

One elegant way would be to provide a function for each sequential visualization color that takes a length and returns an array of the proper length.