Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Sizes of canvas, images and SVGSidebar LayoutHoly Grail LayoutTen modern layouts in one line of CSSImage coverImage placeholderHello preserveAspectRatioCSS position parserCSS object-fit formulasExtended drawImageTwo-columns layout in fullscreen modeHello d3-gridding layoutsFullscreen IframeHello d3-griddingLayer HTML elements with display: grid
Four Cells Layout
app = {
// See https://observablehq.com/@severo/iframe-and-load-event
const iframe = html`<iframe/>`;
yield iframe;
yield await createApp(iframe);
}
app.parts
app.widths
app.heights
async function createApp(iframe) {
// app is the same as iframe!
const app = await layout(iframe, {
leftSideBarWidth: width / 4,
rightSideBarWidth: 400,
headerHeight: height / 5,
sizeTolerance: 4
});
// Attach HTML elements to your application, part by part
//
// app.parts.header.appendChild(...);
//
// For example:
function showColor(part, color, label = '') {
part.style.setProperty('display', 'flex');
part.appendChild(
html`<div style="background-color: ${color}; margin: 10px; height: calc(100% - 20px); width: calc(100% - 20px); display: flex; justify-content: center; align-items: center; font: 24px mono;">${label}</div>`
);
}
showColor(app.parts.header, 'lightpink', 'header');
showColor(app.parts.topLeft, 'coral', 'topLeft');
showColor(app.parts.topRight, 'yellow', 'topRight');
showColor(app.parts.bottomLeft, 'lightblue', 'bottomLeft');
showColor(app.parts.bottomRight, 'lightgreen', 'bottomRight');
showColor(app.parts.footer, 'wheat', 'footer');
return iframe;
}
fullscreen(app)
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.
