Skip to main content
SimilarExport ZIP
100%

SANKEY Experiment

✓ Published13🌍 Public
BBhavyatulasi
Last edited Dec 4, 2020
Created on Mar 31, 2020

This sankey diagram visualizes the flow of notifications from a total source through matched and scrap categories, with values displayed for each link transition. Built with React and rendered as SVG using D3.js v3, the visualization loads data from a JSON file containing node and link definitions. The diagram employs the custom `d3.sankey` layout API, which handles node positioning and link thickness calculation through iterative layout algorithms, while CSS styling controls the visual appearance of nodes and links.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

SANKEY Experiment2

This example shows a Sankey diagram tracing the flow of total notifications into matched or scraped categories, then breaking matched notifications into subcategories like XRM, Prodc, PN OTD, and CRB. The diagram uses D3.js version 3.5.17 to render nodes and links as SVG elements with cubic Bézier curves. The layout algorithm iteratively assigns node x-positions by breadth and y-positions by value, using a relaxation process to resolve collisions. The custom `d3.sankey` library handles the node positioning and link depth calculations, while the data is stored in a JSON file with explicit node and link arrays.

BBhavyatulasi
93% match
Loading thumbnail…

SANKEY Experiment

This example shows a sankey diagram tracking notification flows, using D3.js 3.5.17 with custom `d3.sankey` layout functions and SVG rendering. The diagram visualizes how 65,205 total notifications split into matched and scrap categories, with matched items further distributed across XRM, Prodc, PN OTD, and CRB targets. The code defines the sankey layout, node width, padding, and link curvature, while styling node rectangles and semi-transparent links. Clicking or hovering is not implemented; the visualization primarily demonstrates the classic D3 sankey layout with data loaded from a JSON file.

BBhavyatulasi
93% match
Loading thumbnail…

SANKEY Experiment

This example visualizes a notification routing workflow using a Sankey diagram, showing how 65,205 total notifications flow through matched categories like XRM, Prodc, PN OTD, and CRB, while 29,098 are scrapped. Built with React and D3.js version 3.5.17, the code defines a custom `d3.sankey` layout function that computes node positions, link depths, and bezier curve paths for SVG rendering. The diagram uses interactive node dragging and hover effects on links, with data loaded from a JSON file containing node names and link values.

NNimmi Thomas
91% match
Loading thumbnail…

SANKEY Experiment

This visualization uses a D3.js Sankey diagram to show the flow of notification volumes through processing stages. It tracks 65,205 total notifications, which split into matched and scrap categories, with matched items further distributed across XRM, Prodc, PN OTD, and CRB destinations. The SVG rendering uses D3's custom `d3.sankey` layout API, which computes node positions and link depths through iterative relaxation. The diagram employs curved paths for links and semi-transparent black strokes, with nodes rendered as draggable rectangles.

BBhavyatulasi
90% match
Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays flow quantities between six named stages—Scrap, Matched, CRB, Prodc, XRM, and PN OTD—with link thickness scaled to numeric values. The D3.js v3 library’s `d3.sankey` plugin computes node positions and link paths, while `d3.behavior.drag` enables interactive node repositioning with automatic relayout. SVG rendering uses color-coded rectangles and bezier curves, with hover tooltips showing exact link and node values.

BBhavyatulasi
88% match
Loading thumbnail…

test of Fork of SANKEY Experiment

A Sankey diagram shows the flow of notifications from a total pool into matched and scraped categories, then onward to specific systems like XRM, Prodc, PN OTD, and CRB. The visualization uses D3.js (v3.5.17) with a custom `d3.sankey` layout algorithm that computes node positions and link curvatures. Data comes from a JSON file containing node names and link values, rendered as SVG elements with styled rectangles and cubic Bézier curves. Hovering a link increases its stroke opacity to highlight the path.

SSenserva
88% 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
87% match
Loading thumbnail…

Fork of SANKEY Experiment

A fork of a Sankey experiment visualizes the flow of notifications from "Total Notifications" through "Matched" or "Scrap" categories, using a custom D3.js plugin. The SVG diagram renders rectangular nodes connected by curved links, with colors and opacity indicating flow volume. It employs the `d3.sankey` layout function to compute node positions and link depths, while `d3.nest` organizes nodes by breadth for collision resolution. The code leverages D3's `d3.interpolateNumber` for link curvature and reads data from a static `sankeydata.json` file.

Ggongxinya
87% match