Sankey Diagram

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.

73% match

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

SANKEY Experiment

This Sankey diagram visualizes flows between named entities using d3.js v4, with data loaded from an external CSV file containing only source, target, and value columns. The chart uses the d3.sankey plugin to compute node positions and link thicknesses, rendering nodes as colored rectangles with labels and links as curved paths whose stroke width encodes flow magnitude. Hovering over a link or node reveals the exact quantity in "Widgets" via a tooltip. Nodes are draggable, and the layout dynamically recalculates link paths on drag. The example, based on D3 Tips and Tricks v4, demonstrates how to transform raw tabular CSV data into a Sankey diagram with minimal preprocessing, using d3.nest to deduplicate nodes and d3.drag for interactivity.

JJoePlant

SANKEY Experiment

This is a Sankey diagram that visualizes the flow of values between named nodes, with the source and target data loaded from an external CSV file. The diagram uses the `d3-sankey` extension library on top of d3.v6, with nodes rendered as colored rectangles and links as semi-transparent black paths with widths proportional to their values. The code explicitly formats numbers and applies a categorical color scheme using `d3.scaleOrdinal`, while interactive hover states on links increase their opacity. Rendered as SVG, the visualization includes node labels and tooltips via `title` elements.

Sankey Barbara

This interactive Sankey diagram visualizes time allocation from a CSV file, showing flows between organizational units, activity categories, and transportation planning topics. Built with D3.js v4 and rendered as SVG, the diagram uses custom node dragging for repositioning and features gradient-colored links. The code loads data via `d3.csv`, processes it into node and link arrays, and uses a custom `d3.sankey` layout function with iterative relaxation algorithms to position nodes and calculate link thickness based on values.

MMisunoKitara

SANKEY Experiment

A Sankey diagram shows the flow of values between five nodes (node0 through node4) across three stages, with links varying in thickness according to their assigned weights. The example uses d3.v6 with the d3-sankey plugin (v0.12.3) to compute the layout, generating SVG paths via `d3.sankeyLinkHorizontal()` for the links and rectangles for the nodes. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) colors each node, and hover effects increase link opacity. Data comes from a static `sankey.json` file, demonstrating a basic multi-stage flow visualization.

Sankey Russian Government Spending

This Sankey diagram visualizes Russian government spending flows, showing how total notifications distribute into matched and scrap categories before splitting into subcategories like XRM, Prodc, and PN OTD. Using D3.js version 3.5.17, the code implements a custom `d3.sankey` layout function with node and link rendering via SVG. The visualization assigns colors to nodes and uses curved paths for links, with hover effects increasing stroke opacity. Data comes from an embedded JSON array containing seven nodes and six links with numerical values.

Ttgma99

71% match

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.