Fork

100%

✓ Published0🌍 Public

Vvegetable.c@nycu.edu.tw

Last edited Oct 31, 2024

Created on Oct 31, 2024

Forked from Debug

Sankey Particles animates the flow of energy through a network diagram using the car evaluation dataset and an energy consumption JSON file. The visualization combines an SVG-based Sankey layout with a canvas particle overlay, where d3.sankey positions the nodes and links while animated particles traverse the paths to illustrate data movement. The code implements custom layout calculations for node positioning and link depths, with the canvas rendering particle motion on top of the static SVG structure.

AI-generated description

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

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

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

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

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

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

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

77% match

Loading thumbnail…

Sankey fork

This example displays the flow of values between cities using a fork-like structure, where multiple inputs split into numerous outputs across several stages. The visualization uses the D3.js Sankey plugin to layout and render the graph, with the `d3.sankey` function calculating node positions and link depths. The code defines a custom color scheme and uses SVG elements for drawing, with interactive features like hover effects on links and draggable nodes. Data is loaded from a JSON file containing city names and their connections, which is then processed and fed into the layout algorithm for rendering as a React component.

Ssp212

76% match