Fork of Fork of Sankey Particles

100%

Fork of Fork of Sankey Particles

✓ Published0🌍 Public

Last edited Dec 20, 2023

Created on Dec 20, 2023

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

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

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

90% match

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

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

82% match

Loading thumbnail…

Fork of SANKEY Experiment

A fork of an earlier Sankey experiment, this visualization maps a simplified five-node flow from Sector to Industry to Stock, then splits into Buy and Sell actions. The diagram uses the custom d3.sankey plugin to calculate node positions and link paths, rendered as SVG with D3 v3. The example hand-codes its data in a sankeydata.json file rather than loading it externally. Styling applies crisp node rectangles, bold text labels, and semi-transparent black links that darken on hover to show the proportional flow of values between each stage.

MMuhammadAaqib137

81% match

Loading thumbnail…

Fork of SANKEY Experiment

A directed-flow diagram maps notification counts from a total source through matched and scrap categories into downstream targets. The visualization uses a custom `d3.sankey` layout with SVG rendering, featuring draggable nodes and hoverable links with adjustable stroke opacity. Node heights encode link values, and the layout algorithm iteratively optimizes node positions to reduce collisions. Data comes from a static JSON file, with node labels styled in bold Verdana text and the chart embedded in a React application shell.

PPeter S

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

78% match