start = ({
...culori.okhsl("#1b87aa"),
l: 0.7,
s: 0.15
})
startColorBlue = culori.okhsl("#cdcdd1")
endColorRed = culori.okhsl("#ac004f")
saveColor = ({
...culori.okhsl("#cdcdd1"),
l: 0.95,
s: 0.1
})
mid1 = ({ ...culori.okhsl("#d5cdb9"), l: 0.3, s: 0.2 })
mid2 = ({ ...culori.okhsl("#df7c18"), s: 0.9, l: 0.4 })
dangerColor = ({
...endColorRed,
s: 1,
l: 0.65
})
veryMurky = ({
...culori.okhsl("#ae49a2"),
s: 1,
l: 0.8
})
gradientDisplay(gradient, 10)
swatches(culori.samples(10).map(gradient))
gradient = culori.interpolate(
[saveColor, start, mid1, mid2, dangerColor],
"oklab",
culori.interpolatorSplineBasis
)
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(culori.samples(20).map(gradient), { y: "s" })
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(culori.samples(20).map(gradient), { y: "v" })
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(culori.samples(20).map(gradient), { y: "h" })
]
})
culori = import("https://cdn.skypack.dev/culori@3")
gradientDisplay = (colors, numberOfSamples = 5) => {
const id = nanoid.nanoid(5);
let gradientFixPoints = culori
.samples(numberOfSamples)
.map(colors);
return html`
<svg width="250" height="32">
<defs>
<linearGradient id="${id}">
${gradientFixPoints
.map(culori.formatHex)
.map(
(col, i) =>
`<stop offset="${
i * (100 / (numberOfSamples - 1))
}%" stop-color="${col}" />`
)}
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#${id})" />
</svg>
<pre>${gradientFixPoints.map(culori.formatHex).join(", ")}</pre>
`;
}
import { swatches } from "@nzzvisuals/dataviz-colors"
nanoid = import("https://cdn.skypack.dev/nanoid")
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.
