{
const library = G2[lib]();
const groups = d3
.groups(Object.entries(library), ([key]) => key.split(".")[0])
.map(([name, nodes]) => ({
name,
value: nodes.length,
children: nodes.map(([d, f]) => ({
name: d.split(".")[1],
value: `${f}`.length
}))
}));
const root = { name: lib, children: groups };
const chart = new G2.Chart();
chart.options({
type: "forceGraph",
padding: 10,
width: 800,
height: 800,
data: { value: graph(root) },
legend: false,
layout: { joint: false },
scale: {
color: {
range: [
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab"
]
}
},
style: {
labelText: (d) => (d.data ? d.data.name.split(".").pop() : ""),
labelFill: "#000",
labelPosition: "top-left"
}
});
return chart.render().then((chart) => chart.getContainer());
}
function graph(root) {
const nodes = [];
const links = [];
const discovered = [root];
while (discovered.length) {
const node = discovered.pop();
const id = node.parent ? `${node.parent}.${node.name}` : node.name;
nodes.push({
id,
group: node.parent
});
if (node.children) {
for (const child of node.children) {
links.push({ source: id, target: `${node.name}.${child.name}` });
discovered.push({ ...child, parent: node.name });
}
}
}
return {
nodes,
links
};
}
G2 = require("@antv/g2/dist/g2.min.js")
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.
