Public
Edited
Sep 24, 2023
Insert cell
Insert cell
rnd = () => +(Math.random()*origin).toFixed(0) + origin/2
Insert cell
Insert cell
Insert cell
data = Array(10).fill(0).map((d,i)=>({
decile: i+1,
x: rnd(),
y: rnd()
}))
Insert cell
Insert cell
{
// Specify the dimensions of the chart.
const width = 500;
const height = 400;
const margin = 1; // to avoid clipping the root circle stroke

const angle = (i) => Math.PI*2/10 * i
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);

svg.selectAll(".united").data([0]).join("circle")
.attr("class", "united")
.attr("fill", "#fab")
.attr("stroke", "#b88")
.attr("cx", origin)
.attr("cy", origin)
.attr("r", R)
.style("opacity", 1-frame);

svg.selectAll(".decile").data(data).join("circle")
.attr("class", "decile")
.attr("fill", "#fab")
.attr("stroke", "#b88")
.attr("cx", d => (1-frame) * origin + R/2 * Math.sin(angle(d.decile)) + (frame) * d.x)
.attr("cy", d=> (1-frame) * origin + R/2 * Math.cos(angle(d.decile)) + (frame) * d.y)
.attr("r", Math.sqrt(R*R/10))
.style("opacity", frame);;
return svg.node()
}


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