function plotRects(data) {
const svg = html`<svg class="rect-plot" width="${width}" height=${Math.ceil(
(maxHeight * width) / maxWidth
)} viewBox="0 0 ${maxWidth} ${maxHeight}">
${data
.map(
(d) =>
`<rect class="rect" x="0" y="0" width="${d.width}" height="${
d.height
}" fill="hsl(${
(d.count * 4) % 360
}deg 80% 83%)" stroke="#333" stroke-width="0.3" />`
)
.join("\n")}
${selectedSvg}
</svg>`;
svg.onpointermove = pointermove;
return 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.
