Clyune Component GalleryBox Plot · How it works & code
Q1 in real time / Median / Q3, 1.5 · IQR muster with an off-group point.
Runtime logic
Visiting `/dataviz/boxplot`, DemoHost lazy-loads `demos/kits/kit-dataviz.js` (registry `mod: 'kit-dataviz'`) and calls `mount(host, { variant: 'boxplot' })`. mount resolves the variant to family `boxplot`; `withControls` builds the control panel (5 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.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.stroke() — Strokes the current path; ctx.fillRect() — Fills a rectangle; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.fill() — Fills the current path; ctx.arcTo() — Adds an arc using tangent lines; ctx.closePath() — Closes the current sub-path; ctx.fillText() — Draws filled text; ctx.measureText() — Measures text width
Source code
frontend/src/demos/kits/kit-dataviz.js: FAM.boxplot (L384-L426)
Code walkthrough
L386-386: Control definitions (colour/speed/size/count/extras): Box color, Box width, Number of Groups, Sample per group, Dispersion, Outlier ratio. L387-387: Preset buttons: name → parameter overrides (5). L388-396: Info-panel content: live rows(v), formula, notes, params, steps. L397-425: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `beginPath`, `moveTo`, `lineTo`, `stroke`, `fillRect`, `arc` …; math via `Math.floor`, `Math.min`, `Math.round`, `Math.sin`; returns readouts `v`, `jx`, `g`, `n`, `name`, `pts` to the info panel.
Principles
After sorting: Q1 = 25% position, median = 50%, Q3 = 75% IQR = Q3 − Q1 Slash: [ Mindful] [Q1 − 1.5] · IQR, Q3 + 1.5 · IQR] Remoteest within; away from group Points Box Plot 用 5 Numbers summarize a set of data: minimum, minimum Q1、Median, Q3、Max. Middle Suitcase With half the data in the middle, the box has a median line, both sides Slash Extension"Normal range"As far as I can get, I'm going to draw the point out alone Offset 。 Compared to averages, the graph shows the centre of the data, the degree of dispersion and the presence of anomalies. The scattered point on the left is raw data (twisted horizontally, easily visible). The data are moving slowly and the quartiles are updated in real time; if the pointer is moved to the group, it shows its statistical volume.