The Illustrated Manual of Buddhist Terms and Doctrines (IMBTD) with Categories IIMagga Vibhaṅga StupaSuttaPitaka ParralelsClear Mountain Monastery – Org. ChartSutta Pitaka Data V2.0SuttaPitaka Horizontal A0 Frame One RectellipseSuttaPitaka Horizontal A0 FrameThe Buddha's Mind III (spreadsheet data)Patimokkha by Categories NO RESUMEPatimokkha by Categories and connections III31 Planes of Existance IVNibbana IVThe Dhamma Citadel: Navigating the Four Noble Truths37 Wings to Awakenings VPāṭimokkha Relationship with HoverPatimokkha by Categories and connections II (Cormorant Font)SuttaPitakaBhikkhu Pāṭimokkha Dendrogram
Another way to see the Buddha's Mind II
chart = {
function labelStyle(d) {
if (d.current.depth == 1) return "15px sans-serif";
return "";
}
const root = root0;
const centerFont = 30;
root.each((d) => {
d.current = d;
d.value = 1;
});
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, width])
.style("font", "10px sans-serif");
const g = svg
.append("g")
.attr("transform", `translate(${width / 2},${width / 2})`);
const path = g
.append("g")
.selectAll("path")
.data(root.descendants().slice(1))
.join("path")
// color here ---------------------------------------------------------------------- color here //
.attr("fill", (d) => {
// while (d.depth > 2) d = d.parent;
while (d.depth > 1) d = d.parent;
return color(d.data.name);
})
// color here ---------------------------------------------------------------------- color here //
.attr(
"fill-opacity",
(d) => (arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)
// arcVisible(d.current) // dosent work well
// ? d.children
// ? d.children.children
// ? 0.4
// : 0.2
// : 0.1
// : 0
)
.attr("d", (d) => arc(d.current));
path
.filter((d) => d.children)
.style("cursor", "pointer")
.on("click", clicked);
path.append("title").text((d) => `${d.data.name}`);
const label = g
.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.style("user-select", "none")
.selectAll("text")
.data(root.descendants().slice(1))
.join("text")
.attr("dy", "0.35em")
.attr("fill-opacity", (d) => +labelVisible(d.current))
.attr("transform", (d) => labelTransform(d.current))
.text((d) => d.data.name)
.style("font", (d) => labelStyle(d))
.call(wrap, 10);
// .attr("dy", "0.35em")
// .attr("fill-opacity", (d) => +labelVisible(d.current))
// .attr("transform", (d) => labelTransform(d.current))
// .text(function (d) {
// if (d.data.name.length > 20) return d.data.name.substring(0, 20) + "...";
// else return d.data.name;
// });
const parent = g
.append("circle")
.datum(root)
.attr("r", radius)
.attr("fill", "none")
.attr("pointer-events", "all")
.on("click", clicked);
const wordGroup = svg
.append("g")
.attr("pointer-events", "none")
.attr("font-family", "sans-serif")
.attr("font-size", centerFont + "px")
.attr("fill", "black");
const word = wordGroup
.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", width / 2 + centerFont / 2)
.text((d) => {
if (root.data.name.length > 0) {
return root.data.name;
} else {
return "''";
}
});
// .call(wrap, 5);
function clicked(event, p) {
parent.datum(p.parent || root);
word.text(p.data.name);
// value.text(format(p.value));
root.each(
(d) =>
(d.target = {
x0:
Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) *
2 *
Math.PI,
x1:
Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) *
2 *
Math.PI,
y0: Math.max(0, d.y0 - p.depth),
y1: Math.max(0, d.y1 - p.depth)
})
);
const t = g.transition().duration(750);
// Transition the data on all arcs, even the ones that aren’t visible,
// so that if this transition is interrupted, entering arcs will start
// the next transition from the desired position.
path
.transition(t)
.filter(function (d) {
return +this.getAttribute("fill-opacity") || arcVisible(d.target);
})
.tween("data", (d) => {
const i = d3.interpolate(d.current, d.target);
return (t) => (d.current = i(t));
})
.attr("fill-opacity", (d) =>
arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0
)
.attrTween("d", (d) => () => arc(d.current));
label
.filter(function (d) {
return +this.getAttribute("fill-opacity") || labelVisible(d.target);
})
.transition(t)
.attr("fill-opacity", (d) => +labelVisible(d.target))
.attrTween("transform", (d) => () => labelTransform(d.current));
}
function arcVisible(d) {
return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;
}
function labelVisible(d) {
return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;
}
function labelTransform(d) {
const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI;
const y = ((d.y0 + d.y1) / 2) * radius;
return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
}
return svg.node();
}
root0 = {
const root = partition(data);
root.each((d) => (d.value = 1));
return root;
}
partition = (data) => {
const root = d3.hierarchy(data).sum((d) => d.value);
// .sort((a, b) => b.value - a.value);
return d3.partition().size([2 * Math.PI, root.height + 1])(root);
}
color = d3.scaleOrdinal(
d3.quantize(d3.interpolateRainbow, data.children.length + 4)
)
color2 = d3.scaleOrdinal(
d3.quantize(d3.interpolateRainbow, data.children.length)
)
formatSi = d3.format(".3s")
format = x => {
var s = formatSi(x);
switch (s[s.length - 1]) {
case "G":
return s.slice(0, -1) + "B";
}
return s;
}
width = 932
radius = width / 6
arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius * 1.5)
.innerRadius(d => d.y0 * radius)
.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))
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.
