44:["$","title",null,{"children":"Sankey diagram | Nand's Workspace | Observable"}] 4c:T7a1,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); 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", color) .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)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source) : color(d.target)) .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") .attr("font-family", "sans-serif") .attr("font-size", 10) .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); return svg.node(); }4d:[{"id":"d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","href":"https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","name":"energy.csv","type":"text/csv","lastModified":1721182677096.382,"size":2267}] 48:{"id":"f34e2e31ffd8f913","slug":"itm-sankey-diagram","title":"Sankey diagram","thumbnail":"01c9929078226148fb46abe79701e4bc8dcd0c93ff068fa4f3655939eddd4836","access_level":"public","create_time":"$D2024-07-17T02:17:57.096Z","update_time":"$D2024-08-31T18:43:46.338Z","view_time":null,"first_public_time":"$D2024-07-17T02:17:57.096Z","has_unpublished_edits":null,"fork":{"id":"3ecaa4aaa61dc833","slug":"sankey/2","title":"Sankey diagram","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5be4004fad4bc9d5","login":"nandnattha","name":"Nand's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7d0603b6f0f41ecba2c37ecfcaeda26b217ab3166eef623fe1f402c4889940c6","tier":"starter_2024","bio":"","following":false},"version":470,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"050e8f571b8a66be","login":"nand2","name":"Nand","avatar_url":"https://avatars-next.observableusercontent.com/5c0b641c7741c717963eb0c772868842690d67b3904c01437fba0c7c3d189405","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"050e8f571b8a66be","login":"nand2","name":"Nand","avatar_url":"https://avatars-next.observableusercontent.com/5c0b641c7741c717963eb0c772868842690d67b3904c01437fba0c7c3d189405","tier":null,"role":"editor"},{"type":"team","id":"5be4004fad4bc9d5","login":"nandnattha","name":"Nand's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7d0603b6f0f41ecba2c37ecfcaeda26b217ab3166eef623fe1f402c4889940c6","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sankey diagram","cells":[{"id":0,"value":"

Sankey diagram

D3 › Gallery

\n\n# ITM data\n## Sankey diagram\n\nThis Sankey diagram visualizes studio data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"data = {\n var nodes = [{name: \"Race\", value: 77}, {name: \"Disease\", value: 3}, {name: \"PI Level\", value: 7}, {name: \"Funding Level\", value: 70}, {name: \"Session Type\", value: 1}],\n links = [\n {source: \"Race\", target: \"Have Follow-up Report\", value: 7},\n {source: \"Wednesday Studio\", target: \"No Follow-up Report\", value: 70},\n {source: \"Community Studio\", target: \"Have Follow-up Report\", value: 0},\n {source: \"Community Studio\", target: \"No Follow-up Report\", value: 3}\n ];\n return {\n nodes: nodes,\n links: links\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"nodes=[{name:\"\",category:0},{name:\"\",category:0},{name:\"\",category:0}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"links2 = [{source:\"\", sourceCategory:\"\", target:\"\", targetCategory: \"\", value:0},{source:\"\",target:\"\",value:0}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"data2 = ({nodes,links2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"-----\n### Visualization Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"viewof height = Inputs.range([500, 750], {\n step: 10,\n label: \"Chart Height\",\n value: 720\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"viewof margin = Inputs.range([0, 100], { step: 1, label: \"Margin\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"viewof nodeWidth = Inputs.range([0, 50], { step: 1, label: \"Node Width\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"viewof nodePadding = Inputs.range([0, 20], { step: 1, label: \"Node Padding\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"viewof fontSize = Inputs.range([5, 20], {\n step: 1,\n label: \"Font Size\",\n value: 12\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"viewof titleSize = Inputs.range([5, 20], {\n step: 1,\n label: \"Title Size\",\n value: 14\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"viewof linkOpacity = Inputs.range([0, 1], { step: 0.01, label: \"Link Opacity\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"viewof linkColor = Inputs.select(\n new Map([\n [\"static\", \"#aaa\"],\n [\"source-target\", \"source-target\"],\n [\"source\", \"source\"],\n [\"target\", \"target\"]\n ]),\n {\n value:\n new URLSearchParams(html``.search).get(\"color\") ||\n \"source-target\",\n label: \"Link color\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"viewof nodeAlign = Inputs.select(\n new Map([\n [\"left\", \"sankeyLeft\"],\n [\"right\", \"sankeyRight\"],\n [\"center\", \"sankeyCenter\"],\n [\"justify\", \"sankeyJustify\"]\n ]),\n {\n value: \"sankeyCenter\",\n label: \"Node alignment\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"viewof backgroundColor = Inputs.color({\n label: \"Background Color\",\n value: \"#F4F4F4\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"viewof font = Inputs.text({ label: \"Font Family\", value: \"Courier\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"color = d3.scaleOrdinal(d3.schemeSet2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"platformColor = d3.scaleOrdinal(d3.schemeSpectral[4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"---\n### Color Schemes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"*Color schemes and maps can be browsed [here](https://observablehq.com/@d3/color-schemes)*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"colorPalettes = ({\n experiences: d3.scaleOrdinal(d3.schemePastel1),\n levels: d3.scaleOrdinal(d3.schemeAccent),\n platforms: d3.scaleOrdinal(d3.schemeSet3),\n roles: d3.scaleOrdinal(d3.schemeDark2),\n subjects: d3.scaleOrdinal(d3.schemeTableau10)\n})\n\n//you can do stuff like...\n\n//hue-based schemes\n//levels: d3.scaleOrdinal(d3.schemeBlues[levels.length]),\n\n//custom palette\n//levels: d3.scaleOrdinal([\"#ffff00\", \"#00ffff\", \"#ff00ff\"]),\n\n//built-in color gradient\n// levels: d3.scaleOrdinal(\n// d3\n// .range(levels.length)\n// .map((d) => d3.interpolateViridis(d / (levels.length - 1)))\n// )\n\n//custom gradient\n//levels: d3.scaleOrdinal(\n// d3\n// .range(levels.length)\n// .map((d) => d3.interpolate(\"#ff0000\", \"#00ff00\")(d / (levels.length - 1)))\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// [d3-sankey](https://github.com/d3/d3-sankey) is not part of the D3 bundle\nd3 = require(\"d3@7\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"d3Sankey = require.alias({\"d3-array\": d3, \"d3-shape\": d3, \"d3-sankey\": \"d3-sankey@0.12.3/dist/d3-sankey.min.js\"})(\"d3-sankey\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null