Public
Edited
Oct 1, 2021
2 stars
html`${Object.keys(d3)
.filter(d => d.match(/^scheme/))
.map(d => d.replace(/^scheme/, ""))
.map(s => {
return md`### ${s}
${ramps(s)}
`;
})}`
ramps = scheme => {
const array = d3["scheme" + scheme][0]
? d3["scheme" + scheme]
: d3["scheme" + scheme].slice().pop();
let mono = culori.interpolateSplineMonotone();
const labmono = culori.interpolate(array, 'lab', { l: mono, a: mono, b: mono });
const rgbmono = culori.interpolate(array, 'rgb', { r: mono, g: mono, b: mono });
const lrgbmono = culori.interpolate(array, 'lrgb', { r: mono, g: mono, b: mono });
return html`
<div class='grid'>
<span>None</span> ${ramp(t => array[Math.round((array.length - 1) * t)]) /* 1 */}
<span>RGB linear</span>${ramp(t => culori.formatHex(culori.interpolate(array, 'rgb')(t)))/* 7 */}
<span>LRGB linear</span>${ramp(t => culori.formatHex(culori.interpolate(array, 'lrgb')(t)))/* 7 */}
<span>LRGB linear*</span>${ramp(t => chroma.scale(array).mode('lrgb')(t).hex())/* 7 */}
<span>Lab linear</span>${ramp(d3.piecewise(d3.interpolateLab, array)) /* 6 */}
<span>Lab CatmullRom</span>${ramp(interpolateLabCatmullRom(array))/* 4 */}
<span>Lab Monotone</span>${ramp(t => culori.formatHex(labmono(t)))/* 7 */}
<span>RGB Monotone</span>${ramp(t => culori.formatHex(rgbmono(t)))/* 7 */}
<span>LRGB Monotone</span>${ramp(t => culori.formatHex(lrgbmono(t)))/* 7 */}
</div>
`;
}
html`<style>.grid {display:grid; grid-template-columns: 10em 1fr;}</style>`
interpolateLabCatmullRom = colors => {
const getpoint = CatmullRomSpline3D(
colors.map(d => d3.lab(d)).map(d => [d.l, d.a, d.b]),
{
closed: false,
tension: 0.5
}
).getPoint;
return t => d3.lab(...getpoint(t)).hex();
}
interpolateRgbCatmullRom = colors => {
const getpoint = CatmullRomSpline3D(
colors.map(d => d3.rgb(d)).map(d => [d.r, d.g, d.b]),
{
closed: false,
tension: 0.5
}
).getPoint;
return t => d3.rgb(...getpoint(t)).hex();
}
d3 = require("d3")
import { ramp } from "@mbostock/color-ramp"
import { select } from "@jashkenas/inputs"
import { CatmullRomSpline as CatmullRomSpline3D } from "@mattdesl/perceptually-smooth-multi-color-linear-gradients"
culori = import('culori@0.11.2')
chroma = require('chroma-js')
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.
