Published
Edited
May 12, 2020
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("font-size", 24)
.attr("font-family", "sans-serif")
.style("width", "100%")
.style("height", "auto");

const chords = chord(data.matrix);

const group = svg.append("g")
.selectAll("g")
.data(chords.groups)
.join("g");

group.append("path")
.attr("fill", d => color(d.index))
.attr("stroke", d => color(d.index))
.attr("d", arc);

group.append("text")
.each(d => { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("transform", d => `
rotate(${(d.angle * 180 / Math.PI - 90)})
translate(${innerRadius + 26})
${d.angle > Math.PI ? "rotate(180)" : ""}
`)
.attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
.text(d => data.nameByIndex.get(d.index));

svg.append("g")
.attr("fill-opacity", 0.67)
.selectAll("path")
.data(chords)
.join("path")
.attr("stroke", d => d3.rgb(color(d.source.index)).darker())
.attr("fill", d => color(d.source.index))
.attr("d", ribbon);

return svg.node();
}
Insert cell
data = {
const imports = await FileAttachment("flare.json").json();

const indexByName = new Map;
const nameByIndex = new Map;
const matrix = [];
let n = 0;

// Returns the Flare package name for the given class name.
function name(name) {
return name.substring(0, name.lastIndexOf(".")).substring(6);
}

// Compute a unique index for each package name.
imports.forEach(d => {
if (!indexByName.has(d = name(d.name))) {
nameByIndex.set(n, d);
indexByName.set(d, n++);
}
});

// Construct a square matrix counting package imports.
imports.forEach(d => {
const source = indexByName.get(name(d.name));
let row = matrix[source];
if (!row) row = matrix[source] = Array.from({length: n}).fill(0);
d.imports.forEach(d => row[indexByName.get(name(d))]++);
});

return {
matrix,
indexByName,
nameByIndex
};
}
Insert cell
chord = d3.chord()
.padAngle(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.descending)
Insert cell
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(innerRadius + 20)
Insert cell
ribbon = d3.ribbon()
.radius(innerRadius)
Insert cell
color = d3.scaleOrdinal(d3.quantize(d3.interpolateHcl("#FFAD05", "#1DA1F2"), 6))
Insert cell
outerRadius = Math.min(width, height) * 0.5
Insert cell
innerRadius = outerRadius - 124
Insert cell
width = 1500
Insert cell
height = width
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more