Skip to main content
SimilarExport ZIP
100%

SANKEY Experiment

✓ Published0🌍 Public
JJimMaltby
Last edited Dec 21, 2020
Created on Dec 21, 2020

A Sankey diagram visualizes the flow of "Widgets" between five nodes, with link thickness proportional to the quantity transferred. The layout uses `d3.sankey()` from a custom `sankey.js` plugin, rendering nodes as SVG rectangles and links as cubic Bézier paths, while interactively dragging nodes triggers `sankey.relayout()`. Node and link tooltips display values via `d3.format`. The data originates from `sankey.json`, which defines the nodes and edges.

AI-generated description

Learning Sankey. learnign how to do snakey diagrams as part of Layout learning. Data is set var. From D3 Noob: https://bl.ocks.org/d3noob/5ba21a90a721cb19a47ff14c9513e43a

MIT Licensed

Similar vizzes

Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of "Widgets" between five named people, with link thickness proportional to transfer values. Built with D3 v4, it uses the `d3.sankey` plugin to compute node positions and link paths, rendering nodes as draggable SVG rectangles and links as cubic Bézier curves via `sankey.link()`. Data loads from a JSON file with named source and target references, which the code maps to node objects before layout. The scene updates interactively on drag, recalculating link depths through `sankey.relayout()`.

Dd3noob
96% match
Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays the flow of "Widgets" between five nodes, with links showing the directed transfer values. Built with D3.js version 3.5 and the sankey.js plugin, the SVG visualization renders nodes as draggable rectangles and links as curved paths whose thickness encodes flow magnitude. Data loads from an external JSON file, and the chart supports interactive node repositioning, which triggers recalculation of link paths through the sankey.relayout() method. Node and link hover tooltips reveal names and formatted values.

Dd3noob
96% match
Loading thumbnail…

SANKEY Experiment

This Sankey diagram shows the flow of "Widgets" between five named nodes, with link thickness indicating the quantity transferred. Built with D3.js v5 and a custom `d3.sankey` plugin, it loads JSON data with node names, maps links accordingly, and lays out the graph automatically. The diagram supports interactive dragging of node rectangles, which triggers a `relayout()` to update link paths. Rendering uses SVG elements with semi-transparent curved paths and categorical color fills per node.

Dd3noob
96% match
Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of quantities between five nodes, with node colors distinguishing categories and link thickness representing value. The diagram supports interactive dragging of nodes in both axes, recalculating link paths during movement. Built with D3 v4, it uses the d3.sankey plugin for layout and d3.drag for interaction. Data comes from a static JSON file, and the SVG rendering includes hover tooltips showing source, target, and formatted values in "Widgets" units.

Dd3noob
95% match
Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of widgets between five nodes, with link widths proportional to the volume of each connection. The code loads data from a JSON file and uses d3.sankey(), d3.drag(), and standard SVG elements to render the network. Nodes are draggable, triggering a relayout that recalculates link paths in real time.

Dd3noob
94% 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
93% match
Loading thumbnail…

SANKEY Experiment

This example shows a small Sankey diagram with five nodes and seven links, visualizing the flow of “Widgets” between process stages. The diagram updates live as the user drags nodes, re-layouting the links to match new positions. The code uses D3 v5 with a custom `d3.sankey` layout function, drawing the diagram as SVG paths and rectangles. It sets node width, padding, and link stroke opacity, and colors nodes with `d3.scaleOrdinal` and `d3.schemeCategory10`. The layout is computed with `sankey.layout(32)` iterations, and drag behavior uses `d3.drag`. Data loads from `sankey.json` via `d3.json`.

Dd3noob
93% 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
92% match