Published
Edited
Jul 12, 2021
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: { axis: null }, // disable axis
y: { axis: null }, // disable axis
r: { type: "linear", range: [0, r] }, // override default sqrt scale for dots marks and set a new range https://observablehq.com/@observablehq/plot-scales#continuous-radius
width: width, // set full width
height: width * 0.5625, // 16/9 aspect
marks: [
// 4 points for centering the two main circles,
// invisible radius r: 0
Plot.dot(
[
[-1, 0],
[1, 0],
[0, -1],
[0, 1]
],
{ x: (d) => d[0], y: (d) => d[1], r: 0 }
),
// two set of circles
...Array(2)
.fill()
.map((_, i) =>
Plot.dot(
Array(ncircles)
.fill()
.map((_, i) => i),
{
x: i ? x : -x,
y: i ? y : -y,
r: (d) => d,
strokeWidth: 2,
stroke: "rgba(0,0,0,1)"
}
)
)
]
})
Insert cell
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