Clyune Component GalleryChord Diagram · How it works & code
City flow matrix: arc length ∝ outflow, chord width ∝ bidirectional flow
Runtime logic
Visiting `/dataviz/chord`, DemoHost lazy-loads `demos/kits/kit-dataviz.js` (registry `mod: 'kit-dataviz'`) and calls `mount(host, { variant: 'chord' })`. mount resolves the variant to family `chord`; `withControls` builds the control panel (6 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; rng — Seeded deterministic PRNG (same seed, same result); hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.beginPath() — Starts a new path; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.quadraticCurveTo() — Adds a quadratic Bézier segment; ctx.closePath() — Closes the current sub-path; ctx.fill() — Fills the current path; ctx.stroke() — Strokes the current path; ctx.moveTo() — Moves the pen without drawing; ctx.arcTo() — Adds an arc using tangent lines; ctx.fillText() — Draws filled text; ctx.measureText() — Measures text width
Source code
frontend/src/demos/kits/kit-dataviz.js: FAM.chord (L345-L382)
Code walkthrough
L346-346: Control definitions (colour/speed/size/count/extras): Starting hue, Outer ring thickness, Number of Groups, Relationship density, Chord transparency, Monochrome. L347-347: Preset buttons: name → parameter overrides (6). L348-356: Info-panel content: live rows(v), formula, notes, params, steps. L357-381: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `beginPath`, `arc`, `quadraticCurveTo`, `closePath`, `fill`, `stroke`; math via `Math.round`, `Math.min`, `Math.atan2`, `Math.max`, `Math.cos`, `Math.sin`; returns readouts `n`, `nc`, `g`, `out`, `inn`, `top`, `share` … to the info panel.
Principles
Group arc length ∝ Total outflow of the group Σⱼ M[i][j] Width of string at the end of i ∝ M[i] [j], width at the end of j ∝ M[j] [i] Sine = between two arcs through the Bézier curve near the center Chord Diagram To display"Matrix"Type relationships, such as urban migration: M[i][j] Other Organiser i To the city j Number of persons. Every part of the outer circle Arc It's a group, and the longer the arc, the larger the volume of its outflows; every one of them inside Chord Connecting two groups, the width of both ends of the string represents the flow in both directions. The pointer rotates along the outer ring, highlighting the current grouping and all the strings associated with it, showing its outflow, inflow and maximum contact.