Fork of SANKEY Experiment

100%

Fork of SANKEY Experiment

✓ Published0🌍 Public

Last edited Apr 10, 2021

Created on Apr 3, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Dd3noob

82% match

Loading thumbnail…

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.

Dd3noob

81% match

Loading thumbnail…

SANKEY Experiment

This visualization demonstrates a Sankey diagram using D3.js v5, displaying flows between nodes with width-proportional links. Built with SVG, it renders colored rectangles for nodes and semi-transparent black curves for links, with interactive drag-and-drop repositioning that triggers smooth link updates. The diagram, titled “SANKEY Experiment,” loads its data from an external JSON file and includes hover tooltips showing source, target, and value. The code adapts a D3 v4 block by d3noob and uses the custom sankey.js layout module to compute node positions and link paths, with a units label of "Widgets" and a color scale from d3.schemeCategory10.

GGerardoFurtado

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

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

81% match

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

81% match

Loading thumbnail…

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.

Dd3noob

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

81% match