Kepler.gl: Customize color scale and palette

[heshan0131]

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)

[alejokp]

I would love this!

[chrisgervang]

I’d like to recommend react-color as a nice picker component :)

https://casesandberg.github.io/react-color/

[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

[vladimir-kondratenko]

@heshan0131 Do we have actions/helpers to change layer's color programmatically?

[macrigiuseppe]

landed

[DavidTrafi]

Hi,
First of all, the new color palette feature is awesome!!! Thanks for constantly improving kepler. I assumed there was also going to be a function to change the color scale, e. g. based on fixed custom intervals. Is such a function planned/ coming soon?
Thanks for your answer.
Best,
David

[heshan0131]

Adding value customization is in progress:

[bartekmaciejewski]

Hi,
I've found this value customization feature important for me. Are you still working on it? Maybe I could help?

Cheers
Bartek

[miketsui3a]

Is the value customization still in progress?

[heshan0131]

This got put away for a little while, we just resumed the work. Should come out in the next month or so

[Stepulin]

Hi,
sorry to bother you, but I would like to ask you - are there any updates regarding to this function?
Thank you very much in advance

[lucasvw]

This got put away for a little while, we just resumed the work. Should come out in the next month or so

Hi heshan0131, sorry to bother you on this. Is the value customization still in the pipeline?

[zhenliangma]

Is the value customization ready to use?

[npahl]

me too, I would love to use the value customization.

[EzequielPuerta]

Im waiting for this. it will be awesome...

[diego-ch]

do we have any updates on this?

[KrimsN]

I'm waiting for the opportunity to set the palette statically from min to max, and not relatively as now.

[jooglyp]

do we have any updates on this?