kbkashyap

@kbkashyap·4 public vizzes

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.

Nov 27, 2020

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.

Nov 26, 2020

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.

Nov 26, 2020

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

Aug 20, 2020