Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published unlisted
Edited
Mar 4, 2021
html`<div style="display: flex; width: 300px;">
<svg width="800" height="200" style="height: auto; width: 100%;">
<rect fill="steelblue" width="800" height="200"></rect>
<text text-anchor="middle" dy="0.35em" x="50%" y="50%">800 x 200</text>
</svg>
</div>`
html`<div style="display: flex; width: 300px;">
<svg width="800" height="200" style="height: auto; height: intrinsic; width: 100%;">
<rect fill="steelblue" width="800" height="200"></rect>
<text text-anchor="middle" dy="0.35em" x="50%" y="50%">800 x 200</text>
</svg>
</div>`
html`<div style="display: flex; width: 300px;">
<svg width="800" height="200" viewBox="0 0 800 200" style="height: auto; width: 100%;">
<rect fill="steelblue" width="800" height="200"></rect>
<text text-anchor="middle" dy="0.35em" x="50%" y="50%">800 x 200</text>
</svg>
</div>`
html`<div style="display: flex; width: 300px;">
<svg width="800" height="200" viewBox="0 0 800 200" style="height: auto; height: intrinsic; width: 100%;">
<rect fill="steelblue" width="800" height="200"></rect>
<text text-anchor="middle" dy="0.35em" x="50%" y="50%">800 x 200</text>
</svg>
</div>`
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.
