How create a HexagonLayer with log size scale - mapbox-gl-js

Question

I've created a layer in 3D that render and works perfectly.
I want to create a HexagonLayer where his elevation will be based on SUM of all volumes that I think I'm doing correctly.
But I don't know do that size scale should by log as you can see in kepler image.
How can work with log size scale??
Here is my code:
const BLUE_COLORS = [
[230, 250, 250],
[193, 229, 230],
[157, 208, 212],
[117, 187, 193],
[75, 167, 175],
[0, 147, 156],
];
const material = {
ambient: 0.64,
diffuse: 0.6,
shininess: 32,
specularColor: [51, 51, 51],
};
class DeckGLOverlay extends Component {
constructor(props) {
super(props);
this.state = {
x: null,
y: null,
hoveredObject: null,
id: uuidv4(),
};
}
getCoordinates = () => {
let coordinates = [];
const { data3d } = this.props;
data3d.forEach(supplypoint => {
if (
!supplypoint.geojson ||
(supplypoint.geojson &&
supplypoint.geojson &&
!supplypoint.geojson.coordinates)
) {
return;
}
let feature = {
COORDINATES: supplypoint.geojson.coordinates,
VOLUME: supplypoint.value,
UNITS: supplypoint.units,
DATA: {
supplypointId: supplypoint.supplypointId,
address: supplypoint.address,
client: supplypoint.client,
diameter: supplypoint.diameter,
endusetype: supplypoint.endusetype,
usetype: supplypoint.usetype,
},
};
coordinates.push(feature);
});
return coordinates;
};
sumElevations = values => {
if (values.length >= 1) {
let totalVolumes = 0;
for (let item of values) {
if (item.hasOwnProperty("VOLUME")) {
totalVolumes += item["VOLUME"];
}
}
return totalVolumes;
}
return 0;
};
render() {
const { viewport } = this.props;
const layers = [];
if (this.props.data3d) {
layers.push(
new HexagonLayer({
id: `hexagon-layer-${uuidv4()}`,
data: this.getCoordinates(),
pickable: true,
extruded: true,
material: material,
radius: 5,
elevationRange: [0, 1000],
elevationScale: 1,
elevationAggregation: "SUM",
colorRange: BLUE_COLORS,
colorScaleType: "quantile",
colorAggregation: "SUM",
getPosition: d => d.COORDINATES,
getElevationValue: d => this.sumElevations(d),
})
);
}
return (
<DeckGL layers={layers} onHover={this.onHoverDeckgl} viewState={viewport} />
);
}
}
export default injectIntl(DeckGLOverlay);
Image

Answer 1

I've used scaleLag from d3-scale, from d3-scale library.
Solution:
class DeckGLOverlay extends Component {
constructor(props) {
super(props);
this.state = {
x: null,
y: null,
hoveredObject: null,
id: uuidv4(),
};
this.rangeColor = null;
this.logScale = scaleLog()
.domain([10, 100000])
.range([0, 500]);
}
getCoordinates = () => {
...
return coordinates;
};
sumElevations = values => {
if (values.length >= 1) {
let totalVolumes = 0;
for (let item of values) {
if (item.hasOwnProperty("VOLUME")) {
totalVolumes += item["VOLUME"];
}
}
return totalVolumes;
}
return 0;
};
elevationByLogScale = values => {
let totalVolumes = this.sumElevations(values);
let scale = parseInt(this.logScale(totalVolumes));
if (isNaN(scale)) return 0;
return scale;
};
render() {
const { viewport } = this.props;
const layers = [];
if (this.props.data3d) {
layers.push(
new HexagonLayer({
id: `hexagon-layer-${uuidv4()}`,
data: this.getCoordinates(),
pickable: true,
extruded: true,
radius: 5,
elevationRange: [0, 500],
elevationScale: 1,
colorRange: BLUE_COLORS,
getPosition: d => d.COORDINATES,
getElevationValue: d => this.elevationByLogScale(d),
})
);
}
return (
<DeckGL layers={layers} viewState={viewport} />
);
}
}