Published
Edited
Mar 30, 2020
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("font-size", 10)
.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.9)
.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 resp = await FileAttachment("adjacency-gravel@2.json").json();

const buckets = resp.aggregations.events.comparisons.interactions.buckets.map(x => ({families: x.key.split('&'), count: x.doc_count }));
const indexByName = new Map(buckets.filter(x => x.families.length === 1).map((x, i) => ([x.families[0], i])));
const length = indexByName.size;
const matrix = Array.from({ length }).map(() => Array.from({ length }).map(() => 0));
console.log(matrix);
for (const entry of buckets) {
if (entry.families.length !== 2) {
continue;
}
if (entry.count <= 0) {
continue;
}
const [f1, f2] = entry.families;
const f1i = indexByName.get(f1);
const f2i = indexByName.get(f2);
matrix[f1i][f2i] = entry.count;
matrix[f2i][f1i] = entry.count;
}

return {
matrix,
indexByName,
nameByIndex: new Map(Array.from(indexByName.entries()).map(([a, b]) => ([b, a])))
};
}
Insert cell
chord = d3.chord()
.padAngle(.02)
.sortSubgroups(d3.descending)
.sortChords(d3.ascending)
Insert cell
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(innerRadius + 20)
Insert cell
ribbon = d3.ribbon()
.radius(innerRadius)
Insert cell
color = d3.scaleOrdinal(d3.schemeCategory10)
Insert cell
outerRadius = Math.min(width, height) * 0.5
Insert cell
innerRadius = outerRadius - 124
Insert cell
width = 954
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