Customize color scale and palette

Color Palette customization (done) https://github.com/keplergl/kepler.gl/pull/601

User should be able to design custom color palette, they should be able to

• Click using custom color palette to toggle color palette editor
• Start from blank, or start from an existing palette, (advanced: paste an array of hex values into an input box)
• Edit color value using a color picker, or input rgb, hex value
• Add and remove colors
• Drag to reorder colors

Color Value customization (in progress)

User should be able to import values next to each color, using dropdown for ordinal values and input box for numeric values. There will be a distribution graph for numeric values, user can drag the slider handle to adjust value range of each bin

Ordinal values

Implementation Step:

1. Store value color Map in layer.config.colorUI.colorRange.customPalette, create a new prop colorMap and save it as a JS Map

const colorMap = new Map([["foo", "#FFFFFF"], ["bar", "#000000"], ["foo1", "#FF0000"]]);

only store values manually selected by user. if user is using the “assign rest to one color” option, don’t store all the rest of the values to the map, later when create color scale, use the .unknown() method to assign color to the rest of values.

1. When calculate color based on custom color scale in layer.getVisChannelScale(base-layer.js). Use D3.ordinalScale and pass in the colorMap and a value for unknown

m = d3.scaleOrdinal()
  .domain(colorMap.keys())
  .range(colorMap.values())
.unknown('#fff000') // assign rest value to a color value 

[Numeric values]

Add more color scale options

• Add log, sqrt and Jenkins natural break scale

Implementation steps:

1. add log and sqrt scale (done) https://github.com/keplergl/kepler.gl/pull/670 1.5 add Jenkins natural breaks scale (in progress)
2. Add a 'Use custom color palette ’ toggle under the reserved toggle (done) https://github.com/keplergl/kepler.gl/pull/601
3. Allow edit color value using a color picker, or input rgb, hex value (done) https://github.com/keplergl/kepler.gl/pull/601
4. Add input box to custom value domain for each color (ordinal and numeric value has different input UI) (not started)
5. Add distribution graph for numeric values (not started)

[heshan0131]

Adding value customization is in progress:

[davidwedekind]

Hi, Will this also include manual color range specification? It would be very useful not only to have automatic color range determination such as by quantile or quantize but manual range specification like in QGIS. E. g. color “#FFC300” for values between 0 and 50, “#F1920E” for values between 51 and … Thx, David