sp212

@sp212·4 public vizzes

small scale sankey

This small-scale Sankey diagram visualizes the flow of values between five nodes, with links weighted by a value of 2 or 4. The diagram uses the `d3.sankey` library to calculate node and link positions, rendering the network as SVG paths and rectangles. Node color is assigned via `scaleOrdinal` with `schemeCategory10`. The data in `data.json` defines the node names and link source-target pairs. The interactive chart includes a color legend constructed from the nodes' domain, and supports zooming and panning via `d3.zoom`.

Aug 23, 2023

Loading thumbnail…

Sankey fork

This example displays the flow of values between cities using a fork-like structure, where multiple inputs split into numerous outputs across several stages. The visualization uses the D3.js Sankey plugin to layout and render the graph, with the `d3.sankey` function calculating node positions and link depths. The code defines a custom color scheme and uses SVG elements for drawing, with interactive features like hover effects on links and draggable nodes. Data is loaded from a JSON file containing city names and their connections, which is then processed and fed into the layout algorithm for rendering as a React component.

Jan 21, 2023

Loading thumbnail…

alt org (Sankey)

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.

Jan 16, 2023

Loading thumbnail…

Org network graph

This example presents a static organization network graph. It uses D3.js force simulation to compute node positions and render the network structure, displaying a simple HTML page with CSS styling. The visualization is built with React and demonstrates a basic network layout, where circles represent nodes and links show connections between them. The graph uses D3’s force-directed layout to position the nodes, though the dataset itself is not defined in the code.

Jan 15, 2023