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-griddingFour Cells Layout
Layer HTML elements with display: grid
html`
<div id="with-absolute-position">
<div class="layer">${BackgroundLayer()}</div>
<div class="layer">${AnimationLayer(invalidation)}</div>
<div class="layer last">${await InteractionLayer()}</div>
</div>
<style>
#with-absolute-position {
position: relative;
}
#with-absolute-position .layer {
position: absolute;
width: 100%;
top: 0px;
}
#with-absolute-position .layer.last {
position: relative;
}
</style>
`
html`
<div id="with-display-grid">
<div class="layer" style="z-index: 1">${BackgroundLayer()}</div>
<div class="layer" style="z-index: 2">${AnimationLayer(invalidation)}</div>
<div class="layer" style="z-index: 3">${await InteractionLayer()}</div>
</div>
<style>
#with-display-grid {
display: grid;
}
#with-display-grid .layer {
grid-column: 1/2;
grid-row: 1/2;
}
</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.
