Sankey Diagram

100%

Sankey Diagram

✓ Published0🌍 Public

Last edited Feb 26, 2019

Created on May 25, 2017

This interactive Sankey diagram visualizes the flow of energy through the UK energy system. Nodes representing sources, conversion processes, and consumption sectors are connected by links whose thickness is proportional to energy value in terawatt-hours. Built with the d3-sankey-diagram library, the visualization uses a static layout and hover interactions to highlight paths. The underlying data, provided in a JSON file, defines the network structure, and the code relies on standard D3.js modules for rendering the diagram.

AI-generated description

Moved to https://observablehq.com/@d3/d3-sankey-diagram.

Similar vizzes

Loading thumbnail…

Sankey Particles

This example visualizes the UK energy system as an interactive Sankey diagram, where animated particles travel along the links to represent energy flow between sources and consumers. Nodes can be dragged to reposition, which updates the link paths and particle trajectories. The visualization combines D3.js for the SVG-based Sankey layout and drag behavior with a Canvas overlay for rendering the moving particles. Particle frequency scales with link value, and each particle’s color interpolates from the source node’s color to the target node’s color. The code uses the sankey.layout and sankey.relayout functions to compute node positions and a d3.timer to drive the animation.

BBBischof

84% match

Loading thumbnail…

Sankey Particles

Animated Sankey diagram that visualizes the UK's 2012 energy balance—energy production, conversion, and consumption—as a flow of moving particles along curved paths. The interactive visualization combines a D3.js SVG layout of rectangular nodes and cubic Bézier links with an HTML5 Canvas overlay, where the flowing particles are drawn using Canvas arc methods. Particle frequency and size scale with each link’s energy value, while their color interpolates between the source and target node colors.

WWeiyiDeng

84% match

Loading thumbnail…

SANKEY Experiment

A small Sankey diagram visualizes energy-style flows between five named people, with links and node values drawn as proportional colored bars and connecting paths. The example demonstrates loading graph data from a JSON file where node and link references use names instead of numeric indices, requiring a lookup map to connect sources and targets. Built with D3 v6 and the d3-sankey module, it renders to SVG using `d3.sankey`, `d3.sankeyLinkHorizontal`, and `d3.scaleOrdinal` for node coloring, with hover tooltips via `title` elements.

Dd3noob

79% match

Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of quantities between five nodes, with node colors distinguishing categories and link thickness representing value. The diagram supports interactive dragging of nodes in both axes, recalculating link paths during movement. Built with D3 v4, it uses the d3.sankey plugin for layout and d3.drag for interaction. Data comes from a static JSON file, and the SVG rendering includes hover tooltips showing source, target, and formatted values in "Widgets" units.

Dd3noob

78% match

Loading thumbnail…

US Energy Flow Data 2018

This example visualizes the flow of energy across the United States in 2018, tracing sources like petroleum, natural gas, and renewables through to end-use sectors such as residential, commercial, and transportation. It uses a Sankey diagram built with D3.js, where link widths represent energy quantities in quadrillion BTUs. The data comes from the Department of Energy, with nodes and links defined in CSV files and rendered using D3’s sankey plugin.

CCurran Kelleher

78% match

Loading thumbnail…

SANKEY Experiment

This example visualizes the flow of greenhouse gas emissions from sources like energy, industry, and land use to their final destinations, using a Sankey diagram. The data is loaded from a CSV file and processed to construct a graph of nodes and links, which is then rendered with D3 v3’s SVG. Node heights and link thicknesses encode the magnitude of emissions, and hover effects highlight the links. The chart is built with the reusable d3.sankey layout, with custom margins, colors, and formatting for the values.

BBenHeubl

78% match

Loading thumbnail…

SANKEY Experiment

This Sankey diagram visualizes global CO2 emissions flows from energy sources like coal, oil, and gas to continents and then to specific countries, with link widths proportional to emission values in Mt CO2. The colored nodes group geographic regions and highlight country-level detail. After d3.sankey computes the initial layout, a custom manualLayout function overrides the y-position of selected nodes using a predefined array. The visualization uses D3 v3 with SVG rendering, reading data from an external emissions.json file, and implements drag-and-drop node interaction.

KKatiRG

77% match

Loading thumbnail…

SANKEY Experiment

This Sankey diagram visualizes global greenhouse gas emissions from 2005 using data sourced from the World Resources Institute, showing the flow of emissions from energy, industrial processes, and land use change through intermediate sectors to specific gases. The diagram uses d3.v5 with a custom `d3.sankey` layout, rendering nodes as draggable SVG rectangles and links as curved paths with stroke widths proportional to flow values. Node positions update interactively through `d3.drag` and `sankey.relayout()`.

Dd3noob

77% match