design+data+people nerd ❦ previously partner at IDEO, co-founded Datascope
Public
Edited
Oct 28, 2023
Paused
1 star
<div class="wrapper">
${_.range(options.nx * options.ny).map(d => html`<div class="div-${d + 1} ${Math.random() < 0.5 ? 'rotate': ''}">${d + 1}</div>`)}
</div>
<style>
.wrapper {
max-width: 660px;
display: grid;
grid-template-columns: repeat(${options.nx}, 1fr);
gap: ${Math.min(660, width)/((options.nx - 1) * 8)}px;
padding: ${Math.min(660, width)/((options.nx - 1) * 8)}px
}
.wrapper div {
background: black;
aspect-ratio: 1;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-family: system-ui, sans-serif;
font-weight: 700;
font-size: ${Math.min(660, width)/((options.nx - 1) * 3.5)}px;
}
.wrapper div.rotate {
transform: rotate(-10deg);
color: white;
}
</style>
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.
