2a:T7ec,sankeyCreator = data => { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const {nodes, links} = sankey(data); svg.append("g") .attr("stroke", "#000") .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("fill", d => color(d.name)) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); 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 => 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 => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source.name) : color(d.target.name)) .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", "12px 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} - ${format(d.value)}`); return svg.node(); }2b:[] 29:{"title":"geldstromen musea","cells":[{"id":0,"value":"md`# geldstromen musea\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof edgeColor = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"color\") || \"path\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof align = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"align\") || \"justify\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"sankeyCreator(\n convertData(\n d3.tsvParse(`source\ttarget\tvalue\nEigen inkomsten\tBudget musea beeldende kunst\t91\nEigen inkomsten\tBudget musea overig\t292\nRijkssubsidies (mln euro)\tSubsidies overheid musea BK (mln euro)\t34\nProvinciale subsidies (mln euro)\tSubsidies overheid musea BK (mln euro)\t22\nGemeentelijke subsidies (mln euro)\tSubsidies overheid musea BK (mln euro)\t106\nLoonsubsidies/afdrachtskortingen (mln euro)\tSubsidies overheid musea BK (mln euro)\t1\nSubsidies overheid musea BK (mln euro)\tBudget musea beeldende kunst\t163\nSubsidies overheid musea overig (mln euro)\tBudget musea overig\t358\nRijkssubsidies (mln euro)\tSubsidies overheid musea overig (mln euro)\t214\nProvinciale subsidies (mln euro)\tSubsidies overheid musea overig (mln euro)\t20\nGemeentelijke subsidies (mln euro)\tSubsidies overheid musea overig (mln euro)\t121\nLoonsubsidies/afdrachtskortingen (mln euro)\tSubsidies overheid musea overig (mln euro)\t2`)\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"convertData(\n d3.tsvParse(`source\ttarget\tvalue\nEigen inkomsten\tBudget musea beeldende kunst\t91\nRijkssubsidies (mln euro)\tSubsidies overheid musea BK (mln euro)\t34\nRijkssubsidies (mln euro)\tSubsidies overheid musea overig (mln euro)\t214\nProvinciale subsidies (mln euro)\tSubsidies overheid musea BK (mln euro)\t22\nGemeentelijke subsidies (mln euro)\tSubsidies overheid musea BK (mln euro)\t106\nLoonsubsidies/afdrachtskortingen (mln euro)\tSubsidies overheid musea BK (mln euro)\t1\nEigen inkomsten\tBudget musea overig\t292\nSubsidies overheid musea BK (mln euro)\tSubsidies overheid (mln euro)\t163\nSubsidies overheid musea overig (mln euro)\tBudget musea beeldende kunst\t358\nProvinciale subsidies (mln euro)\tSubsidies overheid musea overig (mln euro)\t20\nGemeentelijke subsidies (mln euro)\tSubsidies overheid musea overig (mln euro)\t121\nLoonsubsidies/afdrachtskortingen (mln euro)\tSubsidies overheid musea overig (mln euro)\t2`)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":802,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`\n## Example chart\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"chart = sankeyCreator(convertData(exampleData))","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"md`## Data\n\nThe \\`convertData\\` function uses [Ramda](https://ramdajs.com/) to convert an array of source/target/value objects to an object that the \\`sankeyCreator\\` function understands.\n\nThe chart above uses the \\`exampleData\\` object as input for the \\`convertData\\` function, and passes the resulting object to the chart. \n\nYou can upload a csv with source/target/value columns below, and replace the example data with the \\`csvData\\` object created below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"exampleData = [{source: \"Barry\", target: \"Elvis\", value: \"2\"},\n{source: \"Frodo\", target: \"Elvis\", value: \"2\"},\n{source: \"Frodo\", target: \"Sarah\", value: \"2\"},\n{source: \"Barry\", target: \"Alice\", value: \"2\"},\n{source: \"Elvis\", target: \"Sarah\", value: \"2\"},\n{source: \"Elvis\", target: \"Alice\", value: \"2\"},\n{source: \"Sarah\", target: \"Alice\", value: \"4\"}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"JSON.stringify(convertData(exampleData))","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"convertData = data => {\n const sources = R.pluck('source')(data)\n const targets = R.pluck('target')(data)\n const uniqs = R.uniq(R.concat(sources, targets))\n const nodes = R.map(R.objOf('name'), uniqs)\n const nameToIndexEvolver = el => \n ({ \n source: R.indexOf(el.source, uniqs),\n target: R.indexOf(el.target, uniqs),\n value: el.value\n }) \n const links = R.map(el => nameToIndexEvolver(el), data)\n const graph = { nodes: nodes, links: links }\n return graph\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"convertData(exampleData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`### Option to change data with source/target/value formatted csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"viewof f = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"csvData = d3.csvParse(await Files.text(f))","pinned":true,"hidden":false,"mode":"ojs"},{"id":777,"value":"md`### Same but with copy-pasted tab seperated data from Google Sheets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"pastedData = `source\ttarget\tvalue\nBarry\tElvis\t2\nFrodo\tElvis\t2\nFrodo\tSarah\t2\nBarry\tAlice\t2\nElvis\tSarah\t2\nElvis\tAlice\t2\nSarah\tAlice\t4`","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"dataPastedParsed = d3.tsvParse(pastedData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"md`## Sankey functions\nThe \\`sankeyCreator\\` takes a data object and draws the Sankey chart with that data. Change the \\`format\\`, \\`color\\`, \\`width\\` and \\`height\\` cells to fit your needs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 5], [width - 1, height - 5]])\n // .layout(0)\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"format = {\n const f = d3.format(\",.0f\");\n return d => `${f(d)}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemePastel2);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"width = 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"md` ## Library imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"// Import Ramda\nR = require('//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}