31:T85e,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(); }32:T4c8,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}; }33:[{"id":"20b46093ce08d4fb278078ea734fe0e31d58809d356792bf8b32c55e27b263a9bb05d333fe00127d480e68cd81e47d0114c5b151fb4d00959ec1f75e17e99d4a","href":"https://static.observableusercontent.com/files/20b46093ce08d4fb278078ea734fe0e31d58809d356792bf8b32c55e27b263a9bb05d333fe00127d480e68cd81e47d0114c5b151fb4d00959ec1f75e17e99d4a","name":"teotw-chapter-pov.csv","type":"text/csv","lastModified":1590257769968.933,"size":4605}] 2f:{"title":"The many voices of WOT","cells":[{"id":0,"value":"md`# The many voices of WOT `","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"md`### Printing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"tweet(\"1155261547012190209\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = (width < 600 ? width * 1.75 : width * 0.95)","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof nodePadding = slider({\n min: 0,\n max: 5,\n step: 0.1,\n value: 1,\n title: \"Node padding\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"viewof nodeWidth = slider({\n min: 1,\n max: 20,\n step: 1,\n value: 5,\n title: \"Node width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"fontFamily = \"'Libre Franklin', sans-serif\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"sankey = d3.sankey()\n .nodeSort(null)\n .linkSort(null)\n .nodeWidth(nodeWidth)\n .nodePadding(nodePadding)\n .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"color = d3.scaleOrdinal(d3.schemePastel1).unknown(\"#ccc\").domain(names)","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"margin = ({top: 36, right: 0, bottom: 20, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"names = d3.map(data, d => d.narrator).keys()","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"keys = data.columns.slice(0, -1).reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"data = Object.assign(d3.csvParse(await FileAttachment('teotw-chapter-pov.csv').text(), ({chapter, chapter_order, chapter_abbr, word_count, character}) => {\n return {\n chapter: chapter_abbr,\n chapterComplete: chapter,\n pages: +word_count,\n narrator: character\n }\n}), {columns: ['chapter', 'narrator', 'pages']})","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"journalize = require(\"journalize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"function tooltipMouseOver(d, i, t) {\n let el = d3.select(\"body\");\n \n let div = el\n .append(\"g\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"opacity\", 0);\n\n div\n .html(`${d.names[0]}, ${d.chapterComplete}`)\n .style(\"left\", (d3.event.pageX + 10) + \"px\")\n .style(\"top\", (d3.event.pageY - 10) + \"px\")\n .transition(t)\n .style(\"opacity\", 0.9)\n ;\n \n let el2 = d3.select(this);\n \n el2\n .transition(t)\n .style(\"fill-opacity\", 0.9)\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", \"1px\")\n .style(\"stroke-opacity\", 0.7);\n \n \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"function tooltipMouseOut(d, i, t) {\n let el = d3.selectAll(\".tooltip\");\n \n el.each(function() {\n\t\tel.remove();\n\t}); \n let el2 = d3.select(this);\n \n el2\n .transition(t)\n .style(\"fill-opacity\", 0.5)\n .style(\"stroke-width\", \"0px\");\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"tooltip = html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}