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 - banen en werkglegenheid","cells":[{"id":0,"value":"md`# Boekman - banen en werkglegenheid\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\nTotaal zelfstandigen NL\tAantal zelfstandigen NL \t1244000\nAantal zelfstandigen Kunsten\tAantal zelfstandigen sbi 9003\t24720\nTotaal aantal banen NL\tAantal banen van werknemers NL \t8467000\nAantal banen van werknemers NL \tTotaal banen CCS\t152750\nTotaal banen CCS\tTotaal banen Kunsten\t49630\nTotaal banen CCS\tTotaal banen Media & Entertainment\t52390\nTotaal banen CCS\tTotaal banen Creatieve zakelijke dienstverlening\t50730\nAantal zelfstandigen NL \tAantal zelfstandigen CCS\t142260\nAantal zelfstandigen CCS\tAantal zelfstandigen Kunsten\t64660\nAantal zelfstandigen CCS\tAantal zelfstandigen Media & Entertainment\t30740\nAantal zelfstandigen CCS\tAantal zelfstandigen Creatieve zakelijke dienstverlening\t46860`)\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"}