SANKEY Experiment

100%

SANKEY Experiment

✓ Published1🌍 Public

Last edited Apr 1, 2020

Created on Apr 1, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

93% match

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

91% match

Loading thumbnail…

SANKEY Experiment

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.

BBhavyatulasi

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

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

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

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

82% match