I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
Public
Edited
Jul 3, 2023
1 fork
3 stars
pic = {
// Grab the common center and radius of all the circles
let x0 = data[0].centreX;
let y0 = data[0].centreY;
let r = data[0].circleRadius;
// Set up the SVG
let svg = d3
.create("svg")
.attr("viewBox", [100, 200, 600, 600])
.style("max-width", "800px");
// Draw the decagon defined by the data.
svg
.append("path")
.attr(
"d",
d3
.line()
.x((d) => d.circleX)
.y((d) => d.circleY)(data)
)
.attr("fill", "none")
.attr("stroke", "black");
// Draw the arcs
svg
.selectAll("arc")
.data(data.slice(0, -1))
.join("path")
.attr("d", function (d, i) {
let x1 = d.circleX;
let y1 = d.circleY;
let x2 = data[i + 1].circleX;
let y2 = data[i + 1].circleY;
let t1 = Math.atan2(y1 - y0, x1 - x0);
let t2 = Math.atan2(y2 - y0, x2 - x0);
let p = d3.path();
p.arc(x0, y0, r, t1, t2, 0);
return p;
})
.attr("fill", "none")
.attr("stroke-width", 3)
.attr("stroke", (d, i) => d3.schemeCategory10[i]);
return svg.node();
}
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: 384,
circleY: 360,
circleRadius: 122.23099629457562,
centreX: 384,
centreY: 482.2309962945756
}
]
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.
