Sankey with circular links

100%

Sankey with circular links

✓ Published0🌍 Public

Last edited Sep 21, 2021

Created on Sep 9, 2021

A Sankey diagram displays circular link paths that loop back to earlier nodes, with nodes and links rendered as SVG shapes. The example uses the custom d3-sankey-circular library, a fork of d3.sankey, to compute circular link paths and node positions. Data from example-data.js includes process flows with cycles, and the diagram colors nodes with a d3.scaleSequential interpolateCool scale based on horizontal position.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sankey with circular links

This example demonstrates a Sankey diagram that supports circular links, allowing flows to loop back to earlier nodes in the process. The chart uses the `d3-sankey-circular` plugin, built on D3 v4, to detect and draw cycles as curved paths rather than straight lines. Node positions are computed with the plugin’s layout, while links are rendered as SVG paths with a gradient stroke to indicate direction. The sample data models a multi-stage process with explicit feedback loops, such as from process1 back to process4, and includes twenty named nodes with numeric flow values.

TThomas Kahessay

94% match

Loading thumbnail…

Sankey with circular links

A Sankey diagram visualizes the flow of values between interconnected processes, with circular links rendered as red curved paths to highlight feedback loops where data returns to earlier stages. Built with React and D3 v4, the example uses the d3-sankey-circular library to compute node positions and circular path data, while SVG with animation displays the links. Hover interactions dim non-adjacent nodes and links, and the diagram uses a sequential color scale for node coloring.

TThomas Kahessay

93% match

Loading thumbnail…

Sankey Diagram

A Sankey diagram visualizes the flow of values between five nodes, with links of varying thickness representing the magnitude of each connection. The diagram is rendered as an SVG using D3.js v4 and the `sankey` layout function from the D3 graph gallery library. Node and link data is loaded from a JSON file, and the visualization uses `scaleOrdinal` and `schemeCategory10` for color mapping, with a color legend generated by the custom `colorLegend` function.

KKarkG

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

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

83% match

Loading thumbnail…

SANKEY Experiment

This example shows a small Sankey diagram with seven links connecting five nodes, visualizing the flow of "Widgets" between named sources and targets. The code builds the diagram using the d3.js v4 library, loading link data from an external CSV file and parsing it into node and link objects. The diagram renders as an SVG with draggable node rectangles and curved link paths, using d3.sankey for layout, d3.csv for data loading, and d3.drag for interactive node movement.

Dd3noob

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

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

82% match