Public
Edited
Sep 25, 2023
1 fork
4 stars
Insert cell
Insert cell
Plot.plot({
margin: 30,
width: 500,
height: 500,
x: { margin: 0, domain: [-8, 4] },
y: { domain: [-8, 4] },
marks: [
Plot.dot(
[
[-1, -2],
[2, 2]
],
{ fill: "black", r: 3 }
),
Plot.dot([[-1, -2]], { r: 5 }), // <--- The circle with radius 5
Plot.ruleX([-8]),
Plot.ruleY([-8])
]
})
Insert cell
Insert cell
Plot.plot({
margin: 30,
width: 500,
height: 500,
x: { margin: 0, domain: [-8, 4] },
y: { domain: [-8, 4] },
r: { type: "linear", domain: [0, 12], range: [0, 500 - 60] },
marks: [
Plot.dot([[-8, -8]], { r: () => 12 }),
Plot.ruleX([-8]),
Plot.ruleY([-8])
]
})
Insert cell
Insert cell
Plot.plot({
margin: 30,
width: 500,
height: 500,
x: { domain: [-8, 4] },
y: { domain: [-8, 4] },
r: { type: "linear", domain: [0, 12], range: [0, 500 - 60] },
marks: [
Plot.dot(
[
[-1, -2],
[2, 2]
],
{ fill: "black", r: 5 } // not scaled (constant r)
),
Plot.dot([[-1, -2]], { r: [5] }), // scaled (channel r)
Plot.ruleX([-8]),
Plot.ruleY([-8])
]
})
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