25:["$","title",null,{"children":"Sankey Rough Draft | Joe Weickert | Observable"}] 49:T85c,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const {nodes, links} = sankey(data); const node = svg.append("g") .attr("stroke", "#000") .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) .attr("fill", d => color(d)) .on("click", highlight_node_links); node.append("title") .text(d => `${d.name}\n${(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.3) .selectAll("g") .data(links) .join("g") .attr("id", function (d, i) { d.id = i; return "link-" + i; }) .attr("class", "link-g") .style("mix-blend-mode", "multiply"); if (edgeColor === "path") { 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 => color(d.source)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); } link.append("path") .attr("class", "link") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source) : color(d.target)) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${(d.value)}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("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); return svg.node(); }4a:T475,function highlight_node_links(ev, node) { let remainingNodes = [], nextNodes = []; let stroke_opacity = 0; if (d3.select(this).attr("data-clicked") == "1") { d3.select(this).attr("data-clicked", "0"); stroke_opacity = 0.3; } else { d3.selectAll("rect") .attr('data-clicked', "0"); d3.selectAll(".link-g") .style("stroke-opacity", 0.3); d3.select(this).attr("data-clicked", "1"); stroke_opacity = 0.9; } const traverse = [ { linkType: "sourceLinks", nodeType: "target" }, { linkType: "targetLinks", nodeType: "source" } ]; traverse.forEach(function (step) { node[step.linkType].forEach(function (link) { remainingNodes.push(link[step.nodeType]); highlight_link(link.id, stroke_opacity); }); while (remainingNodes.length) { nextNodes = []; remainingNodes.forEach(function (node) { node[step.linkType].forEach(function (link) { nextNodes.push(link[step.nodeType]); highlight_link(link.id, stroke_opacity); }); }); remainingNodes = nextNodes; } }); }4b:T9cc,data = { const nodes = [ { name: 'Service 1', colorIndex: 1 }, { name: 'Service 2', colorIndex: 0.5 }, { name: 'Service 3', colorIndex: 0.2 }, { name: 'Apples', colorIndex: 0.9 }, { name: 'Bananas', colorIndex: 0.6 }, { name: 'Oranges', colorIndex: 0.2 }, { name: 'Grapes', colorIndex: 1.0 }, { name: 'Limes', colorIndex: 0.67 }, { name: 'COA 1A', colorIndex: 0.89 }, { name: 'COA 2A', colorIndex: 0.78 }, { name: 'COA 3A', colorIndex: 0.76 }, { name: 'COA 4A', colorIndex: 0.69 }, { name: 'COA 5A', colorIndex: 0.24 }, { name: 'COA 1B', colorIndex: 0.70 }, { name: 'COA 2B', colorIndex: 0.21 }, { name: 'COA 3B', colorIndex: 0.11 }, { name: 'COA 1C', colorIndex: 0.97 }, { name: 'COA 2C', colorIndex: 0.79 }, { name: 'COA 3C', colorIndex: 0.66 } ]; const links = [ {source: 'Service 1', target: 'Apples', value: 12}, {source: 'Service 2', target: 'Bananas', value: 12}, {source: 'Service 2', target: 'Oranges', value: 10}, {source: 'Service 3', target: 'Grapes', value: 10}, {source: 'Service 3', target: 'Limes', value: 13.20}, {source: 'Apples', target: 'COA 1A', value: 5}, {source: 'Apples', target: 'COA 2A', value: 3}, {source: 'Apples', target: 'COA 1B', value: 2}, {source: 'Apples', target: 'COA 2C', value: 1}, {source: 'Apples', target: 'COA 3C', value: 1}, {source: 'Bananas', target: 'COA 3A', value: 4}, {source: 'Bananas', target: 'COA 2B', value: 4}, {source: 'Bananas', target: 'COA 2C', value: 4}, {source: 'Oranges', target: 'COA 4A', value: 1}, {source: 'Oranges', target: 'COA 5A', value: 2}, {source: 'Oranges', target: 'COA 3B', value: 3}, {source: 'Oranges', target: 'COA 1C', value: 4}, {source: 'Grapes', target: 'COA 2A', value: 5}, {source: 'Grapes', target: 'COA 2B', value: 5}, {source: 'Limes', target: 'COA 3A', value: 6}, {source: 'Limes', target: 'COA 2B', value: 2}, {source: 'Limes', target: 'COA 4A', value: 4}, {source: 'Limes', target: 'COA 5A', value: 1.20} ]; return {nodes, links}; }4c:[] 29:{"id":"230f62bc27d43aad","slug":null,"title":"Sankey Rough Draft","thumbnail":"f5f3a5e255a5a2e40d7e7d0e1eb0b3151e0653fc7b4ed5efd72eb8c62fc59508","access_level":"public","create_time":"$D2021-01-21T15:08:20.055Z","update_time":"$D2022-12-07T17:49:52.493Z","view_time":null,"first_public_time":"$D2022-12-02T21:11:45.992Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"164dbf06be59d75e","login":"weickertjoe","name":"Joe Weickert","avatar_url":"https://avatars-next.observableusercontent.com/1169610d6fe2ae12a74ecea51bb14bd3a72502315e48c8bfdf27d06a3798b86e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":191,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f837ae4081a7fac2","login":"weickertjoe","name":"Joe Weickert","avatar_url":"https://avatars-next.observableusercontent.com/1169610d6fe2ae12a74ecea51bb14bd3a72502315e48c8bfdf27d06a3798b86e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f837ae4081a7fac2","login":"weickertjoe","name":"Joe Weickert","avatar_url":"https://avatars-next.observableusercontent.com/1169610d6fe2ae12a74ecea51bb14bd3a72502315e48c8bfdf27d06a3798b86e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sankey Rough Draft","cells":[{"id":8,"value":"md`# Sankey Rough Draft`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof align = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"align\") || \"justify\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof edgeColor = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"color\") || \"none\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"function highlight_link(id, opacity) {\n d3.select(\"#link-\" + id).style(\"stroke-opacity\", opacity);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"results = sankey(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeId(d => d.name)\n .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 5], [width - 1, height - 5]]);\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"color = {\n const colorInterpolate = d3.scaleLinear()\n .domain([0, 0.5, 0.8, 0.9, 1])\n .range([\"#000066\", \"#f00930\", \"#ffff00\", \"#99ffcc\", \"#096309\"]);\n \n return d => colorInterpolate(d.colorIndex);\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"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"}],"files":"$W4c","stdlib":"1"}} 24:null