Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
Value Generator FunctionColor Generator Function JChDriving texgen with generators
Color Generator Function HSL
swatches([gc1, gc2, gc3])
function* genColorValue(
start,
hcent = 0.2,
scent = 0.2,
lcent = 0.2,
frequency = 1,
cubehelix = false
) {
const rgbColor = d3.color(start);
const hslColor = cubehelix ? d3.cubehelix(rgbColor) : d3.hsl(rgbColor);
const hgen = genValue(hslColor.h, 0, 360, hcent, frequency);
const sgen = genValue(hslColor.s, 0, 1.0, scent, frequency);
const lgen = genValue(hslColor.l, 0, 1.0, lcent, frequency);
while (true) {
const nextH = hgen.next();
const nextS = sgen.next();
const nextL = lgen.next();
const nextColor = d3.color(
cubehelix
? d3.cubehelix(nextH.value, nextS.value, nextL.value)
: d3.hsl(nextH.value, nextS.value, nextL.value)
);
yield nextColor;
}
}
gc1 = genColorValue("#99aaaa", 0.2, 0.2, 0.2, 0.5)
gc2 = genColorValue("#aa99aa", 0.2, 0.2, 0.2, 0.2, 0.5, true)
gc3 = genColorValue("#aaaa99", 0.2, 0.2, 0.2, 0.1)
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.
