SANKEY update Experiment

100%

SANKEY update Experiment

✓ Published0🌍 Public

Last edited Nov 26, 2020

Created on Nov 26, 2020

An interactive SVG Sankey diagram visualizes test results from API request flows. Nodes represent parameters, endpoints, and response statuses, with links flowing between them. D3's drag behavior allows manual node repositioning, triggering a relayout that updates the link paths. The diagram indicates test outcomes by overlaying textual status codes on the links, colored green for success and red for failure. Data is loaded from local JSON files describing API structures and test execution results.

AI-generated description

SVF face with animated Eyebrows

MIT Licensed

Similar vizzes

Loading thumbnail…

SANKEY update Experiment

This interactive Sankey diagram visualizes API workflow dependencies, mapping the flow from endpoints and operations through to HTTP response codes. The D3.js (v3) visualization uses the `d3.sankey` plugin to compute node positions and link paths, rendered as SVG with drag-and-drop node repositioning. Node colors are assigned using `d3.scale.category20`, with colors derived from node name substrings. The example iterates on data structures, experimenting with different JSON link/node formats and adding text overlays on links that display status codes, colored green or red based on the final character in the target node name.

Kkbkashyap

93% match

Loading thumbnail…

SANKEY update Experiment

This interactive Sankey diagram visualizes a Swagger API workflow, mapping resources and endpoints through HTTP methods to response status codes, with node colors distinguishing functional groups. Built with D3.js and the custom `d3.sankey` layout, the SVG-based chart allows drag-and-drop node repositioning that triggers `sankey.relayout()` to update link paths. The example also demonstrates dynamic data loading from JSON files, such as `TestEx-Results.json`, and includes experimental link text overlays that color-code test results based on encoded status markers.

Kkbkashyap

93% match

Loading thumbnail…

SANKEY Experiment

This example shows an interactive Sankey diagram that visualizes API endpoint flows from a Swagger specification, with data loaded from a JSON file and laid out using the D3.js library. The diagram displays nodes and links where users can drag nodes to reposition them, triggering a relayout that recomputes the link paths. The visualization uses D3 v3.5.17's `d3.sankey` plugin and `d3.behavior.drag`. While the main chart is static, the repository also includes an animated SVG face with transitioning eyebrows, demonstrating additional D3 animation capabilities separate from the Sankey view.

Mmorjyooo

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

86% match

Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays the flow of "Widgets" between five nodes, with links showing the directed transfer values. Built with D3.js version 3.5 and the sankey.js plugin, the SVG visualization renders nodes as draggable rectangles and links as curved paths whose thickness encodes flow magnitude. Data loads from an external JSON file, and the chart supports interactive node repositioning, which triggers recalculation of link paths through the sankey.relayout() method. Node and link hover tooltips reveal names and formatted values.

Dd3noob

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

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

86% match

Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of widgets between five nodes, with link widths proportional to the volume of each connection. The code loads data from a JSON file and uses d3.sankey(), d3.drag(), and standard SVG elements to render the network. Nodes are draggable, triggering a relayout that recalculates link paths in real time.

Dd3noob

85% match