alt org (Sankey)

100%

alt org (Sankey)

✓ Published0🌍 Public

Last edited Jan 16, 2023

Created on Jan 16, 2023

This example visualizes a Swagger API specification as a Sankey diagram, mapping endpoints like `/pet/{petId}` through HTTP methods such as post, get, put, and delete, and then to response codes like 200, 400, 404, and 405. The diagram also traces data fields like petId and status from operation names such as "update a pet" into the resource layer. Built with D3.js and the `d3.sankey` layout, the SVG uses draggable nodes and semi-transparent link paths to show flow, with `d3.behavior.drag` enabling interactive repositioning of nodes. The rendered graph is static without animation.

AI-generated description

SVF face with animated Eyebrows

MIT Licensed

Similar vizzes

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

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

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

83% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes the flow of data through HTTP endpoints, methods, and response codes for a pet store API. Built with D3.js, it uses the `d3.sankey` library to compute node positions and link paths, with the `d3.behavior.drag` API enabling manual node repositioning. The diagram shows the PetResource node connecting to various URL paths, which branch into HTTP methods (get, post, put, delete) and then into response codes (200, 400, 404, 405). Additional data files include a greenhouse gas emissions example and an animated SVG face with moving eyebrows.

Mmorjyooo

82% match

Loading thumbnail…

Fork of SANKEY Experiment

This visualization shows the relationships between REST API endpoints, HTTP methods, response codes, and data fields from the Swagger Petstore specification using a Sankey diagram. The d3.sankey layout renders nodes as rectangles and links as curved paths, with all flows weighted equally at 3.0 units. The code includes multiple JSON configurations for different graph variations, and the SVG chart allows nodes to be repositioned through drag interactions, with links updating via the relayout function. Data is loaded directly from embedded JavaScript objects rather than external files.

MmwellsSFMC

82% match

Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of API operations from the PetResource node to various HTTP methods (get, post, put, delete) and their resulting status codes (200, 400, 404, 405). Nodes appear as draggable rectangles, and links curve between them with widths proportional to their values. Using the D3.js v3 library with `d3.sankey()` layout, the visualization supports interactive node dragging that triggers `sankey.relayout()` to reposition links. The diagram renders in SVG with clickable link titles and a static pet store dataset.

Rrams211

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

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

80% match