gongxinya

@gongxinya·4 public vizzes

Patient Flow Sankey Diagram

This example shows patient flow through seven stages—Assignment, Admission, Transfer, Diagnose, Treatment, Recovery, and Discharge—using a Sankey diagram where link thickness encodes patient counts and loops indicate return paths. The code builds the diagram with the D3 v7 `d3.sankey()` layout and `d3.sankeyLinkHorizontal()` for curved links, rendering nodes as blue SVG rectangles with labels. Data is hardcoded as a JavaScript object, and the visualization updates interactively through D3’s data joins, with hover tooltips via `<title>` elements.

Jul 3, 2023

Loading thumbnail…

Fork of Sankey Particles_2

This visualization shows the UK energy flow Sankey diagram with animated particles traveling along each link to illustrate transfer dynamics. The code uses D3.js v3 with the custom `d3.sankey.js` layout, combining SVG for nodes and links with a Canvas overlay for particle rendering. Particles are generated based on link frequency, move along the SVG path geometry using `getPointAtLength`, and are drawn with the Canvas 2D API. The example demonstrates DOM manipulation through D3 drag behavior for interactive node repositioning.

Jul 3, 2023

Loading thumbnail…

Fork of Sankey Particles

This fork of the Sankey diagram animates particle flow along links to show energy transfer magnitudes. The visualization combines SVG for static nodes and links with a Canvas overlay for the moving particles, using d3.timer to update particle positions via path.getPointAtLength. It adapts Mike Bostock's d3.sankey layout, applying it to the energy.json dataset, with particle frequency and size scaled by link value.

Jul 3, 2023

Loading thumbnail…

Fork of SANKEY Experiment

A fork of a Sankey experiment visualizes the flow of notifications from "Total Notifications" through "Matched" or "Scrap" categories, using a custom D3.js plugin. The SVG diagram renders rectangular nodes connected by curved links, with colors and opacity indicating flow volume. It employs the `d3.sankey` layout function to compute node positions and link depths, while `d3.nest` organizes nodes by breadth for collision resolution. The code leverages D3's `d3.interpolateNumber` for link curvature and reads data from a static `sankeydata.json` file.

Jul 3, 2023