Rainbow Sankey Diagram with Zooming

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

72% match

SANKEY Experiment

A Sankey diagram visualizes the flow of "Widgets" between five nodes, with link thickness proportional to the quantity transferred. The layout uses `d3.sankey()` from a custom `sankey.js` plugin, rendering nodes as SVG rectangles and links as cubic Bézier paths, while interactively dragging nodes triggers `sankey.relayout()`. Node and link tooltips display values via `d3.format`. The data originates from `sankey.json`, which defines the nodes and edges.

JJimMaltby

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.

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.

Fork from AI: Rainbow Colors

Simplified version of Sankey.

CCurran Kelleher

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.

70% match

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

70% match

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.