Skip to main content
SimilarExport ZIP
100%

Sankey Particles

✓ Published4🌍 Public
WWeiyiDeng
Last edited Feb 23, 2022
Created on Feb 23, 2022

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

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
92% match
Loading thumbnail…

Fork of Sankey Particles_2

This visualization shows the UK energy flow Sankey diagram with animated particles traveling along each link to illustrate transfer dynamics. The code uses D3.js v3 with the custom `d3.sankey.js` layout, combining SVG for nodes and links with a Canvas overlay for particle rendering. Particles are generated based on link frequency, move along the SVG path geometry using `getPointAtLength`, and are drawn with the Canvas 2D API. The example demonstrates DOM manipulation through D3 drag behavior for interactive node repositioning.

Ggongxinya
86% match
Loading thumbnail…

Sankey Diagram

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.

Mmbostock
84% match
Loading thumbnail…

Fork of Fork of Sankey Particles

An interactive Sankey diagram visualizes energy flows between sources and consumers, with animated particles traveling along links to represent the magnitude of each transfer. The SVG renders nodes and link paths using D3.js and the sankey layout plugin, while a separate Canvas layer draws moving particles computed from each link's path geometry. Particles are generated based on a frequency scale derived from link values and fade over time, creating a dynamic sense of flow intensity across the network.

DDonald Bagwell
82% match
Loading thumbnail…

Fork of Sankey Particles

This fork of the Sankey diagram animates particle flow along links to show energy transfer magnitudes. The visualization combines SVG for static nodes and links with a Canvas overlay for the moving particles, using d3.timer to update particle positions via path.getPointAtLength. It adapts Mike Bostock's d3.sankey layout, applying it to the energy.json dataset, with particle frequency and size scaled by link value.

Ggongxinya
79% match
Loading thumbnail…

Fork of Sankey Particles

Animated Sankey diagram using D3.js to visualize energy flows, rendered with an SVG layer for nodes and links and a canvas overlay for moving particles. The particles travel along the link paths using `getPointAtLength` and `getTotalLength` to animate their positions, with particle frequency and size scaled based on link values. The example uses `d3.json` to load the energy dataset and demonstrates interactive node dragging with `d3.behavior.drag`, triggering `sankey.relayout` updates.

Uulkrueger
79% 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
75% 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
75% match