Published
Edited
May 25, 2020
Importers
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("style").text(`
.hover path,
.clicked path
{
stroke: #ccc;
}
.hover text,
.clicked text {
fill: #ccc;
}
.hover g.primary text,
.clicked g.clicked-primary text {
fill: black;
font-weight: bold;
}
.hover g.primary circle,
.clicked g.clicked-primary circle {
r: 5
}
.hover g.secondary text,
.clicked g.clicked-secondary text {
fill: #333;
}
.hover path.primary,
.clicked path.clicked-primary {
stroke: #333;
stroke-opacity: 1;
}
`);
const label = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(graph.nodes)
.join("g")
.attr("transform", d => `translate(${margin.left},${d.y = y(d.id)})`)
.call(g => g.append("text")
.attr("x", -6)
.attr("dy", "0.35em")
.attr("fill", d => d3.lab(color(d.gender)).darker(2))
.text(d => d.name))
.call(g => g.append("circle")
.attr("r", 3)
.attr("fill", d => color(d.gender)));
const path = svg.insert("g", "*")
.attr("fill", "none")
.attr("stroke-opacity", 0.6)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(graph.links)
.join("path")
.attr("stroke", "#aaa")
.attr("d", arc);
svg.on("click", d => {
svg.classed("clicked", false);
label.classed("clicked-primary", false);
label.classed("clicked-secondary", false);
path.classed("clicked-primary", false).order();
});
const overlay = svg.append("g")
.attr("fill", "none")
.attr("pointer-events", "all")
.selectAll("rect")
.data(graph.nodes)
.join("rect")
.attr("width", margin.left + 40)
.attr("height", step)
.attr("y", d => y(d.id) - step / 2)
.on("click", d => {
d3.event.stopPropagation();
svg.classed("clicked", false);
label.classed("clicked-primary", false);
label.classed("clicked-secondary", false);
path.classed("clicked-primary", false).order();
svg.classed("clicked", true);
label.classed("clicked-primary", n => n === d);
label.classed("clicked-secondary", n => n.sourceLinks.some(l => l.target === d) || n.targetLinks.some(l => l.source === d));
path.classed("clicked-primary", l => l.source === d || l.target === d).filter(".clicked-primary").raise();
})
.on("mouseover", d => {
svg.classed("hover", true);
label.classed("primary", n => n === d);
label.classed("secondary", n => n.sourceLinks.some(l => l.target === d) || n.targetLinks.some(l => l.source === d));
path.classed("primary", l => l.source === d || l.target === d).filter(".primary");
})
.on("mouseout", d => {
svg.classed("hover", false);
label.classed("primary", false);
label.classed("secondary", false);
path.classed("primary", false);
});
function update() {
y.domain(graph.nodes.sort(viewof order.value).map(d => d.id));
const t = svg.transition()
.duration(750);
label.transition(t)
.delay((d, i) => i * 20)
.attrTween("transform", d => {
const i = d3.interpolateNumber(d.y, y(d.id));
return t => `translate(${margin.left},${d.y = i(t)})`;
});
path.transition(t)
.duration(750 + graph.nodes.length * 20)
.attrTween("d", d => () => arc(d));
overlay.transition(t)
.delay((d, i) => i * 20)
.attr("y", d => y(d.id) - step / 2);
}
viewof order.addEventListener("input", update);
invalidation.then(() => viewof order.removeEventListener("input", update));
return svg.node();
}
function arc(d) {
const y1 = d.source.y;
const y2 = d.target.y;
const r = Math.abs(y2 - y1) / 2;
return `M${margin.left},${y1}A${r},${r} 0,0,${y1 < y2 ? 1 : 0} ${margin.left},${y2}`;
}
y = d3.scalePoint(graph.nodes.map(d => d.id).sort(d3.ascending), [margin.top, height - margin.bottom])
margin = ({top: 20, right: 20, bottom: 20, left: 110})
height = (data.nodes.length - 1) * step + margin.top + margin.bottom
step = 14
color = d3.scaleOrdinal(["#888888", "#bbbbbb", "green", "#5B8B9B", "#77C0A0", "#264D54", "#324280", "#D27AE9", "#867AC4", "#72329E", "#BEE091", "#48853A", "#8BEC6E", "#8B9662", "#663B11", "#F3A852", "#E0502F", "#932846", "#A17965", "#E7799E", "#EC3686", "#414B17", "#F0D447", "#4141F5", "#E743F4"]).domain(["last appeared", "last mentioned", "continue", "missing", "Female", "Male", "Andoran", "Unknown", "Shienaran", "Malkieri", "Manetherenite", "Illianer", "Taraboner", "Ghealdanin", "Aridholin", "Essenian", "Far Madding", "Darmovanin", "Saldaean", "Murandian" ])
graph = {
const nodes = data.nodes.map(({id, name, nationality, gender}) => ({
id,
name,
sourceLinks: [],
targetLinks: [],
nationality,
gender
}));
const nodeById = new Map(nodes.map(d => [d.id, d]));
const links = data.links.map(({source, target, weight}) => ({
source: nodeById.get(source),
target: nodeById.get(target),
weight
}));
for (const link of links) {
const {source, target, weight} = link;
source.sourceLinks.push(link);
target.targetLinks.push(link);
}
return {nodes, links};
}
data = FileAttachment("chapter-cooccurrence.json").json()
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.
