31:T5c0,sankeyCreator( convertData( d3.tsvParse(`source target value Inkomsten popmuzikant Inkomsten popmuzikant uit optreden (euro) 8500 Inkomsten popmuzikant Inkomsten popmuzikant uit sessiewerk (euro) 500 Inkomsten popmuzikant Inkomsten popmuzikant uit compositie-opdrachten (euro) 500 Inkomsten popmuzikant Inkomsten popmuzikant uit muzieklessen/workshops (euro) 4000 Inkomsten popmuzikant Inkomsten popmuzikant uit auteursrecht (euro) 1000 Inkomsten popmuzikant Inkomsten popmuzikant uit naburig recht (euro) 500 Inkomsten popmuzikant Inkomsten popmuzikant uit overig (euro) 500 Inkomsten popmuzikant Inkomsten popmuzikant uit royalty's (euro) 1000 Omzet Inkomsten popmuzikant 16500 Omzet Omzet muziekindustrie (x10.000) 13680 Omzet muziekindustrie (x10.000) Omzet muziekindustrie uit streaming (x10.000) 6090 Omzet muziekindustrie (x10.000) Omzet muziekindustrie uit mobiel (x10.000) 20 Omzet muziekindustrie (x10.000) Omzet muziekindustrie uit fysiek (x10.000) 6470 Omzet muziekindustrie (x10.000) Omzet muziekindustrie uit downloads (x10.000) 1100 Betrokkenen optredens Aantal voorstellingen popmuziek 15737 Aantal voorstellingen popmuziek Aantal bezoeken professionale podia popmuziek (x1000) 6971 Betrokkenen optredens Aantal musici, zangers en componisten 17000 Betrokkenen optredens Instellingen 255 Instellingen Aantal kleine concert/popzalen 172 Instellingen Aantal middelgrote concert/popzalen 70 Instellingen Aantal grote concert/popzalen 13`) ) )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 - organiserend vermogen pop","cells":[{"id":0,"value":"md`# Boekman - organiserend vermogen pop\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":"$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"}