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))
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.