2c:null 2d:["$","title",null,{"children":"Portfolio to Teams - Flow Diagram | Troy Magennis | Observable"}] 32:T79b,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)) }); 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("fill", d => { let c; for (const link of d.sourceLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } if (c === undefined) for (const link of d.targetLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } return (d3.color(c) || d3.color(color)).darker(0.5); }) .append("title") .text(d => `${d.name}\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"); link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\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("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text(d => ` ${d.value.toLocaleString()}`); return svg.node(); }33:T54d,md`Helping visualize how work contributes to a strategy is key to making sure that the right work is started. This diagram helps teams visualize the priority of work and what teams are responsible for that work. SURE - it looks complicated, but the diagram depicts - Strategy -> Feature/Experiment -> Work Needed -> What team does the work. To create your own, build up comma-separated lines in the following format - \`\`\` strategy 1 name,feature 1 name,[sum features contributing],[color]\n .... strategy n name,feature n name,[sum features contributing],[color]\n feature 1 name,work item 1 name,[sum work item size],[color]\n ....\n feature n name,work item n name,[sum work item size],[color]\n work item 1 name,team doing work item 1 name,[sum work item size],[color]\n ....\n work item n name,team doing work item n name,[sum work item size],[color]\n \`\`\` I generally use color for priorities of strategy and features. And color to indicate in-progress for work. But, there are no real rules here. Just find ways to help meet the following objectives - 1. The right work is started (is highest priority work started?) 2. The desired mix of work towards strategy is planned (are the strategy bars the right ratio?) 3. Is the amount of work planned for each team within reality limits (are the team bar sizes out of ratio to team capacity?) `34:Tb5c,viewof source = { const textarea = html`

Reduce Credit Card Fees,New VISA/MC Provider,22,Red
Reduce Credit Card Fees,Support CVC Code on purchase,8,Red
Security and Governance,PCI Audit Findings Implementation,10,Red
Security and Governance,Tokenization of CC data,12,Red
Security and Governance,Open Source Library Upgrades,15,Red
Reduce Shipping Costs,Aggregate Multiple Orders,6,Yellow
Add New Payment Providers,Bitcoin Support,18,Green
Add New Payment Providers,AMEX Support,8,Orange
New VISA/MC Provider,Authorization API Call,5
New VISA/MC Provider,Chargeback API Call,2
New VISA/MC Provider,Update checkout pages,10
New VISA/MC Provider,Update refund pages,5
Support CVC Code on purchase,Update checkout pages on submit,3
Support CVC Code on purchase,Approve/Decline API call,3
Support CVC Code on purchase,Handle decline logic,2
PCI Audit Findings Implementation,Mitigate database PCI issues,10
Tokenization of CC data,Implement Tokenization API calls,8
Tokenization of CC data,Replace current card data with Tokens,4
Open Source Library Upgrades,UI Libraries,10
Open Source Library Upgrades,Server side libraries,5
Aggregate Multiple Orders,Detect multiple orders to same address,3
Aggregate Multiple Orders,Collapse multiple orders into one packing slip,3
AMEX Support,Authorization API Call,3
AMEX Support,Chargeback API Call,2
AMEX Support,Update checkout pages,3
Bitcoin Support,Authorization API Call,10
Bitcoin Support,Chargeback API Call,5
Bitcoin Support,Update checkout pages,3
Authorization API Call,Team Server Side,5
Chargeback API Call,Team Server Side,2
Update checkout pages,Team UI 1,10
Update refund pages,Team UI 1,5
Update checkout pages on submit,Team UI 2,3
Approve/Decline API call,Team Server Side,3
Handle decline logic,Team UI 2,2
Mitigate database PCI issues,Database,10
Implement Tokenization API calls,Team Server Side,8,green
Replace current card data with Tokens,Database,4,green
UI Libraries,Team UI 2,10
Server side libraries,Team Server Side,5,green
Detect multiple orders to same address,Logistics,3
Collapse multiple orders into one packing slip,Logistics,3
Authorization API Call,Team Server Side,3
Chargeback API Call,Team Server Side,2
Update checkout pages,Team UI 1,3
Authorization API Call,Team Server Side,10
Chargeback API Call,Team Server Side,5
Update checkout pages,Team UI 1,3
`;
  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;
}35:[]
30:{"id":"6fc31ad8015fcd48","slug":"portfolio-to-teams-flow-diagram","title":"Portfolio to Teams - Flow Diagram","thumbnail":"15f4c8eb49118063634292e14901fe32c2ead120ec6792a7a0550171c7314d2a","access_level":"public","create_time":"$D2019-08-22T21:06:42.222Z","update_time":"$D2019-08-28T20:48:49.427Z","view_time":null,"first_public_time":"$D2019-08-26T21:17:34.157Z","has_unpublished_edits":null,"fork":{"id":"71caab86fd0d386b","slug":"flow-o-matic","title":"Flow-o-Matic","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":9,"starred":false,"owner":{"type":"team","id":"5bfcd1f236454eeb","login":"troymagennis","name":"Troy Magennis","avatar_url":"https://avatars-next.observableusercontent.com/bd84c523cb40d1d089b9d8d0a4ac5e025e3593ce8554df5d578d6da6190496c5","tier":"starter_2024"},"version":388,"publish_version":388,"role":null,"authored":false,"authors":[{"type":"individual","id":"f950cac864488237","login":"troymagennis","name":"Troy Magennis","avatar_url":"https://avatars-next.observableusercontent.com/bd84c523cb40d1d089b9d8d0a4ac5e025e3593ce8554df5d578d6da6190496c5","tier":null}],"members":[{"type":"individual","id":"f950cac864488237","login":"troymagennis","name":"Troy Magennis","avatar_url":"https://avatars-next.observableusercontent.com/bd84c523cb40d1d089b9d8d0a4ac5e025e3593ce8554df5d578d6da6190496c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":{"id":"e353f61379db4140","slug":"agile-software-development","title":"Agile Software Development","owner":{"id":"5bfcd1f236454eeb","login":"troymagennis","name":"Troy Magennis"}},"type":"notebook","body":{"titling":"auto","title":"Portfolio to Teams - Flow Diagram","cells":[{"id":0,"value":"md`# Portfolio to Teams - Flow Diagram\n\nEdit the textarea below to update the diagram.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"viewof inputOrder = {\n  const form = html`<form><label><input name=i type=checkbox> Preserve input order</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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof align = Object.assign(html`<select>\n  <option value=left>Left-aligned\n  <option value=right>Right-aligned\n  <option value=center>Centered\n  <option value=justify selected>Justified\n</select>`, {\n  value: new URLSearchParams(html`<a href>`.search).get(\"align\") || \"justify\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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. You can also specify a fill color after the number.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = {\n  const links = d3.csvParseRows(source, ([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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"sankey = d3.sankey()\n    .nodeId(d => d.name)\n    .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])\n    .nodeSort(inputOrder ? null : undefined)\n    .nodeWidth(15)\n    .nodePadding(padding)\n    .extent([[0, 5], [width, height - 5]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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=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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof color = {\n  const form = html`<form class=\"observablehq--inspect\">color = <input name=i type=color value=\"#dddddd\" 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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}}
31:"$30:body"
</article></body></html>