{
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 chart = new G2.Chart();
chart.options({
type: "pack",
theme: "classic",
width,
height: width,
padding: 20,
layout: { padding: 5 },
data: { value: { name: lib, children: groups } },
encode: { value: "value", color: "depth" },
scale: {
color: {
domain: [0, 5],
range: ["hsl(152,80%,80%)", "hsl(228,30%,40%)"],
interpolate: d3.interpolateHcl
}
},
style: {
labelText: (d) => (d.r >= 10 && d.height === 0 ? `${d.data.name}` : "")
},
legend: false
});
return chart.render().then((chart) => chart.getContainer());
}
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.
