Public
Edited
Feb 7, 2024
Insert cell
Insert cell
<h2>the quick brown fox jumped over the lazy dog.</h2>
<img src="https://pbs.twimg.com/profile_images/1689272845740773377/ECeEOAAB_400x400.png" width="150px" />
Insert cell
<svg width=${width} height="200" viewBox="0 0 ${width} 200">
<rect x="100" y="50" width="20" height="150" fill="hsl(216deg 100% 13%)" />
<rect x="150" y="150" width="20" height="50" fill="hsl(360deg 100% 13%)" />
<circle cx="500" cy="150" r="100" fill="steelblue" />
<line x1="50" y1="50" x2="500" y2="200" stroke="blue" stroke-width="3" />
</svg>
Insert cell
<svg width=400 height="400">
</svg>
Insert cell
count = 200
Insert cell
randLocation = () => Math.random() * 400
Insert cell
circles = d3.select(randCircles)
.selectAll("circle")
.data(d3.range(count))
.join("circle")
.attr("cx", randLocation)
.attr("cy", randLocation)
.attr("r", 12)
.style("fill", "yellow")
.style("stroke", "black")
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