d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm")
{ html, svg } = await import("https://cdn.jsdelivr.net/npm/@observablehq/htl/+esm")
const width = 800;
const height = 800;
const center = [width / 2, height / 2];
const hueRings = 4; // Number of brightness rings
const hueInnerRadius = 120;
const hueRingWidth = 30;
const grayRadius = 60;
const graySpread = 45;
const earthStartRadius = hueInnerRadius + hueRings * hueRingWidth + 40;
{
const grays = [
{ hex: "#312b2b", label: "100", name: "Black", brightness: 45 },
{ hex: "#c1ccd2", label: "C3", name: "Cool Gray 3", brightness: 201 },
{ hex: "#92a0ab", label: "C5", name: "Cool Gray 5", brightness: 157 }
];
return htl.html`<svg width="200" height="200">
${grays.map((d, i) => `
<circle cx="${50 + i * 50}" cy="50" r="40" fill="${d.hex}" />
`).join('')}
</svg>`;
}
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.
