Public
Edited
Jun 19, 2023
2 stars
graph
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
linksToGraphData = function (links) {
const nodes = links
.map((l) => l.source)
.concat(links.map((l) => l.target))
.filter((n, i, a) => a.indexOf(n) === i)
.map((n, i) => ({ id: i, title: n, name: n.split(".").slice(-1)[0] }));
const linksID = links.map((l) => ({
source: nodes.map((n) => n.title).indexOf(l.source),
target: nodes.map((n) => n.title).indexOf(l.target)
}));
let tableGroups = Array.from(
d3Array.group(nodes, (d) => d.title.split(".", 3).join("."))
);
tableGroups = tableGroups.map((d) => ({
group: d[0],
type: "table",
label: d[0].split(".").slice(-1)[0],
leaves: d[1].map((n) => nodes.indexOf(n))
}));
let schemaGroups = Array.from(
d3Array.group(tableGroups, (d) => d.group.split(".", 2).join("."))
);
schemaGroups = schemaGroups.map((d) => ({
group: d[0],
type: "schema",
label: d[0].split(".").slice(-1)[0],
groups: d[1].map((n) => tableGroups.indexOf(n))
}));
let groups = tableGroups.concat(schemaGroups);
let databaseGroups = Array.from(
d3Array.group(schemaGroups, (d) => d.group.split(".", 1).join("."))
);
databaseGroups = databaseGroups.map((d) => ({
group: d[0],
type: "database",
label: d[0].split(".").slice(-1)[0],
groups: d[1].map((n) => groups.indexOf(n))
}));
groups = groups.concat(databaseGroups);
let constraints = tableGroups.map((d) => ({
type: "alignment",
axis: "x",
offsets: d.leaves.map((l) => ({ node: l, offset: 0 }))
}));
return {
nodes,
links: linksID,
groups,
constraints
};
}
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.
