3f:null 40:["$","title",null,{"children":"Sankey Funnel | Homam Hosseini | Observable"}] 46:Taa9,chart = { const {nodes, links} = sankey_data const svg = d3.select(DOM.svg(width, height)) .style("background", "#fff") .style("width", "100%") .style("height", "auto"); svg.append("g") .attr("stroke", "#000") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0 + 1) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0 - 2) .attr("fill", d => { return color(d.name); }) .append("title") // .attr("transform", "translate(300,150) rotate(10)") .text(d => `link ${d.name}\n${d.value.toLocaleString()}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .attr("stroke", d => 'black') .style("mix-blend-mode", "multiply"); 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.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg.append("g") .style("font", "10px sans-serif") .selectAll("g") .data(nodes) .join("g") .attr('transform', d => `translate(${d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6}, ${(d.y1 + d.y0) / 2})`) .selectAll('text') .data(d => [d]) .join('text') .attr("dy", "0.35em") .attr("text-anchor", d => d.y1 - d.y0 > (height / 6) ? "middle" : d.y0 < height / 2 ? "start" : "end") .attr("transform", "translate(0,0) rotate(90)") .text(d => d.name.replace(/\d+\:/, "") .replace(/success/, "✔️") .replace(/failure/, '╳') .replace(/Flow/, 'F') .replace(/advance/, 'A') .replace(/recede/, 'R') .replace(/msisdn\-submitted/, 'msisdn') .replace(/msisdn\-submission/, 'msisdn') .replace(/pin\-submitted/, 'pin') .replace(/pin\-submission/, 'pin') ) .append("tspan") .attr("fill-opacity", 0.7) .attr("dy", "1.35em").attr("dx", "-1em") .text(d => ` ${d.value.toLocaleString()}`); return svg.node(); }47:T7ad,viewof source = { const textarea = html`

2:Flow:advance:msisdn-submitted,3:Flow:advance:msisdn-submission-success,530
1:Flow:advance:pin-flow,2:Flow:advance:msisdn-submitted,406
1:Flow:advance:moRedir-flow,2:Flow:advance:msisdn-submitted,240
3:Flow:advance:msisdn-submission-success,4:Flow:advance:pin-submitted,216
4:Flow:advance:pin-submitted,5:Flow:recede:pin-submission-failure,148
5:Flow:recede:pin-submission-failure,6:Flow:advance:pin-submitted,101
2:Flow:advance:msisdn-submitted,3:Flow:recede:msisdn-submission-failure,97
6:Flow:advance:pin-submitted,7:Flow:recede:pin-submission-failure,89
4:Flow:advance:pin-submitted,5:Flow:advance:pin-submission-success,68
7:Flow:recede:pin-submission-failure,8:Flow:advance:pin-submitted,62
8:Flow:advance:pin-submitted,9:Flow:recede:pin-submission-failure,55
9:Flow:recede:pin-submission-failure,10:Flow:advance:pin-submitted,38
10:Flow:advance:pin-submitted,11:Flow:recede:pin-submission-failure,36
11:Flow:recede:pin-submission-failure,12:Flow:advance:pin-submitted,25
3:Flow:recede:msisdn-submission-failure,4:Flow:advance:msisdn-submitted,24
4:Flow:advance:msisdn-submitted,5:Flow:recede:msisdn-submission-failure,24
12:Flow:advance:pin-submitted,13:Flow:recede:pin-submission-failure,23
6:Flow:advance:msisdn-submitted,7:Flow:recede:msisdn-submission-failure,21
5:Flow:recede:msisdn-submission-failure,6:Flow:advance:msisdn-submitted,21`;
  textarea.style.display = "block";
  textarea.style.boxSizing = "border-box";
  textarea.style.width = "calc(100% + 28px)";
  textarea.style.font = "var(--mono_fonts)";
  textarea.style.minHeight = "60px";
  textarea.style.border = "none";
  textarea.style.padding = "4px 10px";
  textarea.style.margin = "0 -14px";
  textarea.style.background = "rgb(247,247,249)";
  textarea.style.tabSize = 2;
  textarea.oninput = () => textarea.style.height = `${textarea.value.match(/^/gm).length * 21 + 8}px`;
  textarea.oninput();
  return textarea;
}48:[]
44:{"id":"50235ef09948b407","slug":"flow-o-cash","title":"Sankey Funnel","thumbnail":"9eff565560da8430e8ba1156c0c6a517b2e796ff8ba042a232443ce3854846d9","access_level":"public","create_time":"$D2020-03-17T20:42:51.698Z","update_time":"$D2020-03-18T08:26:34.825Z","view_time":null,"first_public_time":"$D2020-03-18T08:26:35.882Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"94cdb8fcfaa70289","login":"homam","name":"Homam Hosseini","avatar_url":"https://avatars-next.observableusercontent.com/e0def13806509253b7525280313ec25e10226ac9e6db096f202ba32c26977e45","tier":"starter_2024","bio":"","following":false},"version":536,"publish_version":536,"role":null,"authored":false,"authors":[{"type":"individual","id":"2dc4aa8d6c8e9871","login":"homam","name":"Homam Hosseini","avatar_url":"https://avatars-next.observableusercontent.com/e0def13806509253b7525280313ec25e10226ac9e6db096f202ba32c26977e45","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"2dc4aa8d6c8e9871","login":"homam","name":"Homam Hosseini","avatar_url":"https://avatars-next.observableusercontent.com/e0def13806509253b7525280313ec25e10226ac9e6db096f202ba32c26977e45","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 Funnel","cells":[{"id":0,"value":"md`# Sankey Funnel\n\nEdit the textarea below to update the [Sankey diagram](/@d3/sankey-diagram)!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`Each line in the textarea above represents a link in the chart. The source and target of the link are determined by the two names. (The contents of the textarea are interpreted as [CSV](https://en.wikipedia.org/wiki/Comma-separated_values), so put quotes around names if you want them to contain commas.) The thickness of the link is determined by the following value.`","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\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"sankey_data = sankey({\n    nodes: data.nodes.map(d => Object.assign({}, d)),\n    links: data.links.map(d => Object.assign({}, d))\n  })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = {\n  const links = d3.csvParseRows(\n    source, \n    ([source, target, value, linkColor = color]) => (source && target ? {source, target, value: !value || isNaN(value = +value) ? 1 : value, color: linkColor} : null));\n  const nodeByName = new Map;\n  for (const link of links) {\n    if (!nodeByName.has(link.source)) nodeByName.set(link.source, {name: link.source});\n    if (!nodeByName.has(link.target)) nodeByName.set(link.target, {name: link.target});\n  }\n  return {nodes: Array.from(nodeByName.values()), links};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"sankey = d3.sankey()\n    .nodeId(d => d.name)\n    .nodeAlign(d3[`sankeyCenter`])\n    .nodeWidth(15)\n    .nodePadding(padding)\n    .extent([[0, 10], [width, height - 5]])\n    .iterations(200)\n    .nodeSort( (a, b) => {a.vaue - b.value} )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof width = {\n  const form = html`<form class=\"observablehq--inspect\">width = <input name=i type=number min=0 value=720 step=1  style=\"padding:2px;margin:-2px 0;width:120px;\"></form>`;\n  (form.oninput = () => form.value = form.i.valueAsNumber)();\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":28,"value":"viewof height = {\n  const form = html`<form class=\"observablehq--inspect\">height = <input name=i type=number min=0 value=820 step=1  style=\"padding:2px;margin:-2px 0;width:120px;\"></form>`;\n  (form.oninput = () => form.value = form.i.valueAsNumber)();\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":333,"value":"viewof padding = {\n  const form = html`<form class=\"observablehq--inspect\">padding = <input name=i type=number min=0 value=10 step=1  style=\"padding:2px;margin:-2px 0;width:120px;\"></form>`;\n  (form.oninput = () => form.value = form.i.valueAsNumber)();\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":363,"value":"format = {\n  const f = d3.format(\",.0f\");\n  return d => `${f(d)} PLN`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"color = {\n  const color = d3.scaleOrdinal(d3.quantize(d3.interpolateHcl(\"#999\", \"#ccc\"), 5));\n  const reds = d3.scaleOrdinal(d3.quantize(d3.interpolateHcl(\"#d66000\", \"#a9a9b4\"), 5))\n  const greens = d3.scaleOrdinal(d3.quantize(d3.interpolateHcl(\"#60c96e\", \"#4d4193\"), 5))\n  return name => {\n    if(/success/.exec(name))\n        return greens(name.replace(/\\d+\\:/, \"\"))\n    if(/fail/.exec(name))\n        return reds(name.replace(/\\d+\\:/, \"\"))\n    return color(name.replace(/\\d+\\:/, \"\"))\n  };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.10\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}}
45:"$44:body"
</article></body></html>