root = d3.cluster().size([2 * Math.PI, 20])(d3.hierarchy(dataInput))
chart = {
// Specify the chart’s dimensions.
const width = 1800;
const height = width;
const cx = width * 0.5; // adjust as needed to fit
const cy = height * 0.5; // adjust as needed to fit
const radius = Math.min(width, height) / 2 - 200;
const myColor = blackWhite
? (d) => "#555"
: colorFunc(colorNumber, colorRotation, colorSeed, darkenFactor);
const offset = -0.1; // for reversing the node at the bottom
// Create a radial cluster layout. The layout’s first dimension (x)
// is the angle, while the second (y) is the radius.
const tree = d3.cluster().size([2 * Math.PI, radius]);
const root = tree(d3.hierarchy(dataInput.children ? dataInput : dataDefault));
root.x = Math.PI / 2;
// root.y = -50;
// root.each(function (d) {
// if (d.depth == 1) d.y = 90;
// if (d.depth == 2 && d.height == 1) d.y = 250;
// if (d.data.name == "Bhikkhu Vihara") d.y = 130;
// if (d.data.name == "Bhikkhu Vihara") d.x -= 0.1;
// });
// Creates the SVG container.
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-cx, -cy, width, height])
.attr("style", "width: 100%; height: auto; font: 10px sans-serif;");
if (darkMode)
svg
.append("rect")
.attr("x", -width / 2)
.attr("y", -height / 2)
.attr("width", width)
.attr("height", height)
.attr("fill", "black");
// Append links.
svg
.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll()
.data(root.links())
.join("path")
.attr(
"d",
d3
.linkRadial()
.angle((d) => d.x)
.radius((d) => d.y)
)
.attr("stroke", (d) =>
myColor(
d.target.ancestors().find((ancestor) => ancestor.depth == colorDepth)
)
);
// Append nodes.
svg
.append("g")
.selectAll()
.data(root.descendants())
.join("circle")
.attr(
"transform",
(d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)`
)
.attr("fill", (d) => (d.children ? "#555" : "#999"))
.attr("r", 2.5)
.attr("fill", (d) => {
const col = myColor(
d.ancestors().find((ancestor) => ancestor.depth == colorDepth)
);
return d.children ? col : darkMode ? darken(col, 0.8) : lighten(col, 0.8);
});
// multiline https://observablehq.com/@saneef/svg-multiline-text-line-height
// Append labels.
svg
.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll()
.data(root.descendants())
.join("text")
.attr(
"transform",
(d) =>
`rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) rotate(${
d.x >= Math.PI + offset ? 180 : 0
})`
)
.attr("dy", "0.31em")
.attr("x", (d) => (d.x < Math.PI + offset === !d.children ? 6 : -6))
.attr("text-anchor", (d) =>
d.x < Math.PI + offset === !d.children ? "start" : "end"
)
.attr("paint-order", "stroke")
.attr("stroke", darkMode ? "black" : "white")
.attr("fill", "currentColor")
.attr("fill", (d) =>
myColor(d.ancestors().find((ancestor) => ancestor.depth == colorDepth))
)
.attr("font-size", (d) => (d.depth == 0 ? 12 : d.depth == 1 ? 11 : 10))
.text((d) => d.data.name?.split(/\s\s/g)[0])
.append("tspan")
.attr("dy", "1em")
.attr("x", (d) => (d.x < Math.PI + offset === !d.children ? 6 : -6))
.text((d) => d.data.name?.split(/\s\s/g)[1])
.append("tspan")
.attr("dy", "1em")
.attr("x", (d) => (d.x < Math.PI + offset === !d.children ? 6 : -6))
.text((d) => d.data.name?.split(" ")[2]);
return svg.node();
}
dataDefault = parseMdList(
toTitleCase(mdList)
//.replaceAll(" ", " ")
)
dataInput = parseMdList(
toTitleCase(listInput)
//.replaceAll(" ", " ")
// .replaceAll("- ", "")
// .replaceAll("#### ", "")
)
treeify(
toTitleCase(mdList)
//.replaceAll(" ", " ")
.replaceAll("- ", "")
.replaceAll("#### ", "")
)
parseMdList(toTitleCase(mdList))
function parseMdList(mdList) {
const lines = mdList.split("\n").filter((line) => line.trim() !== "");
const root = { name: lines[0]?.trim(), children: [] };
const stack = [{ node: root, level: -1 }];
lines.slice(1).forEach((line) => {
const match = line.match(/^(\s*)-\s*(.+)$/);
if (!match) return;
const indent = match[1].length;
const name = match[2];
const newNode = { name, children: [] };
while (stack.length > 1 && stack[stack.length - 1].level >= indent) {
stack.pop();
}
stack[stack.length - 1].node.children.push(newNode);
stack.push({ node: newNode, level: indent });
});
return root;
}
import { textarea } from "@jashkenas/inputs"
import { serialize } from "@mbostock/saving-svg"
PNGprecision = 6
DOM.download(() => rasterizeWhite(chart), undefined, "Save as PNG")
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.
