31: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(); }32:[] 2f:{"title":"Boekman - musea werkgelegenheid 2015","cells":[{"id":0,"value":"md`# Boekman - musea werkgelegenheid 2015\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":805,"value":"sankeyCreator(\n convertData(\n d3.tsvParse(`source\ttarget\tvalue\nAantal musea\tAantal musea beeldende kunst (77)\t77\nAantal musea\tAantal musea overig (524)\t524\nAantal musea beeldende kunst (77)\tFTE werkzame personen in loondienst\t1721\nAantal musea beeldende kunst (77)\tFTE werkzame personen overige\t502\nAantal musea beeldende kunst (77)\tFTE vrijwilligers\t432\nAantal musea overig (524)\tFTE werkzame personen in loondienst\t4613\nAantal musea overig (524)\tFTE werkzame personen overige\t851\nAantal musea overig (524)\tFTE vrijwilligers\t4253`)\n )\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":"$31","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":"$W32","stdlib":"1","titling":"auto"}