30: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(); }31:[] 2e:{"title":"Flow-o-Matic","cells":[{"id":0,"value":"md`# Flow-o-Matic\n\nEdit the textarea below to update the [Sankey diagram](/@d3/sankey-diagram)!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"viewof inputOrder = {\n const form = html`

Preserve input order`;\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"},{"id":299,"value":"viewof align = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"align\") || \"justify\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":9,"value":"viewof source = {\n const textarea = html`

${csv}`;\n  textarea.style.display = \"block\";\n  textarea.style.boxSizing = \"border-box\";\n  textarea.style.width = \"calc(100% + 28px)\";\n  textarea.style.font = \"var(--mono_fonts)\";\n  textarea.style.minHeight = \"60px\";\n  textarea.style.border = \"none\";\n  textarea.style.padding = \"4px 10px\";\n  textarea.style.margin = \"0 -14px\";\n  textarea.style.background = \"rgb(247,247,249)\";\n  textarea.style.tabSize = 2;\n  textarea.oninput = () => {\n    textarea.style.height = \"initial\";\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  };\n  yield textarea;\n  textarea.oninput();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"csv = `Facturé,Frais,3000\nFacturé,Réserve,3000\nFacturé,Dédié Salaire,66000\nDédié Salaire,Super Brut,57000\nDédié Salaire,Abondement,9000\nAbondement,CSG/CRDS,1000\nAbondement,Épargne,8000\nSuper Brut,Cotisations Patronales,15000\nSuper Brut,Salaire Brut,42000\nSalaire Brut,Cotisations Salariale,9000\nCotisations Salariale,Retraite,5000\nCotisations Salariale,CSG/CRDS,4000\nCotisations Patronales,Retraite,7000\nCotisations Patronales,Accident du travail,1000\nCotisations Patronales,Assurance santé,3000\nCotisations Patronales,Famille,1500\nCotisations Patronales,Assurance chomage,1500\nSalaire Brut,Net avant impôts,33000\nNet avant impôts,État,3000\nNet avant impôts,Sur le compte en banque,30000\nSur le compte en banque,Loyer,12000\nSur le compte en banque,Épargne,3000\nSur le compte en banque,Dons et cotisations,1000\nSur le compte en banque,Dépenses courantes,9000\nSur le compte en banque,Vacances,2000\nSur le compte en banque,Équipements,1000\nSur le compte en banque,Factures,2000`","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}
</article></body></html>