Public
Edited
Apr 6, 2023
Insert cell
Insert cell
Insert cell
pieData = d3.pie().value(d => d.value).padAngle(0.02).sort((a, b) => a.index - b.index)(PIE_DATA)
Insert cell
function getCoords(innerRadius, outerRadius) {
const coords = [];

const findCoordsInSlice = (startAngle, endAngle) => {
const steps = 20;
const rStep = (outerRadius - innerRadius) / steps;
const angleStep = 0.1;
let angle = startAngle;
while (angle < endAngle) {
for (let i = 0; i < steps; i++) {
const radius = innerRadius + i * rStep;

const arc = d3
.arc()
.innerRadius(innerRadius + i * rStep)
.outerRadius(innerRadius + (i + 1) * rStep)
.startAngle(angle + angleStep * 0.5)
.endAngle(angle - angleStep * 0.5);

const [x, y] = arc.centroid();

coords.push({ x, y });
}
angle += angleStep
}
};

pieData.forEach((d) => {
findCoordsInSlice(d.startAngle + 0.05, d.endAngle - 0.05);
});

return coords;
}
Insert cell
{
const svg = d3.create("svg").attr("width", width).attr("height", 350);

const outerRadius = 350 / 2
const innerRadius = 50

const arc = d3
.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
const vertices = getCoords(innerRadius, outerRadius)
const g = svg
.append("g")
.attr("transform", `translate(${width / 2}, ${350 / 2})`);

g
.selectAll("circle")
.data(vertices)
.join("circle")
.attr("r", 1)
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y);

g.selectAll("path")
.data(pieData)
.join("path")
.attr('d', arc)
.attr('fill', 'none')
.attr('stroke', 'black')

return svg.node();
}
Insert cell
helixData = {

const arr = []
const length = 48
const step = 4 * Math.PI / length

const a = 1
const b = 0.5
const c = 1
for (let i = 0; i < length; i++) {
const t = step * i
const x = a * Math.cos(t * 0.5)
const y = b * Math.sin(t)
const z = c * Math.cos(t * 0.5) * Math.sin(t)

let area
if (i <= 5 || i >= 21 ) {
area = "clarity"
} else if (i >= 8 && i <= 18) {
area = "chaos"
} else {
area = "balance"
}

arr.push({x, y: y, z: z, index: i, area})
}
return arr
}
Insert cell
{
const svg = d3.create("svg").attr("width", width).attr("height", 350);

const g = svg
.append("g")
.attr("transform", `translate(${width / 2}, ${350 / 2})`);
g
.selectAll("circle")
.data(helixData)
.join("circle")
.attr("r", 2.5)
.attr("fill", d => {
if (d.area === "balance") {
return "red"
}
if (d.area === "chaos") {
return "yellow"
}
if (d.area === "clarity") {
return "green"
}
})
.attr("cx", (d) => d.x * 100)
.attr("cy", (d) => d.y * 100)
.attr("data-index", d => d.index);

return svg.node();
}
Insert cell

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.
Learn more