Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
Visualizing JCh Color SpaceVisualizing LCh Color SpaceVisualizing HSL Color SpaceVisualizing JzCzhz Color Space
Uniform Sampling of Color Spaces
dotChart( getJchColors(), 38, 20)
dotChart(getHslColors(), 38, 20)
dotChart(getCubehelixColors(), 38, 20)
dotChart(getRgbColors(), 38, 20)
dotChart(getLabColors(), 32, 20)
dotChart(getLchColors(), 32, 20)
function getJchColors() {
const hvalues = getSampledOffsets(360, 7) // map to hue
const cvalues = getSampledOffsets(100, 4) // map to chroma
const jvalues = getSampledOffsets(100, 19) // map to brightness
const cols = []
cvalues.forEach(c => hvalues.forEach(h => jvalues.forEach(j => cols.push(d3.color(cam02.jch(j, c,h))))))
return cols
}
function getRgbColors() {
const rvalues = getSampledOffsets(256, 7) // map to r
const gvalues = getSampledOffsets(256, 4) // map to g
const bvalues = getSampledOffsets(256, 19) // map to b
const cols = []
rvalues.forEach(r => gvalues.forEach(g => bvalues.forEach(b => cols.push(d3.color(`rgb(${r},${g},${b})`)))))
return cols
}
function getHslColors() {
const hvalues = getSampledOffsets(360, 7) // map to hue
const svalues = d3.range(0.0, 1.0, 0.25) // map to sat
const lvalues = d3.range(0.0, 1.0, 1/19) // map to lightness
const cols = []
svalues.forEach(s => hvalues.forEach(h => lvalues.forEach(l => cols.push(d3.hsl(h,s,l)))))
return cols
}
function getCubehelixColors() {
const hvalues = getSampledOffsets(360, 7) // map to hue
const svalues = d3.range(0.0, 1.0, 0.25) // map to sat
const lvalues = d3.range(0.0, 1.0, 1/19) // map to lightness
const cols = []
svalues.forEach(s => hvalues.forEach(h => lvalues.forEach(l => cols.push(d3.cubehelix(h,s,l)))))
return cols
}
function getLabColors() {
const lvalues = getSampledOffsets(100, 16) // map to lightness
const avalues = d3.range(-160, 160, 320/6) // map to
const bvalues = d3.range(-160, 160, 320/6) // map to
const cols = []
avalues.forEach(a => bvalues.forEach(b => lvalues.forEach(l => cols.push(d3.lab(l,a,b)))))
return cols
}
function getLchColors() {
const lvalues = getSampledOffsets(100, 16) // map to lightness
const cvalues = d3.range(0, 230, 230/6) // map to
const hvalues = d3.range(0, 360, 360/6) // map to
const cols = []
cvalues.forEach(c => hvalues.forEach(h => lvalues.forEach(l => cols.push(d3.lch(l,c,h)))))
return cols
}
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.
