Fork of Sankey Particles

100%

Fork of Sankey Particles

✓ Published3🌍 Public

Last edited May 18, 2023

Created on May 18, 2023

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.

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

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

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

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

85% match

Loading thumbnail…

SANKEY Experiment

A dynamic Sankey diagram visualizes the flow of values between five nodes using D3.js v5 and the Sankey plugin layout methods (`d3.sankey`, `sankey.layout`, and `sankey.link`). The SVG-based chart renders colored nodes and curved links with widths proportional to link values, supporting interactive node dragging via `d3.drag` to reposition elements and trigger `sankey.relayout()`. Data from a static JSON file defines node connections and quantitative weights, with hover tooltips showing source–target pairs and formatted widget counts. The example demonstrates custom link-path generation for a compact, explorable flow network.

Dd3noob

80% match

Loading thumbnail…

SANKEY Experiment

This visualization demonstrates a Sankey diagram using D3.js v5, displaying flows between nodes with width-proportional links. Built with SVG, it renders colored rectangles for nodes and semi-transparent black curves for links, with interactive drag-and-drop repositioning that triggers smooth link updates. The diagram, titled “SANKEY Experiment,” loads its data from an external JSON file and includes hover tooltips showing source, target, and value. The code adapts a D3 v4 block by d3noob and uses the custom sankey.js layout module to compute node positions and link paths, with a units label of "Widgets" and a color scale from d3.schemeCategory10.

GGerardoFurtado

80% match

Loading thumbnail…

SANKEY Experiment

This example demonstrates an interactive Sankey diagram with draggable nodes using d3.js v5. The visualization shows flow relationships between five nodes with seven weighted links, rendered as SVG paths and rectangles. The code loads data from a JSON file via d3.json, applies the d3.sankey plugin for layout computation, and uses d3.drag to enable node repositioning. A relayout function recalculates link paths dynamically when nodes are dragged. The diagram uses color from d3.scaleOrdinal and formats values as "Widgets" units.

Dd3noob

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

79% match