Developer @Observable
Public
Edited
Jan 26, 2023
2 forks
17 stars
data = Array.from({ length: 100 }, d3.randomInt(50, 100))
<div style="display: flex; flex-wrap: wrap; gap: 5px">
${data.map(width => htl.html`<div style="display: inline-block; width: ${width}px; height: 20px; background: steelblue"></div>`)}
</div>
<div style="display: grid; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))">
${data.map(width => htl.html`<div style="display: inline-block; width: ${width}px; height: 20px; background: steelblue"></div>`)}
</div>
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.
