graph = FileAttachment("miserables.json").json()
data = {
const {nodes, links} = graph1;
const groupById = new Map;
const nodeById = new Map(nodes.map(node => [node.id, node]));
for (const node of nodes) {
let group = groupById.get(node.group);
if (!group) groupById.set(node.group, group = {id: node.group, children: []});
group.children.push(node);
node.targets = [];
node.commonMetrics = [];
}
for (const {source: sourceId, target: targetId, common_metric_name: commonMetrics} of links) {
nodeById.get(sourceId).targets.push(targetId);
nodeById.get(sourceId).commonMetrics = commonMetrics
nodeById.get(targetId).commonMetrics = commonMetrics
}
return {children: [...groupById.values()]};
}
function bilink(root) {
const map = new Map(root.leaves().map(d => [d.data.id, d]));
for (const d of root.leaves()) d.incoming = [], d.outgoing = d.data.targets.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;
}
colorin = "OrangeRed"
colorout = "steelblue"
colornone = "#ccc"
width = 954
radius = width / 2
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.
