SANKEY update Experiment

100%

SANKEY update Experiment

✓ Published1🌍 Public

Last edited Nov 27, 2020

Created on Aug 20, 2020

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.

AI-generated description

SVF face with animated Eyebrows

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

SANKEY update Experiment

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.

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

88% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes the flow of values between API endpoints in a Swagger-defined pet store, grouping operations like GET, POST, PUT, and DELETE toward response codes. Built with D3.js v3 and the custom `d3.sankey` layout, nodes are draggable via `d3.behavior.drag`, triggering `sankey.relayout()` to recompute link paths. The SVG rendering uses `sankey.link()` for curved, stroke-width-scaled flows and colors nodes by category. Input data comes from a JSON file mapping resource operations to HTTP methods and status codes.

Mmorjyooo

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

87% match

Loading thumbnail…

SANKEY Experiment

This example demonstrates a repurposable Sankey diagram, which visualizes the flow of quantities between interconnected nodes. Built with D3 v4, it loads node and link data from an external JSON file and renders the diagram as SVG, using the `d3.sankey` plugin for layout and `d3.drag` for interactive node repositioning. The code also employs `d3.scaleOrdinal` for node coloring and `d3.format` for display values, with links drawn as cubic Bézier curves via `sankey.link()`.

PPragyagarg

87% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram, built with D3.js v4, visualizes the flow of "Widgets" between five nodes. Users can click and drag the rectangular nodes in both horizontal and vertical directions, which triggers a recalculation of the diagram's layout and redraws the connecting, curved links. The example leverages a Sankey plugin adapted from Jason Davies and loads its node and link data from a local JSON file, with node colors generated from a categorical color scheme.

MMisunoKitara

87% match

Loading thumbnail…

SANKEY Experiment

A dynamic Sankey diagram visualizes the flow of values between five nodes using D3.js v5 and the Sankey plugin layout methods (`d3.sankey`, `sankey.layout`, and `sankey.link`). The SVG-based chart renders colored nodes and curved links with widths proportional to link values, supporting interactive node dragging via `d3.drag` to reposition elements and trigger `sankey.relayout()`. Data from a static JSON file defines node connections and quantitative weights, with hover tooltips showing source–target pairs and formatted widget counts. The example demonstrates custom link-path generation for a compact, explorable flow network.

Dd3noob

87% match