How to set custom color ranges on deck.gl hexagon layer? - deck.gl

Question

I want to assign colors to predefined ranges, eg red for 100-200, blue for <100 with no success.
I can set the colors but not custom ranges.
How can i do this or at least How deck quantize the color scaling?

Answer 1

You can do something like that
First of all, import from d3-scale package scaleThreshold, for example:
import { scaleThreshold } from 'd3-scale';
Now define your scale color function:
const colorScaleFunction = scaleThreshold()
.domain([1, 2, 3, 4, 5, 6])
.range([
[65, 182, 196],
[254, 178, 76],
[253, 141, 60],
[252, 78, 42],
[227, 26, 28],
[189, 0, 38],
]);
Then define your layer, for example a GeoJson layer.
Start with importing it:
import { GeoJsonLayer } from '#deck.gl/layers';
then define layer:
const geoJsonLayer = new GeoJsonLayer({
id: 'geojson-layer-example',
data: dataExample, /* just use some data */
getFillColor: (d) => colorScaleFunction(d.properties.someValue),
pickable: true,
});
Now you can render it:
return (
<DeckGL
layers={geoJsonLayer}
initialViewState={YOUR_INITIAL_VIEW_STATE}
controller={true}
>
<StaticMap
reuseMaps
mapStyle={YOUR_MAP_STYLE}
preventStyleDiffing={true}
mapboxApiAccessToken={YOUR_MAPBOX_TOKEN}
/>
</DeckGL>
);
Thats all, I think.