44:["$","title",null,{"children":"Flow Breakdown | Jack Verstappen | Observable"}] 4c:T1518,chart = { const svg = d3.select(DOM.svg(width, height)) .style("background", "#fff") .style("width", "100%") .style("height", "auto"); const {nodes, links} = sankey({ nodes: data.nodes.map(d => Object.assign({}, d)), links: data.links.map(d => Object.assign({}, d)) }); var order=[]; nodes.forEach(n => order.push(n.issueType+"."+n.issueRank)); order.sort((a,b) => a < b ? 1 : -1); nodes.forEach(n => n.absoluteRank = order.indexOf(n.issueType+"."+n.issueRank)); order = []; nodes.forEach(n => order.push(n.issueType+"."+relativeRank(n))); order.sort((a,b) => a < b ? 1 : -1); nodes.forEach(n => n.relativeRank = order.indexOf(n.issueType+"."+relativeRank(n))); nodes.forEach(n => n.tension = n.absoluteRank - n.relativeRank); var maxTension = Math.max.apply(Math, nodes.map(function(n) { return n.tension; })) var minTension = Math.min.apply(Math, nodes.map(function(n) { return n.tension; })) var strongestTension = Math.max(Math.abs(maxTension),Math.abs(minTension)); // nodes.forEach(n => n.tensionPerc = (n.tension / strongestTension)); nodes.forEach(n => n.tensionPerc = (n.tension / nodes.length)); var maxTensionPerc = Math.max.apply(Math, nodes.map(function(n) { return n.tensionPerc; })) var minTensionPerc = Math.min.apply(Math, nodes.map(function(n) { return n.tensionPerc; })) console.log(nodes); console.log(maxTension); console.log(minTension); console.log(maxTensionPerc); console.log(minTensionPerc); svg.append("g") .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("stroke", "#333") .attr("fill", d => { return colorNode(d) }) .on('mouseover', showConnection) .on('mouseout', hideConnection) .append("title") .text(d => `[${d.issueType}] ${d.issueKey}\n${d.issueDesc}\n→${d.value.toLocaleString()}`) const link = svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("g") // .attr("stroke", d => d3.color(d.color) || color) .style("mix-blend-mode", "multiply") .on('mouseover', null) .on('mouseout', null) const labels = svg.append("g") .attr("id", "labels") 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 => colorNode(d.source)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => colorNode(d.target)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? neutralColor : edgeColor === "path" ? d.uid : edgeColor === "input" ? colorNode(d.source) : colorNode(d.target)) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.issueKey} → ${d.target.issueKey}\n${d.value.toLocaleString()}`); svg.append("g") .style("font", "10px sans-serif") .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("font-weight",700) .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => `${d.issueKey} - ${d.issueDesc.replace(/(.{7})..+/, "$1…")}`) // .text(d => `${d.issueDesc.replace(/(.{20})..+/, "$1…")}`) .append("tspan") .attr("fill-opacity", 0.7) .text(d => ` [${d.value.toLocaleString()}]`); 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].issueKey); }); }); // Update linked nodes style d3.selectAll('rect').style( 'opacity', p => { let linked = p && linkedNodes.indexOf(p.issueKey)>=0; return (p && (p.issueKey === d.issueKey || linked)) ? '1' : '0.2' ;}) d3.selectAll('rect').attr( 'stroke-width', p => { let linked = p && linkedNodes.indexOf(p.issueKey)>=0; return (p && (p.issueKey === d.issueKey || linked)) ? '2px' : '1px' ;}) // Update hovered node style d3.select(this).style('opacity', '1'); // Update links style d3.selectAll('path').style( 'opacity', p => (p && (p.source.issueKey === d.issueKey || p.target.issueKey === d.issueKey)) ? '1' : '0.15' ); } function hideConnection() { // Update nodes style d3.selectAll('rect').style('opacity', '1'); d3.selectAll('rect').attr('stroke-width', '1px'); // Update links style d3.selectAll('path').style('opacity', '1'); //d3.selectAll('path').attr('stroke-width', '1px'); //d3.selectAll('path').attr("stroke-width", d => Math.max(1, d.width)); } return svg.node(); }4d:T4e4,viewof jiraData = { const textarea = html`

Initiative,KEY-0001,Backlog,Description...,,a

Epic,KEY-0011,Backlog,Description...,KEY-0001,z
Epic,KEY-0021,Backlog,Description...,KEY-0001,y
Epic,KEY-0031,Backlog,Description...,KEY-0001,x

Story,KEY-0111,Backlog,Description...,KEY-0011,a
Story,KEY-0211,Backlog,Description...,KEY-0011,d
Story,KEY-0311,Backlog,Description...,KEY-0011,g
Story,KEY-0121,Backlog,Description...,KEY-0021,b
Story,KEY-0221,Backlog,Description...,KEY-0021,e
Story,KEY-0321,Backlog,Description...,KEY-0021,h
Story,KEY-0131,Backlog,Description...,KEY-0031,c
Story,KEY-0231,Backlog,Description...,KEY-0031,f
Story,KEY-0331,Backlog,Description...,KEY-0031,i
`;
  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;
}4e:[]
48:{"id":"525eed830a0afcf7","slug":"flow-breakdown","title":"Flow Breakdown","thumbnail":"d301a0f3f66bddfc0490e4b00c70bc6c9a9607f726c6bc8fc064fe196f305611","access_level":"public","create_time":"$D2021-02-23T09:36:34.624Z","update_time":"$D2021-03-25T12:01:24.996Z","view_time":null,"first_public_time":"$D2021-02-23T13:00:40.527Z","has_unpublished_edits":null,"fork":{"id":"6fc31ad8015fcd48","slug":"portfolio-to-teams-flow-diagram","title":"Portfolio to Teams - Flow Diagram","owner":{"id":"5bfcd1f236454eeb","login":"troymagennis","name":"Troy Magennis"}},"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":889,"publish_version":889,"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":2,"collection":{"id":"570c20653ad0a63b","slug":"beautifuls-swims-in-the-data-lake","title":"Beautifuls swims in the data lake","owner":{"id":"a6a1e4b9e523112f","login":"jackverstappen","name":"Jack Verstappen"}},"type":"notebook","body":{"titling":"auto","title":"Flow Breakdown","cells":[{"id":0,"value":"md`# Flow Breakdown`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"viewof nodeColor = Object.assign(html`<select>\n  <option value=type selected>Based on issueType\n  <option value=flow>Based on issueStatus\n  <option value=tension>Based on tension\n  <option value=none>No color\n</select>`, {\n  value: new URLSearchParams(html`<a href>`.search).get(\"color\") || \"type\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"viewof edgeColor = Object.assign(html`<select>\n  <option value=input>Based on input\n  <option value=output>Based on output\n  <option value=path selected>Based on input-output\n  <option value=none>No color\n</select>`, {\n  value: new URLSearchParams(html`<a href>`.search).get(\"color\") || \"path\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"viewof relativeOrder = {\n  const form = html`<form><label><input name=i type=checkbox> Relative ranking</label>`;\n  form.i.onclick = () => (form.value = form.i.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n  form.value = form.i.checked;\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":750,"value":"nodeColor == 'type' ? swatches({\n  color: d3.scaleOrdinal(typeCategories, [neutralColor].concat(d3.schemeSpectral[typeCategories.length-1])),\n  columns: \"80px\"\n}) : \nnodeColor == 'flow' ? swatches({\n  color: d3.scaleOrdinal(flowCategories, [neutralColor].concat(d3.schemeSpectral[flowCategories.length-1])),\n  columns: \"80px\"\n}) : \nnodeColor == 'tension' ? legend({\n  color: d3.scaleDivergingSqrt([1, 0, -1], d3.interpolateRdBu),\n  title: \"Tension\",\n  tickFormat: \"+%\"\n}) : md`No legend`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4c","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":12,"value":"md`Each line in the textarea below 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. You can also specify a fill color after the number. Last value is the sort value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$4d","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":16,"value":"data = {\n  const nodes = d3.csvParseRows(jiraData, ([issueType,issueKey,issueStatus,issueDesc,issueParent,issueRank]) => (issueKey ? {issueType, issueKey, issueStatus, issueDesc, issueParent, issueRank}:null));\n  const links = d3.csvParseRows(jiraData, ([issueType,issueKey,issueStatus,issueDesc,issueParent,issueRank]) => (issueKey && issueParent ? {source:issueKey, target:issueParent, value:1}: null));\n\n  return {nodes, links};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"maxRows = Math.max(\n  data.nodes.reduce((counter, { issueType }) => issueType === 'Sub-task' ? counter += 1 : counter, 0)\n  ,data.nodes.reduce((counter, { issueType }) => issueType === 'Story' ? counter += 1 : counter, 0)\n  ,data.nodes.reduce((counter, { issueType }) => issueType === 'Task' ? counter += 1 : counter, 0)\n  ,data.nodes.reduce((counter, { issueType }) => issueType === 'Initiative' ? counter += 1 : counter, 0)\n  ,data.nodes.reduce((counter, { issueType }) => issueType === 'Theme' ? counter += 1 : counter, 0)  \n  );\n","pinned":true,"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.issueKey)\n    .nodeAlign(d3.sankeyRight)\n//    .nodeSort(inputOrder ? null : undefined)\n    .nodeSort(function(a, b) { \n//        console.log(a.issueKey+\" vs \"+b.issueKey+\" : \"+rankValue(a)+\" < \"+rankValue(b));\n        if (relativeOrder && a.sourceLinks[0] != b.sourceLinks[0]) {\n//          return  ((a.sourceLinks[0].issueRank > b.sourceLinks[0].issueRank)?-1:1); \n          let ra = rankValue(a);\n          let rb = rankValue(b);\n          return (ra<rb)?-1:1;\n        } else {\n          return  (a.issueRank < b.issueRank)?-1:1; \n        }         \n      })\n    .linkSort(function(a, b) { \n      return (a.source.issueRank < b.source.issueRank)?-1:1; })\n    .nodeWidth(15)\n    .nodePadding(padding)\n    .extent([[50, 5], [width-50, height - 5]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"function rankValue(d) {\n  \n  return (relativeOrder) ? relativeRank(d) : d.issueRank;\n  \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"function relativeRank(d) {\n  let r = d.issueRank; \n  \n  while (d.sourceLinks[0] && d.sourceLinks[0].target) {\n    d = d.sourceLinks[0].target;\n    r = d.issueRank+\".\"+r;\n  }\n  return r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"height = maxRows * 12 +100","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=5 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":256,"value":"viewof neutralColor = {\n  const form = html`<form class=\"observablehq--inspect\">neutralColor = <input name=i type=color value=\"#eeeeee\" style=\"padding:2px;margin:-2px 0;\"></form>`;\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\",\"Initiative\", \"Epic\", \"Story\", \"Task\", \"Sub-task\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"flowCategories = [\"Backlog\",\"Selected for Development\",\"In Progress\",\"In Review\",\"TESTING\", \"Done\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"function colorCategories() {\n\n  return (\n    nodeColor==\"type\" ? typeCategories : \n    nodeColor==\"flow\" ? flowCategories : \n    null);\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  const flowColorPalette = d3.scaleOrdinal([neutralColor].concat(d3.schemeSpectral[flowCategories.length-1])).domain(flowCategories);\n  const tensionColorPalette = d3.scaleDivergingSqrt([1, 0, -1], d3.interpolateRdBu);\n  \n  var c = (nodeColor==\"type\" ? typeColorPalette(d.issueType) : \n    nodeColor==\"flow\" ? flowColorPalette(d.issueStatus) : \n    nodeColor==\"tension\" ? tensionColorPalette(d.tensionPerc) :\n    neutralColor);\n  \n  if (nodeColor == \"type\") {\n    c = typeColorPalette(d.issueType)\n  } else if (nodeColor == \"flow\") {\n    c = flowColorPalette(d.issueStatus)\n  } else if (nodeColor == \"tension\") {\n    c = tensionColorPalette(d.tensionPerc)\n  } else {\n    c = neutralColor\n  }\n  \n  if (d.issueKey == \"ALIGN-6\") console.log(nodeColor+\":\"+d.issueKey+\":\"+d.issueType+\":\"+d.issueStatus+\":\"+c);\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":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":21,"value":"d3 = require(\"d3@5\", \"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":"$W4e","stdlib":"1"}}
24:null
</article></body></html>