Developer @Observable
Published
Edited
Jun 7, 2022
Importers
6 stars
rainbowifyHeaders = ({
numColors = 7,
saturation = 1,
value = 0.85,
hueOffset = Math.random() * 360
} = {}) => {
const colors = d3
.range(hueOffset, 360 + hueOffset, 360 / numColors)
.map((h) => h % 360)
.map((h) => culori.okhsv({ h, s: saturation, v: value }));
// TODO this n^2 pattern produces a lot of CSS, especially with more colors.
// Is it possible to select the headers without having to also select the cells?
return htl.html`
<style>
${colors
.flatMap((c1, i1) => {
let nth1 = `nth-child(${colors.length}n+${i1})`;
return colors.map((c2, i2) => {
let nth2 = `nth-child(${colors.length}n+${
(i1 + i2) % colors.length
})`;
return `
.observablehq:${nth1} h1:${nth2},
.observablehq:${nth1} h2:${nth2},
.observablehq:${nth1} h3:${nth2},
.observablehq:${nth1} h4:${nth2},
.observablehq:${nth1} h5:${nth2},
.observablehq:${nth1} h6:${nth2} {
color: ${culoriToCss(c2)};
}
`;
});
})
.join("\n")}
</style>
`;
}
rainbowifyHeaders()
culori = require("culori")
import { culoriToCss } from "@mythmon/bonus-lib"
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.
