ulkrueger

@ulkrueger·3 public vizzes

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.

May 18, 2023

Loading thumbnail…

UKPV

A Sankey diagram visualizes the early spread of a virus, using SVG paths to show the flow of transmission between countries. Node rectangles are colored by country, and link thickness encodes the relative number of cases transferred. The layout is computed with a custom `d3.sankey` module, which uses functions like `computeNodeDepths`, `relaxLeftToRight`, and `computeLinkDepths` to position nodes and routes. Links are drawn with cubic Bézier curves via the `link()` method, and nodes are draggable using `d3.drag()`.

May 18, 2023

Loading thumbnail…

Energie_UKPV

This visualization shows the flow of energy from generation to various consumption categories like XRM, Prodc, and CRB, with a separate stream for grid feed-in. Using the D3.js library and a custom `d3.sankey` module, the diagram renders nodes and links as SVG elements, with node heights and link widths proportional to energy values from the accompanying JSON data. The interactive layout allows node dragging, while hover states increase link opacity to highlight specific flows.

May 18, 2023