3e:null 3f:["$","title",null,{"children":"Introducing Sankey Plus | Ruzgar Imski | Observable"}] 45:[] 43:{"id":"35f8f59415135caa","slug":null,"title":"Introducing Sankey Plus","thumbnail":"10002e6daead1803fa98869cff3c05c0b78f5fc96ae17210ffa809929d5fae98","access_level":"public","create_time":"$D2023-10-17T10:59:23.248Z","update_time":"$D2023-10-17T10:59:23.248Z","view_time":null,"first_public_time":"$D2023-10-17T10:59:23.248Z","has_unpublished_edits":null,"fork":{"id":"a195b3348cc21665","slug":"introducing-sankey-plus","title":"Introducing Sankey Plus","owner":{"id":"99730af1f05a2243","login":"tomshanley","name":"Tom Shanley"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","bio":"","following":false},"version":704,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introducing Sankey Plus","cells":[{"id":0,"value":"# Introducing Sankey Plus","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"Welcome to the new [Sankey-Plus](https://github.com/tomshanley/sankey-plus) module. \n\nThis library builds upon the [d3-sankey](https://github.com/d3/d3-sankey) and [d3-sankey-circular]( https://github.com/tomshanley/d3-sankey-circular) libraries, and my testing of new options in various Observable notebooks.\n\nSankey-Plus introduces the following new features:\n* the concept of virtual nodes and links, which allows for nice routing of links around other nodes\n* arrows on the links to show direction\n* a new API that allows for easy sankey generation and drawing within a specified DOM element.\n\nThank you to [Ralph Spandl](https://twitter.com/ralph_spandl) for the testing, suggesting improvements, providing updates to the code and helping set up the NPM module.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"toc(\"h2,h3,h4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"## Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"### 1. Import the sankey-plus module","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"sankeyPlus = import(\"https://cdn.skypack.dev/sankey-plus@0.6.0?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"### 2. Add some nodes and links data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"nodes = [\n { name: \"node1\" },\n { name: \"node2\" },\n { name: \"node3\" },\n { name: \"node4\" },\n { name: \"node5\" },\n { name: \"node6\" },\n { name: \"node7\" },\n { name: \"node8\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"links = [\n { source: \"node4\", target: \"node1\", value: 20 },\n { source: \"node1\", target: \"node8\", value: 20 },\n { source: \"node1\", target: \"node6\", value: 20 },\n { source: \"node2\", target: \"node7\", value: 20 },\n { source: \"node2\", target: \"node3\", value: 40 },\n { source: \"node3\", target: \"node8\", value: 40 },\n { source: \"node5\", target: \"node7\", value: 20 },\n { source: \"node4\", target: \"node6\", value: 20 },\n { source: \"node2\", target: \"node8\", value: 20 },\n { source: \"node6\", target: \"node1\", value: 20 },\n { source: \"node8\", target: \"node7\", value: 80 },\n { source: \"node4\", target: \"node3\", value: 80 },\n { source: \"node8\", target: \"node3\", value: 10 },\n { source: \"node8\", target: \"node2\", value: 10 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"### 3. Set the config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"The ```nodes.data``` and ```links.data``` are mandatory in the config object. The remaining config can be set or left to the defaults. \n\nI will set the width, so that it fits within the usual Observable cell ```width```.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"sankeyConfig = ({\n width: width,\n nodes: {\n data: clone(nodes)\n },\n links: {\n data: clone(links)\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"### 4. Create the sankey object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"Run the ```.process()``` method to calculate the node and link positions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"sankey = {\n let obj = new sankeyPlus.SankeyChart(sankeyConfig);\n obj.process();\n return obj;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"### 5. ... And draw","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"Call the ```.draw()``` method, which requires the ID of a DOM element (typcially a div container) in which to draw the SVG sankey chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"chart = {\n let containerId = \"chart-div\";\n let container = d3.create(\"div\").attr(\"id\", containerId);\n\n //div needs to be rendered for the .draw() method to work with Observable\n yield container.node();\n\n sankey.draw(containerId);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"I think this chart's layout could be improved, so below we can tinker with the options to improve the look and readability.\n\nPersonally, I would\n* set the ```virtualLinkType``` to just use 'virtual'\n* increase the padding between virtual links and nodes\n* set the links' opacity to 0.5 and enable the arrows, like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"exampleChart = draw(\n {\n width: width,\n height: 400,\n nodes: { data: clone(nodes), virtualNodePadding: 25 },\n links: { virtualLinkType: \"virtual\", opacity: 0.5, data: clone(links) },\n arrows: { enabled: true, color: \"grey\", length: 10, gap: 50 }\n },\n \"chart-exampleChart-div\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"## Options\n\nSome of the options will be familiar if you have used the [d3.sankey](https://github.com/d3/d3-sankey) library, and some are new for sankey-plus.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"### align","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"viewof align = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"alignChart = draw(\n {\n width: width,\n align: align,\n nodes: { data: clone(nodes) },\n links: { data: clone(links) }\n },\n \"chart-align-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"### id","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"### padding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"### width and height","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"viewof sankeyWidth = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"viewof sankeyHeight = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"whChart = draw(\n {\n width: sankeyWidth,\n height: sankeyHeight,\n nodes: { data: clone(nodes) },\n links: { data: clone(links) }\n },\n \"chart-wh-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"### nodes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"#### nodes.data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"#### nodes.padding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"#### nodes.minPadding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"#### nodes.virtualPadding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"#### nodes.fill","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":544,"value":"viewof nodeFill = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"fillChart = draw(\n {\n width: width,\n nodes: { fill: nodeFill, data: clone(nodes) },\n links: { data: clone(links) }\n },\n \"chart-fillnode-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"#### nodes.stroke","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"viewof nodeStroke = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"strokeChart = draw(\n {\n width: width,\n nodes: { stroke: nodeStroke, data: clone(nodes) },\n links: { data: clone(links) }\n },\n \"chart-nodestroke-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"#### nodes.opacity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"nodeOpacityChart = draw(\n {\n width: width,\n nodes: { opacity: 0.5, data: clone(nodes) },\n links: { data: clone(links) }\n },\n \"chart-nodeopacity-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"### links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"#### links.color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"viewof linkColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"linkStrokeChart = draw(\n {\n width: width,\n nodes: { data: clone(nodes) },\n links: { color: linkColor, data: clone(links) }\n },\n \"chart-linkstroke-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"#### links.circularGap\n\nThe distance in pixels between any circular links, which are drawn next to each other","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"circularGapChart = draw(\n {\n width: width,\n nodes: { data: clone(nodes) },\n links: {\n circularGap: 20,\n data: clone(links)\n }\n },\n \"chart-circulargap-div\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"#### links.circularLinkPortionTopBottom","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"#### links.circularLinkPortionLeftRight","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"#### links.opacity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":565,"value":"viewof linkOpacity = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"linkOpacity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"linkOpacityChart = draw(\n {\n width: width,\n nodes: { data: clone(nodes) },\n links: { opacity: linkOpacity, data: clone(links) }\n },\n \"chart-linkopacity-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"#### links.useVirtualRoutes\n\nThe sankey-plus process can render links that pass around other nodes by either drawing a bezier curve or using virtual nodes, which allow for intermediary points to be laid out so they do not overlap other nodes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":598,"value":"simpleNodes = [{ name: \"node1\" }, { name: \"node2\" }, { name: \"node3\" }]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"simpleLinks = [\n { source: \"node1\", target: \"node2\", value: 1 },\n { source: \"node2\", target: \"node3\", value: 1 },\n { source: \"node1\", target: \"node3\", value: 1 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"draw(\n {\n width: width,\n nodes: { data: clone(simpleNodes) },\n links: { data: clone(simpleLinks), useVirtualRoutes: true }\n },\n \"chart-virtualRoutes-div\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"#### links.virtualLinkType\n\nYou can force the chart to always use \"virtual\" links, or always use bezier curves, or allow the process to select the virtual links if it finds that the bezier curve may overlap another node. \n\nThe option to use bezier is not the same as disabling virtual links, as the process will still try to shift other nodes into better postions to avoid overlaps, which may allow for bezier curves to not overlap. But this can't be guaranteed :).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"viewof virtualRoutes = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"virtualLinkChart = draw(\n {\n width: width,\n nodes: { data: clone(nodes) },\n links: { virtualLinkType: virtualRoutes, data: clone(links) }\n },\n \"chart-linkvirtual-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"#### links.baseRadius","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"#### links.verticalMargin","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"#### links.virtualLinkType","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"### arrows\n\nI find arrows are useful for sankey charts where there are links going backwards, as sometimes its not obvious which direction the link is going.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":704,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"#### arrows.enabled\n\nBy default arrows are not enabled.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"arrowsEnabledChart = draw(\n {\n width: width,\n nodes: { data: clone(nodes) },\n links: { data: clone(links) },\n arrows: { enabled: true }\n },\n \"chart-arrowsenabled-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"#### arrows.color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"arrowsColorChart = draw(\n { \n width: width,\n nodes: { data: clone(nodes) },\n links: { data: clone(links) },\n arrows: { enabled: true, color: \"yellow\" }\n },\n \"chart-arrowscolor-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"#### arrows.length","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"viewof arrowLength = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"arrowLength","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"chartarrowslength = draw(\n {\n width: width,\n nodes: { data: clone(nodes) },\n links: { data: clone(links) },\n arrows: { enabled: true, length: arrowLength }\n },\n \"chart-arrowslength-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"#### arrows.gap","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":522,"value":"viewof arrowGap = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"arrowGap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"arrowsgapchart = draw(\n {\n width: width,\n nodes: { data: clone(nodes) },\n links: { data: clone(links) },\n arrows: { enabled: true, gap: arrowGap }\n },\n \"chart-arrowsgap-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"#### arrows.headSize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":511,"value":"headsize = draw(\n {\n width: width,\n nodes: { data: clone(nodes) },\n links: { data: clone(links) },\n arrows: { enabled: true, headSize: 7 }\n },\n \"chart-headsize-div\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":347,"value":"function* draw(config, divID) {\n let s = new sankeyPlus.SankeyChart(config);\n s.process();\n\n let divHeight = config.height ? config.height + \"px\" : \"500px\";\n\n let container = d3\n .create(\"div\")\n .attr(\"id\", divID)\n .style(\"height\", divHeight)\n .style(\"display\", \"block\");\n\n yield container.node();\n\n s.draw(divID);\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3v7_esm = import(\"https://cdn.skypack.dev/d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"clone = require(\"https://bundle.run/clone@2.1.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import { toc } from \"@tomshanley/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"