40:null 41:["$","title",null,{"children":"DIY Vertical Sankey Funnel | futurespoiler | Observable"}] 47:T93d,chart = { const svg = d3 .create("svg") .style("background", "#fff") .attr("width", width) .attr("height", height); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .style("fill", "white") .style("stroke", colors.grey); let cx = widthChart / 2 + padding_chart / 2; let cy = heightChart / 2 + padding_chart / 2; const plot = svg .append("g") .attr("class", "sankey") .attr( "transform", `translate(${-padding_chart * 2}, ${-padding_chart}) rotate(90, ${cx}, ${cy})` ); const { nodes, links } = sankey({ nodes: data.nodes.map(d => Object.assign({}, d)), links: data.links.map(d => Object.assign({}, d)) }); const link = plot .append("g") .attr("class", "links") .attr("fill", "none") .selectAll("g") .data(links) .join("g") .attr("opacity", 0.4) .attr("stroke", d => { if (d.color === "") return "black"; return d.color; }) .style("mix-blend-mode", "multiply"); 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)}`); plot .append("g") .attr("class", "nodes") .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("stroke", d => d.color) .attr("fill", d => d.color) .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); plot .append("g") .style("font", "18px sans-serif") .attr("transform", "translate(-30, 0)") .selectAll("text") .data(nodes) .join("text") .style("fill", d => d.color) .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("transform", d => { const x = d.x1; const y = 5 + (d.y1 + d.y0) / 2; return `rotate(270, ${x + 20}, ${y})`; }) .attr("text-anchor", d => "start") .text(d => d.name) .append("tspan") .attr("fill-opacity", 0.8) .text(d => ` ${d.value.toLocaleString()}`); return svg.node(); }48:T43f,viewof source = { const textarea = html`

Total,Advertisement,${n_ramdon_0},${colors.blue}
Advertisement,Subset 2B,${n_ramdon_0 - n_ramdon},${colors.grey}
Advertisement,TV,${n_ramdon},${colors.blue}
Advertisement,Subset 3C,${
    n_ramdon -
    Math.floor(n_ramdon * perc_random_1) -
    Math.floor(n_ramdon * perc_random_2)
  },${colors.grey}
Subset 2,Subset 3A,${Math.floor(n_ramdon * perc_random_1)},${colors.blue}
Subset 2,Subset 3B,${Math.floor(n_ramdon * perc_random_2)},${colors.blue}`;
  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;
}49:[]
45:{"id":"27704cbfedc1e33f","slug":null,"title":"DIY Vertical Sankey Funnel","thumbnail":"0a8f68dfd66f21d166c1d326018d228b2509780a42412d6cf79eae70b267d8c8","access_level":"public","create_time":"$D2022-10-18T14:41:59.876Z","update_time":"$D2022-10-18T20:56:40.044Z","view_time":null,"first_public_time":"$D2022-10-18T14:41:59.876Z","has_unpublished_edits":null,"fork":{"id":"5e066b0729ea511d","slug":"diy-vertical-sankey-funnel","title":"DIY Vertical Sankey Funnel","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"stars":0,"starred":false,"owner":{"type":"team","id":"49b13f540cc27c5d","login":"futurespoiler","name":"futurespoiler","avatar_url":"https://avatars-next.observableusercontent.com/fd39b551be612288b6236cdff609e6c0e3c637a1bfbe228f66f1f811edd4f448","tier":"starter_2024","bio":"","following":false},"version":810,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e968fbec4a817c8","login":"futurespoiler","name":"futurespoiler","avatar_url":"https://avatars-next.observableusercontent.com/fd39b551be612288b6236cdff609e6c0e3c637a1bfbe228f66f1f811edd4f448","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"4e968fbec4a817c8","login":"futurespoiler","name":"futurespoiler","avatar_url":"https://avatars-next.observableusercontent.com/fd39b551be612288b6236cdff609e6c0e3c637a1bfbe228f66f1f811edd4f448","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"DIY Vertical Sankey Funnel","cells":[{"id":0,"value":"md`# DIY Vertical Sankey Funnel\n\nFunnel diagrams are used to represent a change in processes. However, sometimes we also want to include the value that is left behind. Sankey diagrams are great at doing this.\n\nSeveral online tools allow doing Sankeys, but most of them only include horizontal options. Which makes them look different from the traditional funnels that are used in, for example, Sales or Marketing departments.\n\nThis notebook allows the user to create a vertical Sankeys, using their own data (check below the graph to paste your numbers!).\n\nBased on the wonderful notebooks from [Kamil Essekkat](/@ekamil/flow-o-matic) and [Tom Shanley](/@tomshanley/vertical-sankey-with-elegant-links-to-entry-and-exit-nodes)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md` ## Data\n\nThis Sankey is displaying fake data right now. To update it, edit the field below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$48","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 structure of the data should be *Source,Target,Value,Color*.\n\nThe 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.\n\nInclude a color at the end to have your links appear in different hues. They can be hex codes, rgba, or color names such as *black* or *blue*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"md`## Personalize your canvas`","pinned":false,"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=600 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=800 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":761,"value":"md`You can edit the separation between the nodes by changing the padding`","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=40 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":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":500,"value":"colors = ({\n  black: \"#1c1c1c\",\n  dark_blue: \"#001489\",\n  blue: \"#354B96\",\n  grey: \"#BCBCBC\",\n  dark_grey: \"#888888\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"widthChart = width - padding_chart * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"heightChart = height - padding_chart * 1.25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"padding_chart = 75","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\n  .sankey()\n  .nodeId((d) => d.name)\n  .nodeAlign(d3.sankeyCenter)\n  .nodeWidth(5)\n  .nodePadding(padding)\n  .extent([\n    [1, 1],\n    [heightChart, widthChart - 1]\n  ])\n  .nodeSort((a, b) => {\n    a.vaue - b.value;\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":771,"value":"md`### Function for creating random data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"n_ramdon_0 = randomIntFromInterval(n_ramdon * 1.9, n_ramdon * 1.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"n_ramdon = randomIntFromInterval(700, 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"perc_random_1 = randomIntFromInterval(40, 10) / 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"perc_random_2 = randomIntFromInterval(40, 10) / 100","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(source, ([source, target, value, color]) =>\n    source && target\n      ? {\n          source,\n          target,\n          value: !value || isNaN((value = +value)) ? 1 : value,\n          color\n        }\n      : null\n  );\n  const nodeByName = new Map();\n  for (const link of links) {\n    if (!nodeByName.has(link.source))\n      nodeByName.set(link.source, { name: link.source });\n    if (!nodeByName.has(link.target))\n      nodeByName.set(link.target, { name: link.target });\n  }\n\n  const nodes = Array.from(nodeByName.values());\n\n  nodes.forEach((d) => {\n    let thisLink = links.filter((e) => e.target === d.name);\n    if (thisLink.length === 0)\n      thisLink = links.filter((e) => e.source === d.name);\n    d.color = thisLink[0].color;\n  });\n  return { nodes, links };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"// from https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript\n\nfunction randomIntFromInterval(min, max) {\n  return Math.floor(Math.random() * (max - min + 1) + min);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"md`### JavaScript libraries`","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@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":"$W49","stdlib":"1"}}
46:"$45:body"
</article></body></html>