Skip to main content
SimilarExport ZIP
100%

d3NoobV5 Reusable Examples - Sankey Diagram - v2 (with drag)

✓ Published0🌍 Public
JJimMaltby
Last edited Oct 6, 2021
Created on Sep 4, 2021

This Sankey diagram visualizes the flow of values between five nodes, with adjustable node positions through drag interactions. The chart uses the reusable chart pattern from Mike Bostock's "Towards Reusable Charts" and incorporates d3.sankey for layout computation, including node breadth and depth algorithms. Rendered in SVG, the code applies d3.drag for node movement and d3.scaleOrdinal with d3.schemeCategory10 for coloring. Links are drawn as curved paths with stroke widths proportional to flow values, and hover effects increase link opacity. The implementation follows Marcos Iglesias' ProD3 modular pattern with dispatchers for custom events.

AI-generated description

Simple Sankey Diagram (version 1: static (without drag)):

A vanilla HTML implementation of reusable version of d3Noob's V5 examples.

Examples Malcolm Maclean's (d3noob) great book "D3 Tips and Tricks v5.x Interactive Data Visualization in a Web Browser" (https://leanpub.com/d3-t-and-t-v5).

The reusable template is derived from Mike Bostock's Towards Reusable Charts (https://bost.ocks.org/mike/chart/) as the source of the foundational principles. But uses the ProD3 pattern (Pro D3.js Use D3.js to Create Maintainable, Modular, and Testable Charts by Marcos Iglesias https://www.apress.com/gp/book/9781484252024) as the basis for the charts.

Addtional help from and aknowledgement to:

MIT Licensed

Similar vizzes

Loading thumbnail…

d3NoobV5 Reusable Examples - Sankey Diagram - static v1 (without drag)

A static Sankey diagram visualizes the flow of values between five nodes, with ribbon-like links whose thickness encodes the magnitude of each connection. The diagram uses `d3.sankey` to compute node positions and link paths, rendering them as SVG paths with hover effects that increase stroke opacity. The chart is built using a reusable module pattern with `d3.scaleOrdinal` for node coloring and `d3.format` for value labels, drawing data from a static JSON file.

JJimMaltby
92% 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
88% match
Loading thumbnail…

SANKEY Experiment

This example shows a Sankey diagram with five nodes and seven links, where the width of each link is proportional to its value, and nodes can be dragged to rearrange the flow. The visualization is built using D3 v4 and the `d3.sankey()` plugin, which handles node layout and link computation, while the SVG rendering uses `d3.select()` to append paths and rectangles. The code uses `d3.drag()` for interactive node movement, and the data is loaded from a JSON file with `d3.json()`.

Dd3noob
87% 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
86% 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
86% 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
85% 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
85% 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
85% match