{
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: "treemap",
padding: 10,
width,
height: width * 0.618,
layout: {
tile: "treemapBinary",
paddingInner: 1
},
data: { value: { name: lib, children: groups } },
legend: false,
encode: {
value: "value",
color: (d) => d.parent.data.name.split(".")[0]
},
scale: {
color: {
range: [
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab"
]
}
},
style: {
labelText: (d) => d.data.name.split(".").pop(),
labelFill: "#000",
labelPosition: "top-left"
}
});
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.
