SANKEY Experiment

100%

SANKEY Experiment

✓ Published0🌍 Public

Last edited Oct 12, 2016

Created on Oct 12, 2016

This Sankey diagram visualizes the flow of claims between time periods and categories, using colored, draggable nodes and weighted links to show proportional relationships. The visualization loads external CSV data, which is processed to create distinct nodes and links, and rendered as an SVG using D3.js v3 with custom sankey layout logic. Interactive features include node dragging and hover tooltips that reveal link details with formatted value labels.

AI-generated description

This is a sankey diagram used as an example in the book D3 Tips and Tricks. It is based on a simpler version here.

It demonstrates the construction of a sankey diagram using d3.js from external csv data that is formatted using just link data and named values. It should be taken in context with the text of the book which can be downloaded for free from Leanpub.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/c9b90689c1438f57d649'>Sankey from csv with d3.js</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/649b7a2a2d90b430dcb45eee1cdb1d49'>Sankey from csv with d3.js</a>

mit Licensed

Similar vizzes

Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of claims between categories and time steps, with node widths and link thicknesses proportional to values. It reads external CSV data containing source, target, and count columns, then constructs the graph using d3.sankey with d3.csv and d3.nest to aggregate duplicate nodes. The SVG rendering includes draggable nodes via d3.drag, hover tooltips showing formatted values, and uses d3.scaleOrdinal with schemeCategory20 for node coloring.

SSpaceActuary

96% match

Loading thumbnail…

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.

Dd3noob

87% match

Loading thumbnail…

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

87% match

Loading thumbnail…

SANKEY Experiment

This example shows a sankey diagram built with D3.js, using external CSV data that specifies named source and target links with numeric values. The chart visualizes the flow of "Widgets" between named nodes, with the width of each link proportional to its value, and supports interactive node dragging. The code uses d3.sankey for layout, d3.csv for data loading, d3.behavior.drag for node movement, and renders the diagram as SVG with semi-transparent black link paths and colored node rectangles.

Dd3noob

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

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

This example shows a sankey diagram built with D3 v7 and the d3-sankey module, using SVG rendering. It loads link data from an external CSV file, where each row defines a source, target, and value, then converts text labels into numeric node indices for the layout. The visualization displays named nodes and flowing links with widths proportional to values, using `d3.sankey()` and `d3.sankeyLinkHorizontal()` for positioning. Node colors come from a categorical scale, and hover effects adjust link opacity.

Dd3noob

85% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram, built with D3.js v4, visualizes the flow of "Widgets" between five nodes. Users can click and drag the rectangular nodes in both horizontal and vertical directions, which triggers a recalculation of the diagram's layout and redraws the connecting, curved links. The example leverages a Sankey plugin adapted from Jason Davies and loads its node and link data from a local JSON file, with node colors generated from a categorical color scheme.

MMisunoKitara

85% match