Public
Edited
May 31, 2023
Insert cell
Insert cell
function svgpath(path) {
return `<svg width=300 height=300><path d="${path}" fill="none" stroke="black" transform="translate(150,150)"></svg>`;
}

Insert cell
// copied from the demo notebook
spiral = Array.from({ length: 76 }, (_, i) => [
(Math.PI / 3) * i, // angle (in radians)
2 * i // radius
])
Insert cell
svg`<svg width=300 height=300><path d="${d3.lineRadial()(
spiral
)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`
Insert cell
// copied from the demo notebook
angled_line = Array.from({ length: 26 }, (_, i) => [
(Math.PI / 2), // angle (in radians)
(i + 1) * 5 // radius
])
Insert cell
// copied from the demo notebook
angled_line2 = Array.from({ length: 26 }, (_, i) => [
(Math.PI / 3), // angle (in radians)
(i + 1) * 5 // radius
])
Insert cell
// copied from the demo notebook
angled_line3 = Array.from({ length: 26 }, (_, i) => [
180 * (Math.PI/180), // angle (in radians)
(i + 1) * 5 // radius
])
Insert cell
svg`<svg width=300 height=300 viewBox="-150,-150,300,300">
<circle cx="0" cy="0" r="5" fill="gray"/>
<line x1="0" y1="0" x2="0" y2="-150" stroke="black" />
<circle cy="0" cx="${Math.sin(Math.PI/2) * 50}" r="5" fill="red" />

<circle cy="-50" cx="${Math.sin(Math.PI/2) * 50}" r="5" fill="red" />
<circle cy="-80" cx="${Math.sin(Math.PI/2) * 80}" r="5" fill="red"/>
<circle cy="-50" cx="${Math.sin(Math.PI/3) * 50}" r="5" fill="green" />
<circle cy="-80" cx="${Math.sin(Math.PI/3) * 80}" r="5" fill="green" />
<circle cy="50" cx="${(180 * (Math.PI/180)) * 50}" r="5" fill="blue" />
<circle cy="80" cx="${(180 * (Math.PI/180)) * 80}" r="5" fill="blue" />

</svg>`
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