Mathematician and web developer
Public
Edited
Jan 9, 2024
{
const width = 500;
const height = 500;
const r = Math.min(width, height) / 4;
const data = [1, 2, 3, 4, 6];
const svg = d3.create("svg");
svg.attr("width", width);
svg.attr("height", height);
let root = svg.selectAll(".root").data([null]);
root = root.merge(root.enter().append("g").attr("class", "root"));
root.attr("transform", `translate(${width / 2},${height / 2})`);
const petals = root.selectAll(".petal").data(data);
petals
.enter()
.append("g")
.attr(
"transform",
(d) =>
`translate(${r * Math.sin((2 * Math.PI * d) / data.length)},${
r * Math.cos((2 * Math.PI * d) / data.length)
}) rotate(${(Math.PI * 2 * d) / data.length})`
)
.append("path")
.attr("d", (d) => drawPetal(width / 4, d, data.length));
return svg.node();
}
function drawPetal(R, index, length) {
let r = ((Math.PI * R) / length) * 0.9;
let y = (Math.sqrt(R * R - r * r) * r) / R;
let c = Math.sqrt(R * R - r * r);
let x = Math.sqrt(c * c - y * y);
return `M0,0L${x},${-y}A${r} ${r} 0 1 1 ${x} ${y}L0,0`;
}
d3 = require("d3@6")
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.
