scaleMember = (scale) => (value) => {
const color = scale.apply(value);
return html`<span style="border-bottom: solid ${color} 3px">${value}</span>`;
}
cylinders = scaleMember(carsPlot.scale("color"))
${cylinders(4)} ${cylinders(6)} ${cylinders(8)}
highlight = (color) => (string) => {
return htl.html`<span style="color: white; font-weight: 900;background-color:${color}; padding-left: 4px; padding-right: 4px;border-radius: 4px;">${string}</span>`;
}
redHighlight = highlight("red")
redHighlight(5)
import { textcolor } from "@observablehq/text-color-annotations-in-markdown"
rgbGamutInOklab = {
const ranges = culori.modeOklab.ranges;
const lRange = d3.range(...ranges.l, 0.02);
const aRange = d3.range(...ranges.a, 0.01);
const bRange = d3.range(...ranges.b, 0.01);
const acc = [];
for (const a of aRange) {
for (const b of bRange) {
for (const l of lRange) {
const oklab = { mode: "oklab", l, a, b };
if (!culori.displayable(oklab)) {
continue;
}
if (Math.random() < 0.9) {
continue;
}
const hex = culori.formatHex(oklab);
acc.push({ hex, ...oklab });
}
}
}
return acc;
}
umapProgress = (estimatedEpochs) => htl.html`<label>
Epoch ${epoch} / ${
targetEpochs ?? estimatedEpochs
}: <progress value="${epoch}" max="${
targetEpochs ?? estimatedEpochs
}">${epoch} / ${targetEpochs}</progress>
</label>`
umapProgress(500) // 500 because I know this task takes 500 epochs to complete
UMAP = (await require("umap-js@1.3.3/lib/umap-js.min.js")).UMAP
async function zipWithUmap(data, lens, { nComponents, nEpochs } = {}) {
const umap = new UMAP({
nComponents,
nEpochs
});
mutable targetEpochs = nEpochs;
const embeddings = await umap.fitAsync(
data.map((d) => lens(d)),
(epochNumber) => {
mutable epoch = epochNumber;
}
);
mutable targetEpochs = mutable epoch;
return embeddings.map((umapEmbedding, i) => ({
umapEmbedding,
...data[i]
}));
}
penguinsWithUmap = zipWithUmap(
penguins,
(d) => [
d.culmen_length_mm,
d.culmen_depth_mm,
d.flipper_length_mm,
d.body_mass_g
],
{ nNeighbors: 30, minDist: 0.5 }
)
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.
