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 precisionImage Chopper deeper hierarchyBrushed Image View Example 2Brushed Image View Example 3Visualizing the Perceptual Color IndexCubehelix Perceptual Color IndexCubehelix Perceptual Palette ExtractionVisualizing Cubehelix HSL Perceptual Color Index
Perceptual Color Index
cindex = ({})
function getKey (color, prec=2) {
const jch = cam02.jch(color)
let rc = '', j, c, h
if(prec < 0){
const k = -prec
const ck = k/2
const jk = k/3
j = Math.round(+jch.J / jk) * jk
c = Math.round(+jch.C / ck) * ck
h = Math.round(+jch.h / k) * k
}
else{
j = jch.J.toFixed(prec)
c = jch.C.toFixed(prec)
h = jch.h.toFixed(prec)
}
return d3.color(cam02.jch(j,c,h)).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))
d3.color(getKey(d3.color('aqua'), 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.
