SANKEY Experiment

100%

SANKEY Experiment

✓ Published0🌍 Public

Last edited Aug 28, 2020

Created on Aug 28, 2020

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.

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

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

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

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

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

88% match

Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays the flow of "Widgets" between five nodes, with links showing the directed transfer values. Built with D3.js version 3.5 and the sankey.js plugin, the SVG visualization renders nodes as draggable rectangles and links as curved paths whose thickness encodes flow magnitude. Data loads from an external JSON file, and the chart supports interactive node repositioning, which triggers recalculation of link paths through the sankey.relayout() method. Node and link hover tooltips reveal names and formatted values.

Dd3noob

87% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram, built with D3.js v4, visualizes the flow of "Widgets" between five nodes. Users can click and drag the rectangular nodes in both horizontal and vertical directions, which triggers a recalculation of the diagram's layout and redraws the connecting, curved links. The example leverages a Sankey plugin adapted from Jason Davies and loads its node and link data from a local JSON file, with node colors generated from a categorical color scheme.

MMisunoKitara

87% match