Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Sizes of canvas, images and SVGHoly 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-griddingFour Cells LayoutLayer HTML elements with display: grid
Sidebar 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) {
const app = await layout(iframe, {
sideBarWidth: 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.main, 'coral', 'main');
showColor(app.parts.sideBar, 'yellow', 'sideBar');
showColor(app.parts.footer, 'wheat', 'footer');
return app;
}
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.
