function responsiveBoxes() {
return html`
<div style="width: 100%; height: 54px; position: relative">
<div style="${maxWidth(200)}">
${boxes(12, "rgb(228, 26, 28, 0.2)")}
</div>
<div style="${minWidth(201)}">
<div style="${maxWidth(400)}">
${boxes(24, "rgb(77, 175, 74, 0.2)")}
</div>
</div>
<div style="${minWidth(401)}">
${boxes(36, "rgb(55, 126, 184, 0.2)")}
</div>
</div>`;
}
function minWidth(width) {
return `
position: absolute;
width: 100%;
display: flex;
padding-top: calc(1000 * (${width}px - 100%));
pointer-events: none;`;
}
function maxWidth(width) {
return `
position: absolute;
width: 100%;
display: flex;
padding-top: calc(1000 * (100% - ${width}px));`;
}
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.
