Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Apr 22, 2018
5 stars
{
const clip = DOM.uid("clip");
return svg`<svg viewBox="0 0 640 640" style="width:100%;max-width:640px;height:auto;">
<defs>
<clipPath id="${clip.id}">
<circle cx="320" cy="320" r="320"></circle>
</clipPath>
</defs>
<image
clip-path="${clip}"
width="640" height="640"
preserveAspectRatio="xMidYMin slice"
xlink:href="https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg"
></image>
</svg>`;
}
svg`<svg viewBox="0 0 640 640" style="width:100%;max-width:640px;height:auto;">
<defs>
<clipPath id="clip">
<circle cx="320" cy="320" r="320"></circle>
</clipPath>
</defs>
<image
clip-path="url(${window.location}#clip)"
width="640" height="640"
preserveAspectRatio="xMidYMin slice"
xlink:href="https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg"
></image>
</svg>`
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.
