SANKEY Experiment

100%

SANKEY Experiment

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Feb 25, 2013

This Sankey diagram visualizes world greenhouse gas emissions from 2005, using data from the World Resources Institute. It displays energy sources, end-use sectors, and resulting gases as nodes, with link widths representing emission quantities. Unlike typical Sankey diagrams, users can drag nodes both horizontally and vertically, with `d3.behavior.drag` triggering `sankey.relayout()` to recompute link paths in real time. The visualization is rendered as SVG using D3.js 3.5.17 and a custom `d3.sankey` plugin, with node colors assigned via `d3.scale.category20()`.

AI-generated description

This is an example of a Sankey diagram made using d3.js and the sankey plugin.

It has a point of differenc from other Sankey diagrams I have seen in that the nodes can be moved horizontally and vertically.

A description of how it was put together and techniques for implimenting Sankey diagrams in general with d3.js can be found at d3noob.org or you can download the full text in the D3 Tips and Tricks book (for free) from Leanpub.

The data is sourced from the World Resources Institute (http://www.wri.org/chart/world-greenhouse-gas-emissions-2005). Open in full window for full effect.

mit Licensed

Similar vizzes

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes global greenhouse gas emissions for 2005, sourced from the World Resources Institute, by showing the flow of emissions from energy, industrial processes, agriculture, and land-use change to specific gases like carbon dioxide, methane, and nitrous oxide. Built with the `d3.sankey()` plugin, it uses draggable, colored nodes and curved, semi-transparent links with hover titles to display quantities. The code customizes node width, padding, and layout iterations, and implements custom drag behavior via `d3.behavior.drag()` to reposition nodes and trigger `relayout()` for dynamic link updates.

Dd3noob

96% 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

96% match

Loading thumbnail…

SANKEY Experiment

This sankey diagram visualizes greenhouse gas emissions, showing flows from energy and industrial sources to various sectors and ultimately to specific gases like carbon dioxide and methane. The interactive visualization is built with D3.js v3, using the custom `d3.sankey` layout to position nodes and compute link paths. Users can drag nodes to rearrange the diagram, with the `sankey.relayout` method updating link curves in real time. The data comes from a JSON file describing emission sources, intermediate sectors, and final greenhouse gas outputs.

BBhavyatulasi

90% 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

90% 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

89% match

Loading thumbnail…

SANKEY Experiment

This example presents a Sankey diagram visualizing greenhouse gas flows, with nodes representing sectors like Energy and Agriculture, and links showing the distribution of gases such as Carbon Dioxide and Methane. Built with React and rendered as SVG, it uses the D3.js library’s custom `d3.sankey` module to handle layout and the `d3.behavior.drag` functionality for node interactivity. The chart’s unit is "Widgets," and the data is pulled from a JSON file.

Mmynameiskris

87% 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

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

82% match