The avatar for @nzzvisuals
nzzvisuals
We create visual and data-driven stories for @nzz – and build tools that power them.
Public
Edited
Aug 17, 2023
Paused
Importers
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
seqScale = getSequentialScale(
baseColor,
numberOfColors,
{
hueShiftDistance: sequentialHueShiftDistance,
forceMaximumLightnessSpread: maxLightnessDistance,
// Zusätzliche Konfigurationsoptionen können hier eingefügt werden.
// Für eine Dokumentation der möglichen Optionen siehe hier:
// https://github.com/nzzdev/ed-tech-utilities/blob/main/sophie/src/scales/defaultConfig.ts
//
// Sei dir bewusst, dass eine Anpassung dieser Werte bedeuten kann,
// dass deine Skala stark von den standardmässig verwendeten Farben
// abweichen kann.
}
).reverse()
Insert cell
Insert cell
Insert cell
${categoryColors.map(culori.formatHex).map(hex => html`<p>${swatches(getSequentialScale(hex, 4))}</p>`)}
Insert cell
categoryColors.map(culori.formatHex).map(hex => getSequentialScale(hex, 3, {desaturationFactor: 0.75})[2]).map(culori.okhsl)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
## Helpers and Configuration
Insert cell
standardColorLightnessRange = [0.35,0.75]
Insert cell
mutedColorLightnessRange = [0.7, 0.825]
Insert cell
// Lookup table for previously defined values
mutedColorLookup = categoryColors.reduce((lut, col, i) => ({
...lut,
[culori.formatHex(col)]: culori.formatHex(categoryColorsMuted[i])
}), {})
Insert cell
gradientDisplay = (colors, numberOfSamples = 5) => {
const id = nanoid.nanoid(5)
let gradientFixPoints = culori.samples(numberOfSamples)
.map(culori.interpolate(colors, 'oklch'))
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>

`
}
Insert cell
indexedColors = categoryColors.map(culori.okhsl).map((c, i) => ({...c, index: i + 1}))
Insert cell
Plot.plot({
color: {type: 'identity'},
marks: [
Plot.barY(indexedColors, {x: 'index', y: 'l', fill: d => culori.formatHex(d)}),
Plot.line(indexedColors, {x: 'index', y: 's'}),
Plot.dot(indexedColors, {x: 'index', y: 's', r: 5, fill: d => culori.formatHex(d), stroke: 'white'})
]
})
Insert cell
swatches(indexedColors.map(culori.formatHex))
Insert cell
## Imports
Insert cell
import {categoryColors, categoryColorsMuted, swatches} from "@nzzvisuals/dataviz-colors"
Insert cell
culori = import('https://cdn.skypack.dev/culori@3.0')
Insert cell
nanoid = import('https://cdn.skypack.dev/nanoid')
Insert cell
sophie = import("https://cdn.skypack.dev/@nzz/et-utils-sophie")
Insert cell

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.
Learn more