The avatar for @severo
Sylvain Lesage
Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Jan 26, 2020
1 fork
Importers
3 stars
1
Sizes and layout
Sizes of canvas, images and SVGSidebar LayoutHoly Grail LayoutTen modern layouts in one line of CSS
Image cover
Image 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
Also listed in…
Image
Insert cell
Insert cell
Insert cell
Insert cell
cover(img, 100, 60)
Insert cell
cover(img, 96, 96)
Insert cell
cover(img, 1000, 60)
Insert cell
cover(img, 200, 800)
Insert cell
html`
<img src=${
cover(img, 100, 60).src
} width=1000 height=600 style="filter: blur(2px);">
<div class="loading-spinner"></div>
`
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more