Developer @Observable
Published
Edited
May 16, 2022
3 stars
{
let schemes = Object.entries(d3)
.filter(([k]) => k.startsWith("scheme"))
.map(([name, colors]) => ({ name, colors }));
return html`
<style>
.scheme {
display: flex;
width: ${Math.min(600, width)}px;
margin-bottom: 6px;
}
.scheme .name {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
}
.swatch-line {
display: flex;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 400px;
justify-items: right;
}
.swatch {
display: inline-block;
flex: 0 1 32px;
height: 20px;
}
</style>
<div>
${schemes.map(
({ name, colors }) => html`
<div class="scheme">
<span class="name">${name}</span>
${swatchLine(colors)}
</div>
`
)}
</div>
`;
}
swatchLine = (colors) => {
if (typeof colors.slice(-1)[0] !== "string") {
colors = colors.slice(-1)[0];
}
const root = html`<div class="swatch-line"></div>`;
d3.select(root)
.selectAll("div")
.data(colors)
.join("div")
.classed("swatch", true)
.style("background", (d) => d);
return root;
}
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.
