Shuttle Trajectory

Preview in your theme

ready

Shuttle trajectory

D. Wardani · Women's singles · semi-final

25flights charted · 5 stroke types · median arc + p25–p75 band each

Clear · n=7Drop · n=6Smash · n=6Drive · n=5Net shot · n=1

The court from the BWF book, seen from the side: 13.4 m end to end with the net at the centre, drawn 1.55 m tall — its height at the posts; the cord sags to 1.52 m at the centre strap, which one elevation cannot show. The floor is ticked every metre, with the opponent's short service line at 1.98 m and the doubles long service line at 5.94 m past the net. Each stroke's arc is the parabola through its median contact, apex and landing; the wash spans the arcs built from the quartile apex and landing, and every flight leaves its landing mark on the floor. An arc whose numbers imply a flight through the net is lifted just enough to skim the cord — the shuttle landed beyond it, so it crossed. Point at an arc — or press Tab and walk the strokes with the arrow keys — to read one signature.

1 row dropped: a landing at or behind the net — the shuttle never crossed, so there is no flight to draw. 1 apex arrived below its own contact height and was raised to it.

Shuttle trajectory: D. Wardani, Women's singles · semi-final. The full 13.4 m court seen from the side — the hitter's half on the left, the net at the centre drawn 1.55 m tall (its height at the posts; the cord sags to 1.52 m at the centre). 25 flights across 5 stroke types, each aggregated into a median arc with a band between its quartile arcs; landing marks sit on the floor at every flight's depth. Clear: 7 — apex 6.3 m, landing 6.2 m past the net. Drop: 6 — apex 3.2 m, landing 1.6 m past the net. Smash: 6 — apex 2.9 m, landing 4.5 m past the net. Drive: 5 — apex 1.9 m, landing 5.1 m past the net. Net shot: 1 — apex 1.9 m, landing 0.8 m past the net. Exact figures follow in the data table.

Every stroke type in its fixed order, with how many flights it aggregates, the median contact point, the median apex as drawn and the median landing depth past the net.
Stroke	Flights	Median contact	Median apex	Median landing
Clear	7	4.8 m behind the net at 2.65 m high	6.3 m	6.2 m past the net
Drop	6	4.65 m behind the net at 2.5 m high	3.15 m	1.6 m past the net
Smash	6	3.7 m behind the net at 2.93 m high	2.93 m	4.5 m past the net
Drive	5	3 m behind the net at 1.5 m high	1.85 m	5.1 m past the net
Net shot	1	1.1 m behind the net at 0.9 m high	1.85 m	0.8 m past the net

empty

Shuttle trajectory

D. Wardani · Women's singles · semi-final

No rallies tracked yet

Each stroke type draws its flight signature here — a median arc from contact over the net to landing, with a band for the spread.

Shuttle trajectory

D. Wardani · Women's singles · semi-final

error

Shuttle trajectory

D. Wardani · Women's singles · semi-final

Couldn't load these trajectories

The data source didn't respond.

Loading preview…

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import type {
  ChartShuttleTrajectoryData,
  ChartShuttleTrajectoryShot,
  ChartShuttleTrajectoryStroke,
} from "./chart-shuttle-trajectory.contract"

export interface ChartShuttleTrajectoryProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
    ChartShuttleTrajectoryData {

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/chart-shuttle-trajectory.json

Prompt

Build a React + TypeScript + Tailwind "ChartShuttleTrajectory" chart — a
badminton flight-signature side elevation in hand-rolled SVG (no chart
library), with zod.

Contract
- A zod schema is the single source of truth:
  { status: "loading" | "empty" | "error" | "ready";
    shots: { type: "clear" | "drop" | "smash" | "drive" | "net";
             contactDepth: 0..6.7 (metres behind the net on the hitter's
             side — rear-court strokes leave from around 4.5);
             contactHeight: metres above the floor at contact;
             apexHeight: the flight's highest point in metres;
             landingDepth: metres past the net on the opponent's side }[];
    meta: { player: string; context?: string } }.
- Props = z.infer of the schema plus title?, onRetry?, emptyState? and the
  native div props, spread on the root. forwardRef. No hand-written parallel
  interface.

Court geometry (from the BWF book, not from pixels)
- The court is 13.40 m long, 6.70 m each side of the net. The elevation draws
  the whole court, hitter's half on the left (negative x), one shared scale
  constant on both axes so the picture is never stretched.
- The net is a band at centre drawn 1.55 m tall — its height at the posts;
  the cord sags to 1.524 m at the centre strap, which the footnote states
  because one elevation cannot draw two cords. The tape reads stronger than
  the paint.
- The floor line carries a depth tick every metre; the opponent's short
  service line (1.98 m past the net) and the doubles long service line
  (5.94 m — 0.76 m inside the baseline) get labelled dotted risers. A height
  axis in metres stands on the left.

Behavior
- Four first-class branches in one bg-card panel: loading (stat line, the
  court frame with its net, pulsing marks), empty (faint side-on court +
  copy, reused when a ready payload has nothing drawable), error (message +
  a "Try again" button only when onRetry exists), ready.
- Ingest is a pure exported function that groups flights by stroke type in a
  fixed order and reports everything it cannot honour: a non-finite number
  or non-positive contact height is unreadable (dropped, counted); a landing
  depth at or behind the net means the shuttle never crossed, so there is no
  arc to draw (dropped by reason, counted); an apex below its own contact
  height is impossible for a falling shuttle (raised to the contact height,
  counted). Never drop or repair silently.
- Each type with two or more flights draws a median arc — the parabola
  through its median contact point, median apex and median landing — plus a
  translucent band between the arcs built from the p25 and p75 apex and
  landing (the band's edges share the median contact: quartiles describe how
  the flights spread, not where the player stood). A type with one flight
  draws its single raw arc thinner, tagged "n=1", with no band.
- The parabola maths is exact, not sampled: solve y = a(x − h)² + k through
  the contact and the landing with apex height k, then emit one quadratic
  Bézier whose control point is the tangent intersection (control x is the
  endpoint midpoint — a property of parabolas). Clamp k to at least the
  contact height; if the implied path crosses the net plane below the cord,
  lift k the minimum that clears it (bracket by doubling, then bisect) and
  flag the lift — the shuttle landed past the net, so it crossed.
- Every flight leaves a landing mark on the floor line in its type's shape,
  so the spread of landings reads even where the band is thin.
- Hover an arc, its band or a legend chip → that stroke emphasised, the rest
  dimmed (guarded pointer-leave so crossing arcs never blinks), a tooltip at
  the median apex with n, median apex and median landing, flipping below the
  apex near the frame top and sliding near the baselines. Keyboard: the svg
  is one role="listbox" tab stop whose options are the stroke types; arrow
  keys walk them in fixed order, Home/End jump, aria-activedescendant
  follows, and only :focus-visible arms the cursor so a mouse click doesn't
  pin the tooltip. The tooltip is aria-hidden — each type's aria-label
  already speaks a full sentence — and an sr-only summary + table repeat
  every aggregate.

Rendering & styling
- Semantic tokens only. Identity is double-encoded and never re-assigned:
  clear = var(--chart-1) solid, drop = var(--chart-2) dashed, smash =
  var(--chart-3) dotted, drive = var(--chart-4) dash-dot, net shot =
  var(--chart-5) fine-dot — five distinct dash patterns carry the stroke on
  their own for a greyscale or colour-blind reader, and the landing shapes
  (circle, triangle, square, diamond, inverted triangle) repeat the identity
  on the floor.
- Bands are the type token at fillOpacity 0.13 with hairline quartile edges;
  landing marks and the median contact dot wear a var(--card) ring so piles
  stay separable. Court paint: gridlines stroke-border, floor and ticks
  stroke-muted-foreground, tape stroke-foreground/70, net fill-muted. Every
  label wears paintOrder="stroke" with a var(--card) halo so an arc can never
  blot it out.
- Panel rounded-xl border bg-card p-4, numbers tabular-nums, cn() merges
  className, root spreads remaining props and carries data-status; emphasis
  transitions respect prefers-reduced-motion; the court group is aria-hidden.

Customization levers
- The frame's ceiling follows the tallest drawn apex (never below a stated
  minimum), so towering clears get sky without code changes; adjust the
  minimum for a card that only ever shows flat strokes.
- CLEAR_MARGIN is how far above the cord a lifted arc must pass; NET_W is
  the drawn width of the net band — a drawing device, since a net has no
  depth.
- TYPE_INK / TYPE_DASH / the landing-glyph switch are the only home of the
  stroke identity — add a sixth stroke (lift, push) by extending the enum
  and those three maps, and ingest, legend and table follow.
- Quartiles are two calls to one quantileSorted function; swap p25/p75 for
  p10/p90 to widen the band's story.
- Drop the landing marks for a cleaner arc card, or the bands for a
  median-only comparison — each reads from the same ingest.
- Sport swap: the same skeleton reads any "flight over a barrier" story —
  volleyball serves over the net, football free kicks over a wall — by
  renaming the strokes and swapping the four geometry constants.

Concepts

Arcs are aggregates, not spaghetti — every flight of a stroke type folds into one median arc with a quartile band, so five signatures stay readable where thirty raw arcs would weave into noise; a type with a single flight is drawn raw, thinner and tagged "n=1", because a median of one would be a costume.
The parabola is exact — the arc is solved through contact, apex and landing as y = a(x − h)² + k and emitted as a single quadratic Bézier whose control point is the tangents' intersection (a parabola property: its x is the endpoint midpoint), so the drawn apex is the stated apex, never a sampling artefact.
Physics is a rendering guard — a shuttle that landed past the net crossed it, so an arc whose supplied numbers imply a flight through the mesh is lifted the minimum that clears the cord, and an apex below its own contact height is raised to it; both repairs are counted and printed, never silently obeyed or hidden.
Dash is the identity's second channel — on a chart whose marks are lines, colour alone dies in greyscale, so each stroke owns a distinct dash pattern and a distinct landing shape, assigned in a fixed order that never re-shuffles when a type is absent.
The court is drawn from the book — 13.40 m end to end, the net band 1.55 m at the posts (the 1.524 m centre sag stated in the footnote, since one elevation can draw only one cord), the short service line at 1.98 m and the doubles long service line at 5.94 m — so "died before the service line" is read against the line itself, on one shared scale that never stretches the picture.
One tab stop, every stroke reachable — the svg is a single listbox whose options are the stroke types; arrow keys walk them in fixed order with aria-activedescendant following the emphasis, and only :focus-visible arms the cursor so a mouse click never pins a tooltip nobody asked for.

Shuttle Trajectory

Shuttle trajectory

Shuttle trajectory

Shuttle trajectory

Shuttle trajectory

Installation

Prompt

Concepts

On This Page

Shuttle trajectory

Shuttle trajectory

Shuttle trajectory

Shuttle trajectory