Public
Edited
Jul 30, 2023
radius = 190
{
const svgOutlines = d3
.create("svg")
.style("border", "1px solid black")
.attr("width", width)
.attr("height", width / 2);
//hexOuter.render(svgOutlines, "black", "none");
//hexInner.render(svgOutlines, "Black", "none");
let circleInnerRadius = circleInHex(
cornersInner[0][0],
cornersInner[0][1],
cornersInner[3][0],
cornersInner[3][1]
);
circleInnerRadius = circleInnerRadius / 2;
for (let i = 0; i < cornersInner.length; ++i) {
const decagon = regularDecagon(
cornersInner[i][0],
cornersInner[i][1],
circleInnerRadius
);
svgOutlines
.append("path")
.attr("d", (d) => lineGen(decagon))
.attr("fill", "pink")
.attr("stroke", "none");
//Text
svgOutlines
.append("text")
.attr("x", cornersInner[i][0])
.attr("y", cornersInner[i][1])
.style("border", "1px solid black")
.attr("dy", "0.65em")
.style("font-family", "sans-serif")
.style("font-size", 12)
.text(`${i}`)
.attr("transform", (d) => `translate(${0},${0})`);
}
const deca = regularDecagon(center.x, center.y, circleInnerRadius);
svgOutlines
.append("path")
.attr("d", (d) => lineGen(deca))
.attr("fill", "yellow")
.attr("stroke", "none");
//Circle
// svgOutlines
// .append("circle")
// .attr("cx", center.x)
// .attr("cy", center.y)
// .attr("r", circleInnerRadius / 2)
// .attr("stroke", "black")
// .attr("fill", "none");
return svgOutlines.node();
}
draw = d3
.line()
.curve(d3.curveLinearClosed)
.x((d) => d[0])
.y((d) => d[1])
lineGen = d3
.line()
.curve(d3.curveLinearClosed)
.x((d) => d.x)
.y((d) => d.y)
function regularDecagon(centerX, centerY, radius) {
const vertices = [];
const angleIncrement = (2 * Math.PI) / 10; // 360 degrees divided by 10 sides
for (let i = 0; i < 10; i++) {
const x = centerX + radius * Math.cos(i * angleIncrement);
const y = centerY + radius * Math.sin(i * angleIncrement);
vertices.push({ x, y });
}
return vertices;
}
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.
