100%

Fork of sanky

✓ Published0🌍 Public

Last edited Aug 5, 2025

Created on Aug 5, 2025

Forked from sanky

This interactive Sankey diagram visualizes economic flow distributions from three source industries (Agriculture, Manufacturing, Services) to two destination categories (Domestic Consumption, Exports), with hover effects revealing link values. Built with React and D3.js v7, the visualization uses the d3-sankey layout algorithm for positioning nodes and links, rendered as SVG with color-coded nodes and links. The diagram features rounded node corners, a glow filter on hover, and tooltips displaying source-to-target value information.

AI-generated description

Sankey Diagram Visualization

This project demonstrates an interactive Sankey diagram built with React and D3.js. Sankey diagrams are useful for visualizing flow distributions between different stages or categories.

Features

Interactive visualization with hover effects
Responsive design
Color-coded flows
Clean, modern styling with gradient backgrounds
Tooltips with detailed information
Rounded corners and visual enhancements
Glowing effect on hover for links

Data Structure

The diagram visualizes flows from source categories (Agriculture, Manufacturing, Services) to destination categories (Domestic Consumption, Exports).

Libraries Used

React for UI components
D3.js for data visualization
D3-Sankey for Sankey diagram layout calculations

MIT Licensed

Similar vizzes

Loading thumbnail…

sanky

This Sankey diagram visualizes the flow of production values from three economic sectors—Agriculture, Manufacturing, and Services—into Domestic Consumption and Exports. The code uses the `d3-sankey` library's `d3.sankey()` generator and `d3.sankeyLinkHorizontal()` function to compute node and link positions, rendered as SVG paths and rectangles. Node labels are positioned left or right based on their x-coordinate. The bundled React component initializes the D3 chart inside a `useEffect` hook and uses an ordinal color scale for node and link coloring.

AAnimesh Nautiyal

88% match

Loading thumbnail…

Fork of SANKEY Experiment

A fork of an earlier Sankey experiment, this visualization maps a simplified five-node flow from Sector to Industry to Stock, then splits into Buy and Sell actions. The diagram uses the custom d3.sankey plugin to calculate node positions and link paths, rendered as SVG with D3 v3. The example hand-codes its data in a sankeydata.json file rather than loading it externally. Styling applies crisp node rectangles, bold text labels, and semi-transparent black links that darken on hover to show the proportional flow of values between each stage.

MMuhammadAaqib137

79% match

Loading thumbnail…

Fork of SANKEY Experiment

A directed-flow diagram maps notification counts from a total source through matched and scrap categories into downstream targets. The visualization uses a custom `d3.sankey` layout with SVG rendering, featuring draggable nodes and hoverable links with adjustable stroke opacity. Node heights encode link values, and the layout algorithm iteratively optimizes node positions to reduce collisions. Data comes from a static JSON file, with node labels styled in bold Verdana text and the chart embedded in a React application shell.

PPeter S

78% match

Loading thumbnail…

Sankey fork

This example displays the flow of values between cities using a fork-like structure, where multiple inputs split into numerous outputs across several stages. The visualization uses the D3.js Sankey plugin to layout and render the graph, with the `d3.sankey` function calculating node positions and link depths. The code defines a custom color scheme and uses SVG elements for drawing, with interactive features like hover effects on links and draggable nodes. Data is loaded from a JSON file containing city names and their connections, which is then processed and fed into the layout algorithm for rendering as a React component.

Ssp212

78% match

Loading thumbnail…

Fork of Fork of test of Fork of SANKEY Experiment

This example presents a sankey diagram showing the flow of notifications from a total source into matched and scrap categories, which further break down into subcategories like XRM, Prodc, PN OTD, CRB, and scrap. Built with React and D3.js, the visualization uses the custom `d3.sankey` layout API to compute node positions and link paths. The SVG rendering displays interactive nodes with draggable rectangles and hoverable links, while data is loaded from a static JSON file containing node names and link values.

SSteve_Nashon

77% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes the flow of "Widgets" between named sources and targets in a network. It uses d3.js version 3 and the custom `d3.sankey()` layout function, which positions nodes and computes curved link paths. External CSV data supplies the source, target, and value pairs, which are parsed into node and link objects. Users can drag nodes to rearrange the layout, triggering a relayout that updates the link paths, with hover effects increasing link opacity.

PPragyagarg

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

76% match

Loading thumbnail…

Fork of Fork of Sankey Particles

An interactive Sankey diagram visualizes energy flows between sources and consumers, with animated particles traveling along links to represent the magnitude of each transfer. The SVG renders nodes and link paths using D3.js and the sankey layout plugin, while a separate Canvas layer draws moving particles computed from each link's path geometry. Particles are generated based on a frequency scale derived from link values and fade over time, creating a dynamic sense of flow intensity across the network.

DDonald Bagwell

76% match