Fork of SANKEY Experiment

100%

Fork of SANKEY Experiment

✓ Published0🌍 Public

Last edited Jul 3, 2023

Created on Jul 3, 2023

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of test of Fork of SANKEY Experiment

This fork of a SANKEY experiment visualizes the flow of notifications into matched and scrap categories, with further breakdowns into XRM, Prodc, PN OTD, and CRB. The diagram uses a custom `d3.sankey` layout function to compute node positions and link paths, rendering with SVG via D3’s selection and path APIs. Node and link styling is defined through CSS classes, including hover effects on links. Data comes from a JSON file specifying nodes and weighted links, and interactions like dragging are enabled on node rectangles.

SSteve_Nashon

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

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

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

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

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

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

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

83% match