/
divergingColorScale.ts
49 lines (42 loc) · 1.4 KB
/
divergingColorScale.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import { useMemo } from 'react'
import { scaleDiverging } from 'd3-scale'
import { colorInterpolators, ColorInterpolatorId } from '../schemes'
export interface DivergingColorScaleConfig {
type: 'diverging'
scheme?: ColorInterpolatorId
minValue?: number
maxValue?: number
divergeAt?: number
}
export interface DivergingColorScaleValues {
min: number
max: number
}
export const divergingColorScaleDefaults: {
scheme: ColorInterpolatorId
divergeAt: number
} = {
scheme: 'red_yellow_blue',
divergeAt: 0.5,
}
export const getDivergingColorScale = (
{
scheme = divergingColorScaleDefaults.scheme,
divergeAt = divergingColorScaleDefaults.divergeAt,
minValue,
maxValue,
}: DivergingColorScaleConfig,
values: DivergingColorScaleValues
) => {
const min = minValue !== undefined ? minValue : values.min
const max = maxValue !== undefined ? maxValue : values.max
const domain = [min, min + (max - min) / 2, max]
const interpolator = colorInterpolators[scheme]
const offset = 0.5 - divergeAt
const offsetInterpolator = (t: number) => interpolator(t + offset)
return scaleDiverging(offsetInterpolator).domain(domain).clamp(true)
}
export const useDivergingColorScale = (
config: DivergingColorScaleConfig,
values: DivergingColorScaleValues
) => useMemo(() => getDivergingColorScale(config, values), [config, values])