{
const width = 500;
const height = 400;
const margin = 1;
const angle = (i) => Math.PI*2/10 * i
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()
}