40:null 41:["$","title",null,{"children":"Sankey diagram | Shan Carter's Workspace | Observable"}] 47:T86a,chart = { // Specify the dimensions of the chart. const width = 928; const height = 600; 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)) }); // 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) // 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", "grey") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply"); link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .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(); }48:[{"id":"d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","href":"https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","name":"energy.csv","type":"text/csv","lastModified":1692824698568.606,"size":2267}] 45:{"id":"aa29ae28a34dcd06","slug":null,"title":"Sankey diagram","thumbnail":"292073707946196107388a7a76b4445e3314500a6e1cc0a281d95ea64228ec0b","access_level":"public","create_time":"$D2023-08-23T21:04:58.568Z","update_time":"$D2023-08-23T21:15:57.607Z","view_time":null,"first_public_time":"$D2023-08-23T21:04:58.568Z","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":"936ded6ad66d2150","login":"shan-carter-ws","name":"Shan Carter's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/65c8b34a60fc9f1e6c5ec8c4087ab46e558194726972fc94bd402fde2b3e8085","tier":"starter_2024","bio":"","following":false},"version":367,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"05acba130f7ce92f","login":"shan-carter","name":"Shan Carter","avatar_url":"https://avatars-next.observableusercontent.com/b4a794963020de1a44b7a536499573f474f6f6ac1e92c91e9f665f8eba0bc67a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"05acba130f7ce92f","login":"shan-carter","name":"Shan Carter","avatar_url":"https://avatars-next.observableusercontent.com/b4a794963020de1a44b7a536499573f474f6f6ac1e92c91e9f665f8eba0bc67a","tier":null,"role":"editor"},{"type":"team","id":"936ded6ad66d2150","login":"shan-carter-ws","name":"Shan Carter's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/65c8b34a60fc9f1e6c5ec8c4087ab46e558194726972fc94bd402fde2b3e8085","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