25:null 26:["$","title",null,{"children":"Path - Trace - Sankey | Chuncheng | Observable"}] 2b:T9b8,chart = { const svg = d3.select(DOM.svg(width, height)).attr("id", "chart"); // Noticed have to append components to gChart group to have chart margin // If SVG defined the same as the block version, the node isn't returned const gChart = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const nodes = data.nodes; const links = data.links; const defaultOpacity = 0.3; // Adding rects gChart .append("g") .selectAll("rect") .data(nodes) .enter() .append("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) .attr("fill", (d) => colorScale(d.name)) .call(drag()) .append("title") .text((d) => `${d.name}\n${format(d.value)}`); // links group const link = gChart .append("g") .attr("fill", "none") .selectAll("g") .data(links) .enter() .append("g") .style("mix-blend-mode", "multiply"); // link group gradients const gradient = link .append("linearGradient") .attr("id", (d) => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => d.source.x1) .attr("x2", (d) => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", (d) => colorScale(d.source.name)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", (d) => colorScale(d.target.name)); // adding path links link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .style("stroke", (d) => d.uid) .style("stroke-opacity", defaultOpacity) .style("stroke-width", (d) => Math.max(1, d.width)) .on("mouseover", function () { d3.select(this).style("stroke-opacity", 0.5); }) .on("mouseout", function () { d3.select(this).style("stroke-opacity", defaultOpacity); }); // adding titles for links link .append("title") .text((d) => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); // adding texts - for nodes const text = gChart .append("g") .selectAll("text") .data(nodes) .enter() .append("text") .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.name); cache[0] = link; cache[1] = text; return svg.node(); }2c:Tc47,drag = () => { function dragstarted(event) { console.log(1, event, event.x, event.y, event.subject); dragging[0] = event.sourceEvent.path[0]; let w = event.subject.x1 - event.subject.x0; let h = event.subject.y1 - event.subject.y0; let dy = event.y - (event.subject.y0 + h / 2); event.subject.x0 = event.x - w / 2; event.subject.x1 = event.x + w / 2; event.subject.y0 = event.y - h / 2; event.subject.y1 = event.y + h / 2; d3.select(dragging[0]).attr("x", event.subject.x0); d3.select(dragging[0]).attr("y", event.subject.y0); for (let i = 0; i < event.subject.sourceLinks.length; i++) { event.subject.sourceLinks[i].y0 += dy; } for (let i = 0; i < event.subject.targetLinks.length; i++) { event.subject.targetLinks[i].y1 += dy; } } function dragged(event) { let w = event.subject.x1 - event.subject.x0; let h = event.subject.y1 - event.subject.y0; let dy = event.y - (event.subject.y0 + h / 2); event.subject.x0 = event.x - w / 2; event.subject.x1 = event.x + w / 2; event.subject.y0 = event.y - h / 2; event.subject.y1 = event.y + h / 2; d3.select(dragging[0]).attr("x", event.subject.x0); d3.select(dragging[0]).attr("y", event.subject.y0); for (let i = 0; i < event.subject.sourceLinks.length; i++) { event.subject.sourceLinks[i].y0 += dy; } for (let i = 0; i < event.subject.targetLinks.length; i++) { event.subject.targetLinks[i].y1 += dy; } } function dragended(event) { console.log(3, event, event.subject); let w = event.subject.x1 - event.subject.x0; let h = event.subject.y1 - event.subject.y0; let dy = event.y - (event.subject.y0 + h / 2); event.subject.x0 = event.x - w / 2; event.subject.x1 = event.x + w / 2; event.subject.y0 = event.y - h / 2; event.subject.y1 = event.y + h / 2; d3.select(dragging[0]).attr("x", event.subject.x0); d3.select(dragging[0]).attr("y", event.subject.y0); for (let i = 0; i < event.subject.sourceLinks.length; i++) { event.subject.sourceLinks[i].y0 += dy; } for (let i = 0; i < event.subject.targetLinks.length; i++) { event.subject.targetLinks[i].y1 += dy; } dragging[0] = 0; const defaultOpacity = 0.3; cache[0] .selectAll("path") .attr("d", d3.sankeyLinkHorizontal()) .style("stroke", (d) => d.uid) .style("stroke-opacity", defaultOpacity) .style("stroke-width", (d) => Math.max(1, d.width)) .on("mouseover", function () { d3.select(this).style("stroke-opacity", 0.5); }) .on("mouseout", function () { d3.select(this).style("stroke-opacity", defaultOpacity); }); cache[1] .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) => { // console.log(d); return d.name; }); } return d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }2d:T4f8,data = { // initial data const network = mkNetworkReal(); // sankey adds graphical attributes to initial data d3 .sankey() .nodeWidth(15) .nodePadding(30) .size([widthInner, heightInner * 0.7])(network); const scaleX = d3.scaleLinear().domain([0, 4.5]).range([0, width]); let pos = parsePos(); let autoMode = false; for (let i in network.nodes) { if (autoMode) { let name = network.nodes[i].name; let j = parseInt(name.slice(1, 2)); let w = network.nodes[i].x1 - network.nodes[i].x0; network.nodes[i].x0 = scaleX(j); network.nodes[i].x1 = network.nodes[i].x0 + w; } else { let subject = network.nodes[i]; let w = subject.x1 - subject.x0; let h = subject.y1 - subject.y0; let dx = parseFloat(pos[i][1]) - subject.x0; let dy = parseFloat(pos[i][2]) - subject.y0; subject.x0 = parseFloat(pos[i][1]); subject.x1 = subject.x0 + w; subject.y0 = parseFloat(pos[i][2]); subject.y1 = subject.y0 + h; for (let i = 0; i < subject.sourceLinks.length; i++) { subject.sourceLinks[i].y0 += dy; } for (let i = 0; i < subject.targetLinks.length; i++) { subject.targetLinks[i].y1 += dy; } } } return network; }2e:T9a5,mkNetworkReal = () => { const nodes = []; const links = []; // N 0 nodes.push(Object.assign({ name: "N0-Invited" })); // N 1 nodes.push(Object.assign({ name: "N0-Open" })); // Phase 1 // N 2 nodes.push(Object.assign({ name: "N1-Win" })); // N 3 nodes.push(Object.assign({ name: "N1-Lose" })); // N 4 nodes.push(Object.assign({ name: "N1-Pend" })); // Phase 2 // N 5 nodes.push(Object.assign({ name: "N2-Win" })); // N 6 nodes.push(Object.assign({ name: "N2-Lose" })); // N 7 nodes.push(Object.assign({ name: "N2-Pend" })); // Phase 4 // N 8 nodes.push(Object.assign({ name: "N3-Win" })); // N 9 nodes.push(Object.assign({ name: "N3-Lose" })); // N 10 nodes.push(Object.assign({ name: "N3-Pend" })); // Phase 5 // N 11 nodes.push(Object.assign({ name: "N4-FinalWin" })); // Phase 1 // 11 in Group01(11) win, // 2 in Group02(220) win, // 218 in Group02(220) lose. for (let i = 0; i < 11; i++) { links.push(Object.assign({ source: 0, target: 2, value: 1 })); } for (let i = 0; i < 2; i++) { links.push(Object.assign({ source: 1, target: 2, value: 1 })); } for (let i = 0; i < 220 - 2; i++) { links.push(Object.assign({ source: 1, target: 3, value: 1 / 10 })); } // Phase 2 // 5 in Group11(13) win, // 7 in Group11(13) lose, // 1 in Group11(13) pend. for (let i = 0; i < 5; i++) { links.push(Object.assign({ source: 2, target: 5, value: 1 })); } for (let i = 0; i < 1; i++) { links.push(Object.assign({ source: 2, target: 7, value: 1 })); } for (let i = 0; i < 13 - 5 - 1; i++) { links.push(Object.assign({ source: 2, target: 6, value: 1 })); } // Phase 3 // 1 in Group21(5) win, (Yimou Zhang), // 2 in Group21(5) lose, // 2 in Group21(5) pend. links.push(Object.assign({ source: 5, target: 8, value: 1 })); for (let i = 0; i < 2; i++) { links.push(Object.assign({ source: 5, target: 9, value: 1 })); } for (let i = 0; i < 2; i++) { links.push(Object.assign({ source: 5, target: 10, value: 1 })); } // Phase 4 // 1 as Yimou Zhang, // 1, 2 as previous Pend. links.push(Object.assign({ source: 8, target: 11, value: 1 })); for (let i = 0; i < 1; i++) { links.push(Object.assign({ source: 7, target: 11, value: 1 })); } for (let i = 0; i < 2; i++) { links.push(Object.assign({ source: 10, target: 11, value: 1 })); } return Object.assign({ nodes: nodes, links: links }); }2f:T7d5,// Function builds nodes and links and you can also specify order flow makeNetwork = function(csv) { // log(csv); // use only required attributes const data = csv.map(element => { return { "Disruptions": "Disruptions", "Status": element["Status"], "Impact": element["Impact"], "Activity Type" : element["Activity Type"], "Traffic District": element["Traffic District"], "Infrastructure": element["Infrastructure"] }; }); // all the unique data values const reduceFunc = (acc, curVal) => acc.concat(curVal); const filterFunc = d => d.key != ""; const allValues = data.map(d => Object.values(d)) .reduce(reduceFunc, []).filter(d => d != ""); // sankey nodes const nodes = [...new Set(allValues)]; const sankeyNodes = nodes.map(d => { return {name: d}; }); // sankey flow order // Disruptions → Status → Impact → Activity Type → Traffic District → Infrastructure const order = [ "Disruptions", "Status", "Impact", "Activity Type", "Traffic District", "Infrastructure" ]; //sankey links const orderLinks = d3.range(1, order.length) .map((d, i) => linkMaker(order[i], order[i + 1])) .reduce(reduceFunc, []); //sankey json const network = {nodes: sankeyNodes, links: orderLinks}; return network; // builds the links function linkMaker(attr1, attr2) { const links = d3.nest().key(d => d[attr1]) .key(d => d[attr2]) .entries(data) .filter(filterFunc) .map(d => { const flows = d.values.filter(filterFunc).map(p => { return { source : nodes.indexOf(d.key), target : nodes.indexOf(p.key), value : p.values.length }; }); return flows; }); return links.reduce(reduceFunc, []); }; }30:[] 29:{"id":"3b6989e6e3534274","slug":"untitled/2","title":"Path - Trace - Sankey","thumbnail":"c34c83fd0a968a6222eaa7cda70ec3bdde11784e7ddc65b0279ae5e90a4d4050","access_level":"public","create_time":"$D2021-09-26T13:50:32.677Z","update_time":"$D2021-09-29T14:28:57.729Z","view_time":null,"first_public_time":"$D2021-09-26T15:03:00.717Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":592,"publish_version":592,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Path - Trace - Sankey","cells":[{"id":0,"value":"md`# Path - Trace - Sankey\n\n**Drag** the nodes (rects) to adjust the layout.\n\n## Layout Memory\n\nNow, the layout of your choice can be 'saved' by\n> Clipping the **ssss** into **posSsss**\n\nIf you do so, the layout will be saved.\nAnd the graph will **automatically** layout as the very same setting as you have chosen.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"ssss = (() => {\n now;\n let xys = data.nodes.map((d, i) => [i, d.x0, d.y0].join(\",\"));\n let string = xys.join(\";\");\n return string;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"posSsss = \"0,26.49073028564453,321.9855264597926;1,-4.509829759597778,-0.20819979963647484;2,259.4949645996094,315.73731163288005;3,624.5015869140625,-0.960107043036146;4,206.2222222222222,172.67724137931046;5,464.4986572265625,348.73032352842137;6,470.498779296875,206.4796520364696;7,643.5018920898438,422.22788233263736;8,649.5020141601562,377.227058358028;9,650.5020141601562,325.60206593480603;10,645.501953125,275.6011809250404;11,883.5062255859375,263.3528440278152\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"cache","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"cache = (() => {\n return [0, 1, 2];\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"dragging = [0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`#### Consts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"outerWidth = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"outerHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"widthInner = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"heightInner = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"colorScale = d3.scaleOrdinal()\n .domain(data.nodes.map(d => d.name))\n .range(colors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"format = {\n const f = d3.format(\",.0f\");\n return (d) => `${f(d)} Teams`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"colors = [\n \"#ad002d\",\"#3addc5\",\"#e600d2\",\"#007203\",\"#6b008e\",\n \"#ffa834\",\"#005da3\",\"#e76800\",\"#ceaeff\",\"#003503\",\n \"#ffa3d8\",\"#00885c\",\"#ac2600\",\"#331a49\",\"#8e6b00\",\n \"#ffa7ad\",\"#5d3a00\",\"#d5c593\",\"#6d0014\",\"#ffa178\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"// d3.sankey().nodeWidth(15).nodePadding(30).size([width, height])(mkNetwork())\n{\n // let a = mkNetworkReal();\n // // let a = makeNetwork(disruptions);\n // d3\n // .sankey()\n // .nodeWidth(15)\n // .nodePadding(30)\n // .size([widthInner, heightInner * 1.5])(a);\n // return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"myNetwork = mkNetworkReal()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"mkNetwork = () => {\n const nodes = [];\n const links = [];\n const num = 10;\n for (let i = 0; i < num; i++) {\n nodes.push(Object.assign({ name: \"\" + i }));\n }\n\n for (let i = 0; i < num * 3; i++) {\n let a = 0,\n b = 0;\n while (a >= b) {\n a = rndInt(num);\n b = rndInt(num);\n }\n links.push(Object.assign({ source: a, target: b, value: 10 }));\n }\n\n return Object.assign({\n nodes: nodes,\n links: links\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"rndInt = (n) => {\n return parseInt(Math.random() * n);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"parsePos()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"parsePos = () => {\n let a = posSsss.split(\";\");\n let b = a.map((d) => d.split(\",\"));\n return b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`#### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"html\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`#### Dependency`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3\", \"d3-sankey@0.7.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"TwitterWidget = require('https://bundle.run/twitter-widgets@2.0.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"TwitterWidget.load()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2a:"$29:body"