3e:null 3f:["$","title",null,{"children":"Sankey diagram | rolyhudson | Observable"}] 45:Tbfa,chart = { // Specify the dimensions of the chart. const width = 600; 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(20) .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.schemePaired); // 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(); }46:[{"id":"d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","href":"https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","name":"energy.csv","type":"text/csv","lastModified":1692716830069.944,"size":2267},{"id":"58cb216915f371886137adae3d408d1b74cc747d26e48a815d9d658dd9432f40546609a98d0e0f89b87e94548fbdec31e5eb4d7eb2bc5f52c30b5eef865edebf","href":"https://static.observableusercontent.com/files/58cb216915f371886137adae3d408d1b74cc747d26e48a815d9d658dd9432f40546609a98d0e0f89b87e94548fbdec31e5eb4d7eb2bc5f52c30b5eef865edebf","name":"graph@6.json","type":"application/json","lastModified":1705919041777.603,"size":180133},{"id":"51d933fbe72b63592631b88af8d8219c42a023508365c2a80d988d82691d109e2ebfecbea9b771cb7952b0c90ac457f0bc072b537ada63df49c9c47db1e46e8f","href":"https://static.observableusercontent.com/files/51d933fbe72b63592631b88af8d8219c42a023508365c2a80d988d82691d109e2ebfecbea9b771cb7952b0c90ac457f0bc072b537ada63df49c9c47db1e46e8f","name":"graph@7.json","type":"application/json","lastModified":1705919180932.649,"size":178591},{"id":"4c2181280a57d33fca7f8514b0bb12f1bc3a8c8790455ffd52534f2a9371c76926a99781012c9e9e9bdcdebcd179eafa6a113c82960404e5934b6639c4637dab","href":"https://static.observableusercontent.com/files/4c2181280a57d33fca7f8514b0bb12f1bc3a8c8790455ffd52534f2a9371c76926a99781012c9e9e9bdcdebcd179eafa6a113c82960404e5934b6639c4637dab","name":"graph@8.json","type":"application/json","lastModified":1705919298656.665,"size":178619},{"id":"1f0fef293e589d534dfb4611ac3a43fa8f4d8576eeb90f775ef5742ad0639319f7d5c2e3e2977d2f7df08e59341e4ac73ceccdc90d72871997e3bc827b2d5f57","href":"https://static.observableusercontent.com/files/1f0fef293e589d534dfb4611ac3a43fa8f4d8576eeb90f775ef5742ad0639319f7d5c2e3e2977d2f7df08e59341e4ac73ceccdc90d72871997e3bc827b2d5f57","name":"cvspeople@8.json","type":"application/json","lastModified":1692718269543.575,"size":5178},{"id":"e63d06d1eea1c4966663fc1eefab39a4083722100cb9400fb681589b4f5eb57564063a1dcec28719e4a462a2b9a046c7d183919c7f2cc073a3d9a28ed3922cfc","href":"https://static.observableusercontent.com/files/e63d06d1eea1c4966663fc1eefab39a4083722100cb9400fb681589b4f5eb57564063a1dcec28719e4a462a2b9a046c7d183919c7f2cc073a3d9a28ed3922cfc","name":"cvspeople@6.json","type":"application/json","lastModified":1692718158278.262,"size":5178},{"id":"12aa7436c36a1b4c1a52ae45816299def24e1d96ea6a78e55ce84d2587dcdd8360510502559fc1de36ceef2ab17b6ca664fefb20a4424cdd0d2c94bc405e4947","href":"https://static.observableusercontent.com/files/12aa7436c36a1b4c1a52ae45816299def24e1d96ea6a78e55ce84d2587dcdd8360510502559fc1de36ceef2ab17b6ca664fefb20a4424cdd0d2c94bc405e4947","name":"cvspeople@7.json","type":"application/json","lastModified":1692718205720.879,"size":5178},{"id":"b6f257ec3722f261ea5d0cd22809f5c143b5a721468cf9cc59be67c13b120286e48c4afe70ccf39163d1af13e8b92b40c11f4b6b175aabfd2d0b3af9993f46dd","href":"https://static.observableusercontent.com/files/b6f257ec3722f261ea5d0cd22809f5c143b5a721468cf9cc59be67c13b120286e48c4afe70ccf39163d1af13e8b92b40c11f4b6b175aabfd2d0b3af9993f46dd","name":"cvspeople.json","type":"application/json","lastModified":1692716840604.35,"size":2736},{"id":"7bc486c8068542d2c0c6e1a91949ef4e8d4f1c25df3189d417a429c1ff19ce5231a7f0b569880756f28033f6e0e5d77df5edcf184a29d0aeea99ad4d9123ba3e","href":"https://static.observableusercontent.com/files/7bc486c8068542d2c0c6e1a91949ef4e8d4f1c25df3189d417a429c1ff19ce5231a7f0b569880756f28033f6e0e5d77df5edcf184a29d0aeea99ad4d9123ba3e","name":"cvspeople@1.json","type":"application/json","lastModified":1692716948295.722,"size":3537},{"id":"5fa117fb7bb41b35cfe781dfc93ce362a3d2ad6526cd07f08868e5307c0d5e9820b3b76b2a8f30c9bc1f139f318dae337a26266f266e3f33efdb61d79b15723f","href":"https://static.observableusercontent.com/files/5fa117fb7bb41b35cfe781dfc93ce362a3d2ad6526cd07f08868e5307c0d5e9820b3b76b2a8f30c9bc1f139f318dae337a26266f266e3f33efdb61d79b15723f","name":"cvspeople@2.json","type":"application/json","lastModified":1692717016444.69,"size":3317},{"id":"a351be0b96714e3cfa084a1acfb1c11bad62a36de6d525814382f61cfd92f49a8d7f8e423b2153f5a5cdac380eb4be3360515f0270c8cdbb7935d0dfcace6342","href":"https://static.observableusercontent.com/files/a351be0b96714e3cfa084a1acfb1c11bad62a36de6d525814382f61cfd92f49a8d7f8e423b2153f5a5cdac380eb4be3360515f0270c8cdbb7935d0dfcace6342","name":"cvspeople@3.json","type":"application/json","lastModified":1692717374802.294,"size":5164},{"id":"ff70a74367461b4a730e2a37807ab4930a6c72395e097a8a7ad9fb093b9800fb7d717ff4f89f690980dc44ae05b5ce9cdb55f223e5f753e7af9abfcb89c68251","href":"https://static.observableusercontent.com/files/ff70a74367461b4a730e2a37807ab4930a6c72395e097a8a7ad9fb093b9800fb7d717ff4f89f690980dc44ae05b5ce9cdb55f223e5f753e7af9abfcb89c68251","name":"cvspeople@4.json","type":"application/json","lastModified":1692717424584.043,"size":3948},{"id":"888489c22962d9da4adc973fd773047a53d13bd8388a6f221ed51691850b318b10643e92fff48178608435611904dde92a564c0e8169fe965dd14e99050e1c9d","href":"https://static.observableusercontent.com/files/888489c22962d9da4adc973fd773047a53d13bd8388a6f221ed51691850b318b10643e92fff48178608435611904dde92a564c0e8169fe965dd14e99050e1c9d","name":"cvspeople@5.json","type":"application/json","lastModified":1692717536490.315,"size":3767},{"id":"f00c745df184edf3d537be6ee8114ebda175b41698bf12c9b585e1155aee5e291ca982384080c9eca6b9c83ea5ac4384eba57535aca71ceebe2e4986511243dd","href":"https://static.observableusercontent.com/files/f00c745df184edf3d537be6ee8114ebda175b41698bf12c9b585e1155aee5e291ca982384080c9eca6b9c83ea5ac4384eba57535aca71ceebe2e4986511243dd","name":"graph.json","type":"application/json","lastModified":1705680023222.918,"size":179454},{"id":"26e83155d52b8c00f0b703a9a4f913963645e87a8fcec4905ce662cc5a71edd875c81d9e19c0ce0206e3d8caf3950741e0fdad951e3ab73826ed83e3565d83d7","href":"https://static.observableusercontent.com/files/26e83155d52b8c00f0b703a9a4f913963645e87a8fcec4905ce662cc5a71edd875c81d9e19c0ce0206e3d8caf3950741e0fdad951e3ab73826ed83e3565d83d7","name":"graph@1.json","type":"application/json","lastModified":1705680206144.241,"size":260272},{"id":"8bf3061386dac35f44f106337d1f5f063f251d909c9db1f067f17a4bcd0fead6cc32ce0c467532d09993ac4d39ff5f72bcaeebbdccf95b4d9549b389bfa874a1","href":"https://static.observableusercontent.com/files/8bf3061386dac35f44f106337d1f5f063f251d909c9db1f067f17a4bcd0fead6cc32ce0c467532d09993ac4d39ff5f72bcaeebbdccf95b4d9549b389bfa874a1","name":"graph@2.json","type":"application/json","lastModified":1705680331313.282,"size":290792},{"id":"4e955ae2825562feb63fcfa444e3d7fc362aa03c4d8685d6fd069485328bac2503682f954973d75fba2e9e48f313c7c9230f6ecafc4c55a7a48596702ca71214","href":"https://static.observableusercontent.com/files/4e955ae2825562feb63fcfa444e3d7fc362aa03c4d8685d6fd069485328bac2503682f954973d75fba2e9e48f313c7c9230f6ecafc4c55a7a48596702ca71214","name":"graph@3.json","type":"application/json","lastModified":1705681652731.022,"size":200818},{"id":"27b9fd771e9eb3daa8e6fd668d7fd3cb78cf5705c70994b3aea2c901e5445bda21f4e84f9cd36a6640c470465cc64584f43a6f168e7014edfa817fe2b7668d70","href":"https://static.observableusercontent.com/files/27b9fd771e9eb3daa8e6fd668d7fd3cb78cf5705c70994b3aea2c901e5445bda21f4e84f9cd36a6640c470465cc64584f43a6f168e7014edfa817fe2b7668d70","name":"graph@4.json","type":"application/json","lastModified":1705681701285.612,"size":206632},{"id":"49c71cb426c4c04092ef264885e5b222aeadf6842c8567b067072bb815d2bde6a352b919793e1d4e560ad60804a17ec22653e96f5bee1eba4f943f5ca366f2d2","href":"https://static.observableusercontent.com/files/49c71cb426c4c04092ef264885e5b222aeadf6842c8567b067072bb815d2bde6a352b919793e1d4e560ad60804a17ec22653e96f5bee1eba4f943f5ca366f2d2","name":"graph@5.json","type":"application/json","lastModified":1705682247261.648,"size":177648}] 43:{"id":"cb0738681b8f70f2","slug":null,"title":"Sankey diagram","thumbnail":"fe88fd16c38266f8d398359bbcbf7c36caa42c715936a466f3cc4e26ad63ad0b","access_level":"public","create_time":"$D2023-08-22T15:07:10.069Z","update_time":"$D2024-01-22T10:28:17.141Z","view_time":null,"first_public_time":"$D2023-08-22T15:07:10.069Z","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":"39eb8dd4c906cd6c","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":"starter_2024","bio":"","following":false},"version":374,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd83edde98ad3724","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cd83edde98ad3724","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"67fe270ee46fa116","slug":"cvs","title":"cvs","owner":{"id":"39eb8dd4c906cd6c","login":"rolyhudson","name":""}},"type":"notebook","body":{"titling":"auto","title":"Sankey diagram","cells":[{"id":0,"value":"

Sankey diagram

D3 › Gallery