Published
Edited
Dec 13, 2020
4 stars
ramp(d3.interpolateViridis)
ramp(chroma.scale('viridis').mode('hcl'))
chroma.scale('viridis').colors(15)
d3.quantize(d3.scaleLinear().range(threeViridisColors).domain([0, 0.5, 1]).interpolate(d3.interpolateHcl), 5)
ramp(d3.scaleLinear().range(threeViridisColors).domain([0, 0.5, 1]).interpolate(d3.interpolateHcl), viridisCount)
ramp(d3.scaleLinear().range(viridis).domain(d3.range(256).map(n => n/256)).interpolate(d3.interpolateHcl), viridisCount)
ramp(d3.interpolateViridis, viridisCount)
ramp(d3.scaleLinear().range(['red', 'yellow', 'green']).domain([0, 0.5, 1]).interpolate(d3.interpolateHcl))
ramp(chroma.bezier(['red', 'blue', 'purple', 'green']).scale())
chroma.bezier(['orange', 'green', 'purple', 'darkblue']).scale().correctLightness().colors(5)
ramp(d3.interpolateHcl('blue', 'green'))
md`-------------
#### Comparing HCL and RGB interpolation
In general HCL interpolation will render a more natural and balanced color scale`
ramp(d3.interpolateRgb('pink', 'darkblue'))
ramp(d3.interpolateHsl('pink', 'darkblue'))
ramp(d3.interpolateHcl('pink', 'darkblue'))
d3.rgb("pink") // d3.hsl("pink") // d3.hcl("pink")
d3.hcl("yellow")
ramp(d3.interpolateHclLong("#94FD05", "#1E2E53"))
d3.hcl("#212A4D")
d3.hcl(d3.interpolateHclLong("#94FD05", "#1E2E53")(1))
ramp(chroma.scale(['yellow', 'purple']).mode('hcl'))
ramp(chroma.bezier(['yellow', 'red', 'purple']).scale().correctLightness())
ramp(d3.interpolateBlues, bluesCount)
ramp(function(ratio){return blues[ratio * (bluesCount-1)];}, bluesCount)
blues = d3.schemeBlues[bluesCount]
doInterpolate(d3.interpolateBlues, bluesCount)
doInterpolate = function(scale, n){
const arr = [];
for (let i = 0; i < n; ++i) {
arr.push(d3.color(scale(i / (n - 1))).hex());
}
return arr;
};
d3.hcl('steelblue')
d3.hcl('steelblue').darker()
hclInputs = [[0,80,60],
[58,73,60],
[120,80,60],
[174,51,64],
[240,79,60],
[300,80,60]
];
(hclInputs.map(c => chroma.hcl(...c).hex())).toString()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
