SANKEY Experiment

100%

SANKEY Experiment

✓ Published0🌍 Public

Last edited Aug 20, 2020

Created on Aug 20, 2020

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.

AI-generated description

SVF face with animated Eyebrows

MIT Licensed

Similar vizzes

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…

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

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

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

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

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

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

85% match