JzCzhz plot
culori = require('culori');
viewof chroma_t = html`<input type='range' min='0' max='1' step='0.01'>`
{
let ranges = culori.getMode('jch').ranges;
let c = culori.lerp(ranges.c[0], ranges.c[1], chroma_t);
return html`<style>
.swatch {
width: 4px;
height: 4px;
position: relative;
}
</style>
<div style='display: flex'>${d3.range(...ranges.h, 1).map(h => {
return `<div>${
d3.range(...ranges.j, (ranges.j[1] - ranges.j[0]) / 100).map(j => {
let color = { mode: 'jch', j: ranges.j[1] - j, c, h };
return `<div class='swatch' title='${JSON.stringify(color) + '\n' + JSON.stringify(culori.rgb(color))}'
style="background: ${culori.formatHex(color)};"></div>`;
}).join('')
}</div>`;
}).join('')
}</div>`;
}
md`### Jzazbz plot`
viewof lightness_t = html`<input type='range' min='0' max='1' step='0.01'>`
{
let ranges = culori.getMode('jab').ranges;
let j = culori.lerp(ranges.j[0], ranges.j[1], lightness_t);
return html`<style>
.swatch {
width: 4px;
height: 4px;
position: relative;
}
</style>
<div style='display: flex'>${d3.range(...ranges.a, (ranges.b[1] - ranges.b[0]) / 100).map(a => {
return `<div>${
d3.range(...ranges.b, (ranges.b[1] - ranges.b[0]) / 100).map(b => {
let color = { mode: 'jab', j, a, b };
return `<div class='swatch' title='${JSON.stringify(color) + '\n' + JSON.stringify(culori.rgb(color))}'
style="background: ${culori.formatHex(color)};"></div>`;
}).join('')
}</div>`;
}).join('')
}</div>`;
}
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.
