chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const {nodes, links} = sankey({
nodes: graph.nodes.map(d => Object.assign({}, d)),
links: graph.links.map(d => Object.assign({}, d))
});
svg.append("g")
.style("font", `18px ${fontFamily}`)
.style("font-weight", "bold")
.append("text")
.classed('sankey-label',true)
.attr("x", 0)
.attr("y", 28)
.append("tspan")
.text("Point of View");
svg.append("g")
.style("font", `18px ${fontFamily}`)
.style("font-weight", "bold")
.append("text")
.classed('sankey-label',true)
.attr("x", width-margin.left)
.attr("y", 28)
.append("tspan")
.attr("text-anchor", "end")
.text("Chapter");
svg.append("g")
.selectAll("rect")
.data(nodes)
.join("rect")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("height", d => d.y1 - d.y0)
.attr("width", d => d.x1 - d.x0)
.append("title")
.text(d => d.nameComplete ? d.nameComplete : d.name);
svg.append("g")
.attr("fill", "none")
.selectAll("g")
.data(links)
.join("path")
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke", d => {
return color(d.names[0])
})
.attr("stroke-width", d => d.width)
.style("mix-blend-mode", "multiply")
.on('mouseover', function(d, i) {
const t = d3.transition('enlarge').duration(500)
tooltipMouseOver(d, i, t)
})
.on('mouseout', function(d, i) {
const t = d3.transition('dwindle').duration(500)
tooltipMouseOut(d, i, t)
})
svg.append("g")
.style("font", `16px ${fontFamily}`)
.selectAll("text")
.data(nodes)
.join("text")
.classed('sankey-text',true)
.attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
.attr("y", d => (d.y1 + d.y0) / 2)
.attr("dy", "0.35em")
.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
.text(d => d.x0 < width / 2 ? d.name : parseInt(d.name) % 5 == 0 || d.name == "1" ? parseInt(d.name): "")
return svg.node();
}
height = (width < 600 ? width * 1.75 : width * 0.95)
graph = {
let index = -1;
const nodes = [];
const nodeByKey = new Map;
const indexByKey = new Map;
const links = [];
for (const k of keys) {
for (const d of data) {
const key = JSON.stringify([k, d[k]]);
if (nodeByKey.has(key)) continue;
const node = {name: d[k], key: k};
if (k === 'chapter') {
node.nameComplete = d.chapterComplete
}
nodes.push(node);
nodeByKey.set(key, node);
indexByKey.set(key, ++index);
}
}
for (let i = 1; i < keys.length; ++i) {
const a = keys[i - 1];
const b = keys[i];
const prefix = keys.slice(0, i + 1);
const linkByKey = new Map;
for (const d of data) {
const names = prefix.map(k => d[k]);
const key = JSON.stringify(names);
const value = d.pages || 1;
let link = linkByKey.get(key);
if (link) { link.value += value; continue; }
link = {
source: indexByKey.get(JSON.stringify([a, d[a]])),
target: indexByKey.get(JSON.stringify([b, d[b]])),
names,
pages: d.pages,
chapterComplete: d.chapterComplete,
value
};
links.push(link);
linkByKey.set(key, link);
}
}
return {nodes, links};
}
margin = ({top: 36, right: 0, bottom: 20, left: 0})
keys = data.columns.slice(0, -1).reverse()
data = Object.assign(d3.csvParse(await FileAttachment('teotw-chapter-pov.csv').text(), ({chapter, chapter_order, chapter_abbr, word_count, character}) => {
return {
chapter: chapter_abbr,
chapterComplete: chapter,
pages: +word_count,
narrator: character
}
}), {columns: ['chapter', 'narrator', 'pages']})
function tooltipMouseOver(d, i, t) {
let el = d3.select("body");
let div = el
.append("g")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
div
.html(`<strong>${d.names[0]}</strong>, <strong>${d.chapterComplete}</strong>`)
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 10) + "px")
.transition(t)
.style("opacity", 0.9)
;
let el2 = d3.select(this);
el2
.transition(t)
.style("fill-opacity", 0.9)
.style("stroke", "black")
.style("stroke-width", "1px")
.style("stroke-opacity", 0.7);
}
function tooltipMouseOut(d, i, t) {
let el = d3.selectAll(".tooltip");
el.each(function() {
el.remove();
});
let el2 = d3.select(this);
el2
.transition(t)
.style("fill-opacity", 0.5)
.style("stroke-width", "0px");
}
tooltip = html`
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
.text {
font-family: "Montserrat";
}
.grid {
font-family: "Montserrat";
}
div.tooltip {
font-family: "Montserrat";
position: absolute;
text-align: left;
padding: 0.5em;
font: 0.5em;
background: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 0.5em;
pointer-events: none;
}
.label {
font-weight: bold;
}
.bubble {
mix-blend-mode: multiply;
}
</style>`
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.
