ScatterPlot Gradients

Quick example demonstrating a linear interpolation of hue based on a value, used for ScatterPlot point gradient formatting.

Screenshot of component ScatterPlot color-advanced-gradient

Transform functions

  • Remap the input value from it's native value range to a 'percentage in range' - inverse lerp,
  • Interpolate between two hue values using the 'percentage' calculated above - lerp.
const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a
const clamp = (a: number, min = 0, max = 1) => Math.min(max, Math.max(min, a))
const invlerp = (x: number, y: number, a: number) => clamp((a - x) / (y - x))

This gives us the following function:

function valueToHue(value: number): number {
const valueMin = 300
const hueMin = 0.0
const valueMax = 800
const hueMax = 0.8
 
// maps the raw value into a 0-1 based on min/max
const valueInRange = invlerp(valueMin, valueMax, value)
 
// maps the 0-1 to a hue between the hueMin and hueMax
const hue = lerp(hueMin, hueMax, valueInRange)
return hue
}

ScatterPlot Example

The transformation example above assumes a constant saturation and intensity will be used, resulting in a simple ScatterPlot colorAccessor implementation:

const col = new Color()
 
return (
<ChartContainer>
<ScatterPlot
dataSource={sensorDS}
colorAccessor={(data, time) => {
col.setHSL(valueToHue(data.y), 0.8, 0.6)
return col.getHex()
}}
/>
<RealTimeDomain window={10000} />
<VerticalAxis />
<TimeAxis />
</ChartContainer>
)