Public
Edited
Jun 30, 2023
{
const data = [
{
index: 0,
circleX: 384,
circleY: 360,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 1,
circleX: 455.8455769949675,
circleY: 383.34404305288274,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 2,
circleX: 500.2485855192049,
circleY: 444.4595412001705,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 3,
circleX: 500.24858551920494,
circleY: 520.0024513889807,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 4,
circleX: 455.8455769949675,
circleY: 581.1179495362685,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 5,
circleX: 384,
circleY: 604.4619925891512,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 6,
circleX: 312.1544230050325,
circleY: 581.1179495362685,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 7,
circleX: 267.7514144807951,
circleY: 520.0024513889807,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 8,
circleX: 267.75141448079506,
circleY: 444.4595412001705,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 9,
circleX: 312.1544230050325,
circleY: 383.34404305288274,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
},
{
index: 10,
circleX: 383.99999999999994,
circleY: 360,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
}
];
d3.select("#svg")
.append("path")
.attr("d", () => {
return data.reduce((acc, d, i) => {
const largeArc = 0;
const sweepFlag = 1;
if (i === 0) {
return acc + `M${d.circleX},${d.circleY}`;
} else {
return (
acc +
"," +
`A${d.circleRadius} ${d.circleRadius} 0 ${largeArc} ${sweepFlag} ${d.circleX},${d.circleY}`
);
}
}, "");
})
.attr("fill", "none")
.attr("stroke", "blue");
}
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.
