25:["$","title",null,{"children":"SOS Relief | Jack Verstappen | Observable"}] 4b:T1de3,chart = { const svg = d3.select(DOM.svg(width, height)) .style("background", "#fff") .style("width", "100%") .style("height", "auto"); const {nodes, links} = sankey({ nodes: googleNodes.map(d => Object.assign({}, d)), links: googleEdges.map(d => Object.assign({}, d)) }); svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0 + 5) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0 -10) .attr("stroke", "#333") .attr("fill", d => { return (settings.cohort == "none") ? colorNode(d) : "#eee" }) // .on('mouseover', showConnection) // .on('mouseout', hideConnection) .append("title") .text(d => `${d.desc}`) const edge = svg.append("g").selectAll(".path") .data(links) .enter() .append("g") .attr("class", "path") edge.append("path") .attr("d",link=>edgeBand(link,width,height)) .attr("stroke", "#000") .attr("stroke-width","0px") .attr("fill", d => { return d.cohort !== "" ? colorCohort(d) : settings.edgeColor === "none" ? neutralColor : settings.edgeColor === "path" ? "url(#"+d.source.key+"-"+d.target.key+")" : settings.edgeColor === "input" ? colorNode(d.source) : colorNode(d.target)}) .style('opacity', d => d.cohort == "" ? '0.2' : (settings.cohort === "timeline" && ( d.cohort === 'goldenReliever' || d.cohort === 'superGoldenReliever')) ? '0.8' : (d.cohort === settings.cohort || (settings.cohort === "all" && d.cohort !== "timeline")) ? '0.8' : '0.0') /* .style('opacity', d => d.cohort !== "" ? ((d.cohort === settings.cohort || (settings.cohort === "all" && d.cohort !== "timeline")) ? '0.8' : '0.0') : '0.2') */ // .style("stroke-dasharray", "5 5") // <== This line here!! // .style("stroke-dashoffset", "0") // <== This line here!! .append("title") .text("edge"); /* edge.append("path") .attr("d",link=>edgeBand(link,width,height)) .attr("stroke", "#000") .attr("stroke-width","0px") .attr("fill", "none") // .style("stroke-dasharray", "5 5") // <== This line here!! // .style("stroke-dashoffset", "0") // <== This line here!! */ const labels = svg.append("g") .attr("id", "labels") if (settings.edgeColor === "path") { const gradient = edge.append("linearGradient") .attr("id", d => d.source.key+"-"+d.target.key) .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 => colorNode(d.source)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => colorNode(d.target)); } /* if (settings.cohort === "timeline") { const gradient = edge.append("linearGradient") .attr("id", d => d.source.key+d.monthCreated+"-"+d.target.key+d.monthMatched) .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 => colorMonth(d.monthMatched)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => colorMonth(d.monthCreated)); } */ svg.append("g") .style("font", "14px lato, sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 - 6) .attr("y", d => ((d.y1 + d.y0) / 2)-14) .attr("dy", "0.35em") // .attr("letter-spacing","-0.5") .attr("font-weight",500) .attr("text-anchor", "end") .attr("opacity", settings.cohort === "none" ? 1 : 0 ) .text(d => `${d.left0}`) svg.append("g") .style("font", "14px lato, sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 - 6) .attr("y", d => ((d.y1 + d.y0) / 2)) .attr("dy", "0.35em") .attr("font-weight",500) .attr("text-anchor", "end") .attr("opacity", settings.cohort === "none" ? 1 : 0 ) .text(d => `${d.left1}`) svg.append("g") .style("font", "14px lato, sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 - 6) .attr("y", d => ((d.y1 + d.y0) / 2)+14) .attr("dy", "0.35em") .attr("font-weight",500) .attr("text-anchor", "end") .attr("opacity", settings.cohort === "none" ? 1 : 0 ) .text(d => d.left2) svg.append("g") .style("font", "14px lato, sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x1 + 6) .attr("y", d => ((d.y1 + d.y0) / 2)-14) .attr("dy", "0.35em") // .attr("letter-spacing","-0.5") .attr("font-weight",500) .attr("text-anchor", "start") .attr("opacity", settings.cohort === "none" ? 1 : 0 ) .text(d => `${d.right0}`) svg.append("g") .style("font", "14px lato, sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x1 + 6) .attr("y", d => ((d.y1 + d.y0) / 2)) .attr("dy", "0.35em") .attr("font-weight",500) .attr("text-anchor", "start") .attr("opacity", settings.cohort === "none" ? 1 : 0 ) .text(d => `${d.right1}`) svg.append("g") .style("font", "14px lato, sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x1 + 6) .attr("y", d => ((d.y1 + d.y0) / 2)+14) .attr("dy", "0.35em") .attr("font-weight",500) .attr("text-anchor", "start") .attr("opacity", settings.cohort === "none" ? 1 : 0 ) .text(d => `${d.right2}`) function showConnection(d) { const linkedNodes = []; var traverse = [{ linkType : 'sourceLinks', nodeType : 'target', }, { linkType : 'targetLinks', nodeType : 'source', }]; traverse.forEach((step) => { d[step.linkType].forEach((l) => { linkedNodes.push(l[step.nodeType].key); }); }); // Update linked nodes style d3.selectAll('rect').style( 'opacity', p => { let linked = p && linkedNodes.indexOf(p.key)>=0; return (p && (p.key === d.key || linked)) ? '5' : '0.2' ;}) d3.selectAll('rect').attr( 'stroke-width', p => { let linked = p && linkedNodes.indexOf(p.key)>=0; return (p && (p.key === d.key || linked)) ? '2px' : '1px' ;}) // Update links style edge.selectAll('path').attr( 'stroke-width', p => { p => (p && (p.source.key === d.key || p.target.key === d.key)) ? '2px' : '4px' ;}) edge.selectAll('path').attr( 'stroke', p => (p && (p.source.key === d.key || p.target.key === d.key)) ? '#333333' : '#111111' ); edge.selectAll('path').style( 'opacity', p => (p && (p.source.key === d.key || p.target.key === d.key)) ? '0.5' : '0.2' ); } function hideConnection() { // Update nodes style d3.selectAll('rect').style('opacity', '1'); d3.selectAll('rect').attr('stroke-width', '1px'); // Update links style //d3.selectAll('path').attr('stroke-width', '1px'); //d3.selectAll('path').attr("stroke-width", d => Math.max(1, d.width)); edge.selectAll('path').style('opacity','0.5'); } return svg.node(); }4c:T6ea,function edgeBand(link,width,height){ var curvature = 0.45 //absolute coordinates of the band /** let x0 = Math.round(width*ix) let y0 = Math.round(height*iy) let x1 = Math.round(width*ox) let y1 = Math.round(height*oy) let x2 = Math.round(width*ox) let y2 = Math.round(height*(oy + ody)) let x3 = Math.round(width*ix) let y3 = Math.round(height*(iy + idy)) let dx = Math.round((x1-x0)*curvature) let d = "" **/ let d=""; let dx = Math.round((link.target.x0-link.source.x1)*curvature) function percCalc(perc,min,max) { return min + (perc * (max-min)); } d += "M " + link.source.x1 + " " // + link.source.y0 //Move to (x0,y0) + percCalc(link.srcMin,link.source.y0,link.source.y1) //Move to (x0,y0) d += " C " + (link.source.x1+dx) + " " + percCalc(link.srcMin,link.source.y0,link.source.y1) + " " + (link.target.x0-dx) + " " + percCalc(link.tgtMin,link.target.y0,link.target.y1) + " " + link.target.x0 + " " + percCalc(link.tgtMin,link.target.y0,link.target.y1) + " " //Cubic curve to (x1,y1) d += " L " + link.target.x0 + " " + percCalc(link.tgtMax,link.target.y0,link.target.y1) + " " //Line to (x2,y2) d += " C " + (link.target.x0-dx) + " " + percCalc(link.tgtMax,link.target.y0,link.target.y1) + " " + (link.source.x1+dx) + " " + percCalc(link.srcMax,link.source.y0,link.source.y1) + " " + link.source.x1 + " " + percCalc(link.srcMax,link.source.y0,link.source.y1) //Cubic curve to (x3,y3) d += " L " + link.source.x1 + " " + percCalc(link.srcMin,link.source.y0,link.source.y1) //Line to (x0,y0) return d; }4d:[] 47:{"id":"f59f8c450b386a06","slug":"sosrelief","title":"SOS Relief","thumbnail":"c4896cedd8514d21219e520d9ebe4c6a5b3416dca3be9409c99ac87e11e11247","access_level":"public","create_time":"$D2021-03-12T14:57:22.709Z","update_time":"$D2022-06-03T23:52:10.635Z","view_time":null,"first_public_time":"$D2021-03-12T15:01:12.257Z","has_unpublished_edits":null,"fork":{"id":"25205ad42bee18ea","slug":"sandbox","title":"Sandbox","owner":{"id":"a6a1e4b9e523112f","login":"jackverstappen","name":"Jack Verstappen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a6a1e4b9e523112f","login":"jackverstappen","name":"Jack Verstappen","avatar_url":"https://avatars-next.observableusercontent.com/eef162d47242ef1943dcd344ae5eac7ad3ef7f08e43632320ff154d7c1ceddc5","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1433,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf6b5a97ab314cb8","login":"jackverstappen","name":"Jack Verstappen","avatar_url":"https://avatars-next.observableusercontent.com/eef162d47242ef1943dcd344ae5eac7ad3ef7f08e43632320ff154d7c1ceddc5","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cf6b5a97ab314cb8","login":"jackverstappen","name":"Jack Verstappen","avatar_url":"https://avatars-next.observableusercontent.com/eef162d47242ef1943dcd344ae5eac7ad3ef7f08e43632320ff154d7c1ceddc5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SOS Relief","cells":[{"id":0,"value":"md`# SOS Relief`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"viewof settings = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"settings.cohort == 'all' ? swatches({\n color: d3.scaleOrdinal(cohortCategories, d3.schemeSpectral[cohortCategories.length])\n}) : md``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html`\n${DOM.download(await rasterize(chart), \"flow-o-matic\", \"Download as PNG\")}\n${DOM.download(await serialize(chart), \"flow-o-matic\", \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"googleNodes = {\n let nodes =[];\n const spreadsheet = await d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vTgodSIrRFZcTnLWwPFI1SKKzGh32KM_uvTdVzBWpLS9gEk1Wh0y-_pa3YXeocBBYt1MD9VOkYQiVOd/pub?gid=1751508664&single=true&output=csv').then(data => data.forEach(d => nodes.push(d))); \n// const spreadsheet = await d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ7C_kdslqe8gz4pamLutkvdkEMzKSLBVDloNPa_WQE3CF43N3YTjIaHUvFWGXfFu-9h01ri3XQd9eC/pub?gid=1475024363&single=true&output=csv').then(data => data.forEach(d => nodes.push(d))); \n return nodes;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"googleEdges = {\n let edges =[];\n const spreadsheet = await d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vTgodSIrRFZcTnLWwPFI1SKKzGh32KM_uvTdVzBWpLS9gEk1Wh0y-_pa3YXeocBBYt1MD9VOkYQiVOd/pub?gid=1273814446&single=true&output=csv').then(data => data.forEach(d => edges.push(d))); // d3.tsv returns a Promise\n// const spreadsheet = await d3.tsv('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ7C_kdslqe8gz4pamLutkvdkEMzKSLBVDloNPa_WQE3CF43N3YTjIaHUvFWGXfFu-9h01ri3XQd9eC/pub?gid=1667718767&single=true&output=tsv').then(data => data.forEach(d => edges.push(d))); // d3.tsv returns a Promise\n return edges;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof neutralColor = {\n const form = html``;\n (form.oninput = () => form.value = form.i.value)();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"typeCategories = [\"root\",\"Receiving People\", \"Outgoing Euros\", \"Incoming Euros\", \"Giving People\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"cohortCategories = [\"earlyReliever\",\"singleReliever\",\"multiReliever\",\"superGoldenReliever\",\"goldenReliever\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"monthCategories = [\n \"2020-05\", \"2020-06\", \"2020-07\", \"2020-08\", \"2020-09\", \"2020-10\", \"2020-11\", \"2020-12\",\n \"2021-01\",\"2021-02\",\"2021-03\",\"2021-04\",\"2021-05\", \"2021-06\", \"2021-07\", \"2021-08\", \"2021-09\", \"2021-10\", \"2021-11\", \"2021-12\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return d => color(d.category === undefined ? d.name : d.category);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"function colorNode(d) { \n const typeColorPalette = d3.scaleOrdinal([neutralColor].concat(d3.schemeSpectral[typeCategories.length-1])).domain(typeCategories);\n \n var c = (settings.nodeColor==\"type\" ? d3.scaleOrdinal(typeColorPalette(d.unit)) : neutralColor);\n \n if (settings.nodeColor == \"type\") {\n c = typeColorPalette(d.unit)\n } else if (settings.nodeColor == \"data\") {\n c = d.fixedColor\n } else {\n c = neutralColor\n }\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"function colorMonth(d) { \n const p = d3.scaleOrdinal(d3.schemeSpectral[monthCategories.length-1]).domain(monthCategories);\n \n\n return p(d);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"function colorCohort(d) { \n const cohortColorPalette = d3.scaleOrdinal(d3.schemeSpectral[cohortCategories.length]).domain(cohortCategories);\n \n// console.log(d)\n \n if (settings.cohort == \"timeline\" && (d.cohort == \"goldenReliever\" || d.cohort == \"superGoldenReliever\")) {\n console.log(d);\n \n \n return \"#ff4444\";\n } else \n \n \n return settings.cohort==\"all\" ? cohortColorPalette(d.cohort) \n : settings.cohort == \"timeline\" ? \"url(#\"+d.source.key+d.monthCreated+\"-\"+d.target.key+d.monthMatched+\")\"\n : \"#ff4444\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"width = 975;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"sankey = d3.sankey()\n .nodeId(d => d.key)\n .nodeAlign(d3.sankeyCenter)\n .nodeSort(null)\n .linkSort(null)\n .nodeWidth(25)\n .nodePadding(50)\n .extent([[80, 50], [width-80, height - 5]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"import { style as faStyle, fa } from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null