Public
Edited
Sep 18, 2023
2 forks
{
const data = dataOf(lib);
const height = heightOf(lib);
const chart = new G2.Chart();
chart.options({
type: "view",
coordinate: { transform: [{ type: "transpose" }] },
width,
height,
paddingLeft: 60,
paddingRight: 100,
children: [
{
type: "tree",
data: { value: data },
style: {
nodeFill: (d) => (d.height === 0 ? "#999" : "#000"),
linkStroke: "#999",
labelText: (d) => d.data.name || "-",
labelFontSize: (d) => (d.height === 0 ? 7 : 12),
labelTextAlign: (d) => (d.height === 0 ? "start" : "end"),
labelPosition: (d) => (d.height !== 0 ? "left" : "right"),
labelDx: (d) => (d.height === 0 ? 5 : -5),
labelBackground: true,
labelBackgroundFill: "#fff"
}
}
]
});
return chart.render().then((chart) => chart.getContainer());
}
function dataOf(lib) {
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
}))
}));
return { name: lib, children: groups };
}
function heightOf(lib) {
const library = G2[lib]();
const count = Object.keys(library).length;
const padding = 20;
const nodeHeight = count < 10 ? 20 : 10;
return count * nodeHeight + padding * 2;
}
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.
