31:T423,sankeyCreator( convertData( d3.tsvParse(`source target value Eigen inkomsten Budget musea beeldende kunst 102 Subsidies overheid (mln euro) Budget musea beeldende kunst 175 Rijkssubsidies (mln euro) Subsidies overheid musea BK (mln euro) 42 Provinciale subsidies (mln euro) Subsidies overheid musea BK (mln euro) 29 Gemeentelijke subsidies (mln euro) Subsidies overheid musea BK (mln euro) 103 Loonsubsidies/afdrachtskortingen (mln euro) Subsidies overheid musea BK (mln euro) 1 Eigen inkomsten Budget musea overig 317 Subsidies overheid (mln euro) Budget musea overig 337 Rijkssubsidies (mln euro) Subsidies overheid musea overig (mln euro) 217 Provinciale subsidies (mln euro) Subsidies overheid musea overig (mln euro) 35 Gemeentelijke subsidies (mln euro) Subsidies overheid musea overig (mln euro) 83 Loonsubsidies/afdrachtskortingen (mln euro) Subsidies overheid musea overig (mln euro) 2 Subsidies overheid musea BK (mln euro) Subsidies overheid (mln euro) 175 Subsidies overheid musea overig (mln euro) Subsidies overheid (mln euro) 337 `) ) )32: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(); }33:[] 2f:{"title":"Boekman - budget","cells":[{"id":0,"value":"md`# Boekman - budget\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":818,"value":"md`Alvast een voorbeeld van een stroomdiagram:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":805,"value":"$31","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":"$32","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":"$W33","stdlib":"1","titling":"auto"}