chart = {
const root = tree(d3.hierarchy(data)
.sort((a, b) => (a.height - b.height) || a.data.name.localeCompare(b.data.name)));
const map = new Map(root.leaves().map(d => [id(d), d]));
const context = DOM.context2d(width, width - 40);
context.canvas.style.display = "block";
context.canvas.style.maxWidth = "100%";
context.canvas.style.margin = "auto";
context.translate(width / 2, width / 2);
line.context(context);
for (const leaf of root.leaves()) {
context.save();
context.rotate(leaf.x - Math.PI / 2);
context.translate(leaf.y, 0);
if (leaf.x >= Math.PI) {
context.textAlign = "right";
context.rotate(Math.PI);
context.translate(-3, 0);
} else {
context.textAlign = "left";
context.translate(3, 0);
}
context.fillText(leaf.data.name, 0, 3);
context.restore();
}
context.globalCompositeOperation = "multiply";
context.strokeStyle = "lightsteelblue";
for (const leaf of root.leaves()) {
for (const i of leaf.data.imports) {
context.beginPath();
line(leaf.path(map.get(i)));
context.stroke();
}
}
return context.canvas;
}
data = {
const map = new Map;
const imports = await d3.json("https://raw.githubusercontent.com/franciscog-Learnx/test/master/fran01.json");
imports.forEach(function find(data) {
const {name} = data;
if (map.has(name)) return map.get(name);
const i = name.lastIndexOf(".");
map.set(name, data);
if (i >= 0) {
find({name: name.substring(0, i), children: []}).children.push(data);
data.name = name.substring(i + 1);
}
return data;
});
return map.get("flare");
}
function id(node) {
return `${node.parent ? id(node.parent) + "." : ""}${node.data.name}`;
}
width = 932
radius = width / 2
line = d3.radialLine()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x)
tree = d3.cluster()
.size([2 * Math.PI, radius - 100])
d3 = require("d3@5")
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.
