Skip to main content
SimilarExport ZIP
100%

SANKEY Experiment

✓ Published8🌍 Public
Kkbkashyap
Last edited Aug 20, 2020
Created on Aug 18, 2020
Forked from SVG Face

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`.

AI-generated description

SVF face with animated Eyebrows

MIT Licensed

Similar vizzes

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
93% 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
92% 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
90% 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
90% 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
89% match
Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of data through a REST API for a pet store, showing the relationships between API endpoints, HTTP methods, and response codes. The chart uses D3.js with the `d3.sankey` plugin to render the flow, with nodes representing resources like `PetResource` and links showing the connections between paths. The visualization is interactive, allowing users to drag nodes to rearrange the layout. Data is loaded from static JSON files containing node and link definitions with associated values.

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