2f:Tbfe,chart = { // Specify the dimensions of the chart. const width = 928; const height = 800; const format = d3.format(",.0f"); // Create a SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Constructs and configures a Sankey generator. const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3[nodeAlign]) // d3.sankeyLeft, etc. .nodeWidth(15) .nodePadding(10) .extent([[1, 5], [width - 1, height - 5]]); // Applies it to the data. We make a copy of the nodes and links objects // so as to avoid mutating the original. const {nodes, links} = sankey({ nodes: data.nodes.map(d => Object.assign({}, d)), links: data.links.map(d => Object.assign({}, d)) }); // Defines a color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); // Creates the rects that represent the nodes. const rect = svg.append("g") .attr("stroke", "#000") .selectAll() .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.category)); // Adds a title on the nodes. rect.append("title") .text(d => `${d.name}\n${format(d.value)} TWh`); // Creates the paths that represent the links. const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply"); // Creates a gradient, if necessary, for the source-target color option. if (linkColor === "source-target") { 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.category)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.category)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", linkColor === "source-target" ? (d) => d.uid : linkColor === "source" ? (d) => color(d.source.category) : linkColor === "target" ? (d) => color(d.target.category) : linkColor) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)} TWh`); // Adds labels on the nodes. svg.append("g") .selectAll() .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(); }30:[{"id":"92ffe133bcd5451006a864fc27f0257dc261de7591d5c51eda6245dfd8a0fe8962e194daea902bfe8a2ae18d7109af75379b3f669fd76b3d4cb6ba5047781ea9","href":"https://static.observableusercontent.com/files/92ffe133bcd5451006a864fc27f0257dc261de7591d5c51eda6245dfd8a0fe8962e194daea902bfe8a2ae18d7109af75379b3f669fd76b3d4cb6ba5047781ea9","name":"manufacturing.csv","type":"text/csv","lastModified":1697915601437.086,"size":3650},{"id":"d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","href":"https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","name":"energy.csv","type":"text/csv","lastModified":1696970732997.682,"size":2267},{"id":"b635eee651f975732ac6c878a1d17a9714c7ae62612934f46850501de69638c99d1a7d240aeb68b58a83ba0e1e2099d2e64a207f968e9cb64842c23f3805e44a","href":"https://static.observableusercontent.com/files/b635eee651f975732ac6c878a1d17a9714c7ae62612934f46850501de69638c99d1a7d240aeb68b58a83ba0e1e2099d2e64a207f968e9cb64842c23f3805e44a","name":"energy@1.csv","type":"text/csv","lastModified":1696971420501.487,"size":1538}] 2d:{"title":"Starfield Resources Sankey diagram","cells":[{"id":0,"value":"

Starfield Resources Sankey diagram

D3 › Gallery

\n\n# Starfield Resources Sankey Diagram\n\nThis [Sankey diagram](https://github.com/d3/d3-sankey) visualizes the flow of resources necessary to craft AID items in Bethesda's Starfield video game. Basic resources are combined into progressively more advanced (and valuable) resources that can be used to achieve game effects (such as healing) or sold to vendors. The links indicate both requirement and amount. Two great resources to get the data necessary for this visualization were the [INARA Starfield Database](https://inara.cz/starfield/resources/) and [this amazing google doc](https://docs.google.com/spreadsheets/d/14rDZ6TMNe_PBGy3aRcWHKCB679QJd4EsOAgB1QWbPnE/edit?usp=sharing) that an amazing person posted on Reddit.","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"viewof linkColor = Inputs.select(new Map([\n [\"static\", \"#aaa\"],\n [\"source-target\", \"source-target\"],\n [\"source\", \"source\"],\n [\"target\", \"target\"],\n]), {\n value: new URLSearchParams(html``.search).get(\"color\") || \"source-target\",\n label: \"Link color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof nodeAlign = Inputs.select(new Map([[\"left\", \"sankeyLeft\"], [\"right\", \"sankeyRight\"], [\"center\", \"sankeyCenter\"], [\"justify\", \"sankeyJustify\"]]), {\n value: \"sankeyJustify\",\n label: \"Node alignment\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"data = {\n const links = await FileAttachment(\"energy@1.csv\").csv({typed: true});\n const nodes = Array.from(new Set(links.flatMap(l => [l.source, l.target])), name => ({name, category: name.replace(/ .*/, \"\")}));\n return {nodes, links};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":351,"value":"energy1 = await FileAttachment(\"energy@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}