SANKEY Experiment

100%

SANKEY Experiment

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

This Sankey diagram visualizes the flow of values between five named nodes (Barry, Frodo, Elvis, Sarah, and Alice) using the d3-sankey extension for D3 v7. The SVG rendering uses `d3.json` to load node and link data where links reference nodes by name rather than index. Each node appears as a colored rectangle with text labels, while curved link paths show the magnitude of flow with stroke widths and hover effects. The code builds the diagram by mapping link sources and targets to node objects before applying the Sankey layout algorithm.

AI-generated description

The above example is intended to demonstrate drawing a simple Sankey diagram using JSON with names for the nodes instead of relying on d3 to index them.

This is one of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.

mit Licensed

Similar vizzes

Loading thumbnail…

SANKEY Experiment

This example shows a small data flow between named entities (Barry, Frodo, Elvis, Sarah, Alice) as a sankey diagram, with colored, draggable nodes and curved links whose widths scale with link values. It loads external CSV data, processes it into nodes and links, then uses the custom `d3.sankey` layout and `sankey.link()` path generator to render the SVG. Colors come from `d3.scaleOrdinal` with `d3.schemeCategory10`, and interactive dragging triggers `sankey.relayout()` to update paths.

Dd3noob

92% match

Loading thumbnail…

SANKEY Experiment

This is a Sankey diagram built with D3 v4, showing the flow of widgets between named sources and targets such as Barry, Frodo, and Alice. The visualization loads its link data from an external CSV file, then constructs nodes and edges dynamically. It uses the `d3.sankey` layout with a custom `sankey.js` implementation to compute node positions and link thicknesses. Nodes are draggable via `d3.drag`, and the diagram is rendered as SVG with semi-transparent links and color-coded node rectangles.

Dd3noob

92% match

Loading thumbnail…

SANKEY Experiment

This example uses a Sankey diagram to visualize the flow of values between five nodes, with links showing the quantity transferred from each source to its targets. The diagram is rendered as an SVG using d3.v7 and the d3-sankey plugin v0.12.3, with node rectangles colored using d3.scaleOrdinal and d3.schemeCategory10. Link thickness encodes the flow value, and hovering highlights the links. Data is loaded from a static JSON file (sankey.json) containing the node and link definitions.

Dd3noob

91% match

Loading thumbnail…

SANKEY Experiment

A small Sankey diagram visualizes energy-style flows between five named people, with links and node values drawn as proportional colored bars and connecting paths. The example demonstrates loading graph data from a JSON file where node and link references use names instead of numeric indices, requiring a lookup map to connect sources and targets. Built with D3 v6 and the d3-sankey module, it renders to SVG using `d3.sankey`, `d3.sankeyLinkHorizontal`, and `d3.scaleOrdinal` for node coloring, with hover tooltips via `title` elements.

Dd3noob

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

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

89% match

Loading thumbnail…

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.

Dd3noob

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

89% match