Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
Perceptual Palette ExtractionImage Chopper with Perceptual Color IndexImage Grid with varying perceptual color precisionPerceptual Color IndexImage Chopper deeper hierarchyBrushed Image View Example 2Brushed Image View Example 3Visualizing the Perceptual Color IndexCubehelix Perceptual Palette ExtractionVisualizing Cubehelix HSL Perceptual Color Index
Cubehelix Perceptual Color Index
function getKey (color, prec=2) {
const hsl = d3.cubehelix(color)
let rc = '', h, s, l
if(prec < 0){
const k = -prec
const ck = k/2
const jk = k/3
const li = Math.round(+hsl.l * 256)
l = Math.round(Math.round(+hsl.l * 256) / jk) * jk / 256
s = Math.round(Math.round(+hsl.s * 256) / ck) * ck / 256
h = Math.round(Math.round(+hsl.h / k)) * k
}
else{
l = hsl.l.toFixed(prec)
s = hsl.s.toFixed(prec)
h = hsl.h.toFixed(prec)
}
return d3.color(d3.cubehelix(h,s,l)).hex()
}
hueScale = d3.scaleLinear()
.domain([0,360])
.range([0,100])
function intern (c, prec=2) {
const key = getKey(c, prec)
const rgbHex = c.hex()
if(key in cindex){
cindex[key].push(rgbHex)
} else {
cindex[key] = [rgbHex]
}
return key
}
function clear () {
for (let member in cindex) delete cindex[member];
}
//cstrings = ['aqua', 'yellow', 'pink', 'orange']
//cstrings.forEach(cs => intern(d3.color(cs), 3))
//intern(d3.color('orange'))
d3.color(getKey(d3.color('lavender'), -4))
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.
