SANKEY update Experiment

100%

SANKEY update Experiment

✓ Published1🌍 Public

Last edited Nov 26, 2020

Created on Nov 26, 2020

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.

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

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

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

89% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes HTTP request flows within a Swagger-defined Petstore API, using D3.js v3 and a custom `d3.sankey()` layout. Nodes represent endpoints, HTTP methods, response codes, and resource parameters, with link widths proportional to the request values (3.0 or 0.4). Users can drag nodes to rearrange the flow, and hovering highlights connections. The SVG rendering includes draggable rectangles for nodes and curved paths for links, with data sourced from multiple JSON files including `fullcoggle.json` and `petswagger.json`.

Kkbkashyap

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

85% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram uses the D3.js library to visualize the flow of data through a Swagger-defined Pet Store API. The graph maps requests from API resources and parameters, such as `petId` and `upload file`, through to endpoints like `/pet/{petId}`. Nodes and links are colored and sized according to their connection values. The visualization supports drag-and-drop repositioning of nodes, with a `relayout()` function updating the curved link paths and a yellow stroke applied to all connections. The underlying data is loaded from a JSON file.

SShubham

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

85% match