Sankey Diagram for air pollution data in Geneva

100%

Sankey Diagram for air pollution data in Geneva

✓ Published4🌍 Public

Last edited Jan 9, 2021

Created on Jan 9, 2021

This Sankey diagram visualizes air pollution data from Geneva, showing the flow of pollutants between different categories and locations. The code loads CSV data from a GitHub gist and transforms it into a node-link structure using custom logic in `transformData`. It renders the diagram as an SVG using the D3.js v5 library, specifically leveraging the `d3.sankey()` layout to position nodes and links. Each link’s stroke opacity increases on hover, and nodes are colored using `d3.scaleOrdinal(d3.schemeCategory10)`.

AI-generated description

Sankey Diagram for air pollution data in Geneva.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ecosystem Structure

This example visualizes the flow of air pollution data in Geneva using a Sankey diagram. The diagram shows nodes and links representing relationships between different categories or pollutants, with link thickness conveying relative values. Interactive checkboxes allow users to filter the displayed data, triggering a re-render of the diagram. The visualization is built with D3 v5, using the custom `d3.sankey` layout from the included `sankey.js` file, and renders to SVG. Data is loaded from a remote CSV file, with nodes and links dynamically transformed from the raw rows.

GGiosec

89% match

Loading thumbnail…

Fork of Fork of Fork of Causes of Air pollution in Geneva-1

This interactive Sankey diagram visualizes the causal chains behind air pollution in Geneva, tracing connections from broad factors like climate change and local traffic down to specific contributors such as housing costs and lack of investment. The diagram uses d3.v5 and the custom `d3.sankey` layout to arrange nodes and links, with draggable node rectangles and hoverable link paths rendered as SVG. Node colors apply a categorical scale, and link thickness encodes the relative value assigned in the underlying JSON data.

DDr. Hiren Ghosh

85% match

Loading thumbnail…

Causes of Air pollution in Geneva

This visualization uses a Sankey diagram to trace the causes of air pollution in Geneva, linking broad categories like air and local traffic to specific contributing factors such as commuter traffic and polluting vehicles. The diagram emphasizes the flow of influence between nodes, with thicker links representing stronger connections. Built with D3.js v5, the code loads data from a JSON file and implements a custom sankey layout to position nodes and calculate link widths. The SVG rendering supports interactive dragging of nodes to explore the network dynamically.

NNita

84% match

Loading thumbnail…

Fork of Fork of Causes of Air pollution in Geneva-1

This visualization shows a cause-and-effect network of air pollution in Geneva, mapping root factors like climate change, air traffic, and commuter traffic through a directed graph of linked nodes. Each node represents a contributing cause, with links illustrating causal relationships. The code uses the D3.js v5 library with the `d3.sankey` layout, a custom module that positions nodes and draws curved paths between them via SVG. Node rectangles and link strokes are color-coded using `d3.scaleOrdinal` and `d3.schemeCategory10`. Data is loaded from a local `data.json` file containing node names and link pairs, with drag interactions enabled through `d3.drag` to reposition nodes and recompute link paths.

NNita

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

76% match

Loading thumbnail…

SANKEY Experiment

This is a Sankey diagram that visualizes the flow of values between named nodes, with the source and target data loaded from an external CSV file. The diagram uses the `d3-sankey` extension library on top of d3.v6, with nodes rendered as colored rectangles and links as semi-transparent black paths with widths proportional to their values. The code explicitly formats numbers and applies a categorical color scheme using `d3.scaleOrdinal`, while interactive hover states on links increase their opacity. Rendered as SVG, the visualization includes node labels and tooltips via `title` elements.

Dd3noob

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

76% match