chart = {
const root = tree(
rootWithIngoing.sort((a, b) => d3.ascending(a.data.subcat, b.data.subcat))
// .sort((a, b) => d3.ascending(a.data.subcat, b.data.subcat))
);
const offSet = 0;
const off = 38;
const strokeWidth = 2;
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -width / 2, width, width]);
const node = svg
.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("g")
.data(root.leaves())
.join("g")
.attr(
"transform",
(d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)`
)
.append("text")
.attr("dy", "0.31em")
.attr("x", (d) => (d.x < Math.PI ? 6 : -6))
.attr("text-anchor", (d) => (d.x < Math.PI ? "start" : "end"))
.attr("transform", (d) => (d.x >= Math.PI ? "rotate(180)" : null))
.text((d) => {
if (d.x < Math.PI - offSet) {
if (typeof d.data.num !== "undefined") {
if (d.data.num.length <= 4) {
var str = d.data.num;
var nameOnly = str.substring(0, str.length - 1);
var numOnly = str.substring(str.length - 1, str.length);
d.data.num = nameOnly + "\xa0\xa0" + numOnly;
}
return d.data.num + " : " + d.data.content;
} else return d.data.content;
} else {
if (typeof d.data.num !== "undefined") {
if (d.data.num.length <= 4) {
var str = d.data.num;
var nameOnly = str.substring(0, str.length - 1);
var numOnly = str.substring(str.length - 1, str.length);
d.data.num = nameOnly + "\xa0\xa0" + numOnly;
}
return d.data.content + " : " + d.data.num;
} else return d.data.content;
}
})
.each(function (d) {
d.text = this;
})
.on("mouseover", overed)
.on("mouseover", overed2)
.on("mouseout", outed)
.on("mouseout", outed2)
.call((text) =>
text.append("title").text(
(d) => `${d.data.cat + " - " + d.data.subcat}
${d.outgoing.length} outgoing
${d.incoming.length} incoming`
)
);
const link = svg
.append("g")
.attr("stroke", colornone)
.attr("fill", "none")
.selectAll("path")
.data(root.leaves().flatMap((leaf) => leaf.outgoing))
.join("path")
.style("mix-blend-mode", "multiply")
.style("opacity", 0.5)
.attr("d", ([i, o]) => line(i.path(o)))
.each(function (d) {
d.path = this;
});
const link2 = svg
.append("g")
.attr("stroke", null)
.attr("fill", "none")
.selectAll("path")
.data(root.leaves().flatMap((leaf) => leaf.incoming))
.join("path")
.style("mix-blend-mode", "multiply")
.style("opacity", 0.5)
.attr("d", ([i, o]) => line(i.path(o)))
.each(function (d) {
d.path = this;
});
function overed(event, d) {
link.style("mix-blend-mode", null);
d3.select(this).attr("font-weight", "bold");
d3.selectAll(d.incoming.map((d) => d.path))
.attr("stroke", colorin)
.style("stroke-width", strokeWidth)
.raise();
d3.selectAll(d.incoming.map(([d]) => d.text))
.attr("fill", colorin)
.style("stroke-width", strokeWidth)
.attr("font-weight", "bold");
d3.selectAll(d.outgoing.map((d) => d.path))
.attr("stroke", colorout)
.style("stroke-width", strokeWidth)
.raise();
d3.selectAll(d.outgoing.map(([, d]) => d.text))
.attr("fill", colorout)
.style("stroke-width", strokeWidth)
.attr("font-weight", "bold");
}
function overed2(event, d) {
link.style("mix-blend-mode", null);
d3.select(this).attr("font-weight", "bold");
d3.selectAll(d.incoming.map((d) => d.path))
.attr("stroke", colorin)
.style("stroke-width", strokeWidth)
.raise();
d3.selectAll(d.incoming.map(([d]) => d.text))
.attr("fill", colorin)
.style("stroke-width", strokeWidth)
.attr("font-weight", "bold");
d3.selectAll(d.outgoing.map((d) => d.path))
.attr("stroke", colorout)
.style("stroke-width", strokeWidth)
.raise();
d3.selectAll(d.outgoing.map(([, d]) => d.text))
.attr("fill", colorout)
.style("stroke-width", strokeWidth)
.attr("font-weight", "bold");
}
function outed(event, d) {
link.style("mix-blend-mode", "multiply");
d3.select(this).attr("font-weight", null);
d3.selectAll(d.incoming.map((d) => d.path)).attr("stroke", null);
d3.selectAll(d.incoming.map(([d]) => d.text))
.attr("fill", null)
.attr("font-weight", null);
d3.selectAll(d.outgoing.map((d) => d.path)).attr("stroke", null);
d3.selectAll(d.outgoing.map(([, d]) => d.text))
.attr("fill", null)
.attr("font-weight", null);
}
function outed2(event, d) {
link2.style("mix-blend-mode", "multiply");
d3.select(this).attr("font-weight", null);
d3.selectAll(d.incoming.map((d) => d.path)).attr("stroke", null);
d3.selectAll(d.incoming.map(([d]) => d.text))
.attr("fill", null)
.attr("font-weight", null);
d3.selectAll(d.outgoing.map((d) => d.path)).attr("stroke", null);
d3.selectAll(d.outgoing.map(([, d]) => d.text))
.attr("fill", null)
.attr("font-weight", null);
}
return svg.node();
}
rootWithIngoing
tree(rootWithIngoing)
import { rootWithIngoing } from "4c60834510152dc9"
data = hierarchy(await FileAttachment("flare.json").json())
function hierarchy(data, delimiter = ".") {
let root;
const map = new Map;
data.forEach(function find(data) {
const {name} = data;
if (map.has(name)) return map.get(name);
const i = name.lastIndexOf(delimiter);
map.set(name, data);
if (i >= 0) {
find({name: name.substring(0, i), children: []}).children.push(data);
data.name = name.substring(i + 1);
} else {
root = data;
}
return data;
});
return root;
}
function bilink(root) {
const map = new Map(root.leaves().map(d => [id(d), d]));
for (const d of root.leaves()) d.incoming = [], d.outgoing = d.data.imports.map(i => [d, map.get(i)]);
for (const d of root.leaves()) for (const o of d.outgoing) o[1].incoming.push(o);
return root;
}
function id(node) {
return `${node.parent ? id(node.parent) + "." : ""}${node.data.name}`;
}
colorin = "#00f"
colorout = "#f00"
colornone = "#ccc"
width = 954 * 1.3
radius = width / 3
line = d3.lineRadial()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x)
tree = d3.cluster()
.size([2 * Math.PI, radius - 100])
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.
