nba-dataview — getting around

Three kinds of page, nested: the season holds thirty teams, a team holds its games. Everything is pure HTML and CSS — every control is a label wired to a hidden checkbox, every plot is drawn with positioned elements. No JavaScript, and no images, anywhere in the data pages.

The map

Each level climbs back up and moves sideways from its top-left corner: ▴ or ^ goes up a level, ‹ › or ◂ ▸ step to the neighbour. HELP and INDEX sit at the top of that same corner, above the arrows; INDEX drops you back at the current season.

Season page

Navigating

• Down to a team: every tricode is a link — in the teams ring, in the East/West rows, and on each plot's label lane.
• Sideways: ‹ 24/25 / › 24/25 in the top left circle through the published seasons.

Controls

The same plot management the team page uses (SHOW/SHRINK, chips, member toggles, sorts, packs), over the 30 teams instead of games.

• Teams ring / East–West rows — click a tricode to hide that team everywhere; NONE inverts (start empty, add one by one). Hiding teams lights SHOW, which restores them.
• Sorts order by displayed value (PF/TO/L sort by value, not rank).
• ←→ stacks visible teams keeping the current order.
• PM auto-ranges to the shown teams; conference masks re-scale every lane to the filtered field.

Team page

Navigating

• Down to a game: hover a game column to track it, click to pin it. The pinned game's info line — date, matchup, team-coloured score — appears centred on the SHOW/SHRINK row with a LINK to that game's page.
• Up: ^ 25/26 returns to the season page.
• Sideways: ‹ TRI / › TRI step to the previous / next team, alphabetical and circular.

Tabs

• GAMES — the filter card. PLOTS — the plot show/shrink card.

GAMES card (filters)

• Chips are dim until selected, lit while active.
• All — lights whenever any filter is active; click to clear them.
• 1:26 / 27:56 / 57:82 — season thirds (game-number ranges).
• Regular / Playoffs, East / West, OT / Clutch, W / L, H / A — one of each pair at a time; click the other to switch, All to clear.
• Filters hide game columns everywhere: plots, averages, the box. Scales stay season-wide except PM, which re-ranges to the shown games.

PLOTS card

• Colored plot names — click to shrink/show that plot (dim = shrunk).
• SHOW / SHRINK — copies of the main controls (below).

SHOW / SHRINK (main row, right side)

• SHRINK — shuts every plot. Your individually closed plots are remembered through it.
• First SHOW after a SHRINK — restores exactly what that SHRINK closed (your own closures stay closed).
• Second SHOW — shows everything (also the full reset: clears member toggles and, on the season page, hidden teams).
• After SHRINK, a PLOTS-card chip peeks that one plot open; its ✕ re-shuts it.

Plot label lines (under each plot)

• Single stats (PF, TO, BLK, STL, AST, PM) — the label itself closes the plot. ↑↓ cycles none → sort-up → sort-down by that stat. ✕ closes. ←→ (appears under a filter) stacks the shown games against an edge, keeping the current order.
• Groups (DR OR, FT% FTA FTM, 3P% …, 2P% …) — each member name toggles that member: dimmed label, its bars and pole chips drop from the plot. Each member has its own ↑↓ sorting the lane by that member's values. ✕ closes the whole plot.

The W/L band (bottom)

One shared plot area, three rows: W/L result on top (green/red), opponent color mid, B2B bottom (venue-pair colors: yellow HH, pink mixed, red AA; creme = 2D rest; nothing = ordinary gap).

• W/L label, then four color-coded sorts that reorder all three rows together: green by result, the team color by home/away, gold by the B2B value, white by opponent tricode.
• ←→ (under a filter) stacks the band, keeping the active sort.
• The readout shows the tracked game: W/L, H/A, opponent, B2B, each in its color. ✕ shrinks the band.

Tracking and pinning

• Hovering a game column raises the pole: a vertical tracking line through every plot at that game's date (grey on hover, white when pinned).
• The flags sit at each plot's pole tip: left of the pole is that game's value for the stat, right of it the value's rank among the season's games — rank 1 is always best (most assists, but fewest fouls/turnovers). Group plots stack one value|rank row per member, in the member's color.
• The date hat (mm-dd) rides just above the hovered plot's flags.
• PINNED (left) releases the pinned game. Hovering another game temporarily takes over the readouts; box-score rows track and snap the same way.

Box score

• 10 / 25 / ALL / HIDE — visible rows.
• Filtered views add a status line: filter names, game count and the W-L record, then that view's averages.
• Per-opponent rows: vs TRI, count, record, averages.
• Hovering a box column stripes the matching plot; hovering a row tracks its game.

Game page

Navigating

All of it stacks in the top-left corner, five lines:

• Lines 1–2 — the first team's ◂ previous and ▸ next game, each labelled with matchup and date.
• Lines 3–4 — the same pair for the second team. So you can follow either side of this matchup forward or back, and switch which team you're chasing at any game.
• Line 5 — ▴ TRI goes up to the team page this game belongs to.
• Games outside the published set 404 — the link is still there, waiting for that page to exist.

Reading the page

It opens as a folded index — a stack of title lines — so you choose what to look at. Every title with a ▸ opens and closes on click; ▾ means open. A folded section shows nothing but its title, and its switches go with it. The order mirrors around the Lineups section: the first team's karma, box score and players run down to it, then the second team's run back out. Possessions and the Shot Chart close the page.

Header

Matchup, tip-off date and time, venue, game id, then the linescore — team names in their colours, each quarter green for the team that won it and red for the one that lost, the final in full strength.

ESPN Update

The AP game recap, via ESPN — headline and story.

Karma panel (one per team)

The game from that team's perspective: every event weighted and summed in 20-second buckets, drawn as stacked bars — the team's good events (made shots by value, rebounds, assists, blocks, steals) climb up, the opponent's hang down, each tipped with the other side's mistakes in a dimmed shade.

• Lines: the score margin from this team's view (olive, left PM scale) and both teams' running scores in their brand colors (right Score scale).
• Stint lanes: one translucent row per player in that player's chart color, spanning the minutes they were on court. Hover a lane for that stint's box score line.
• No Events cycles the event layer: player Events puts each event's letter on its player's lane (1 2 3 made shots, R A B S rebound/assist/block/steal, red for misses, fouls, turnovers), PM Events stacks a minute's events above and below the zero line, total Events packs each player's events left as a tally row. Click again to return to none.
• Hide Stints, Hide PM, Hide Karma, Hide Scores — each drops its layer (a scale leaves with its line), and they combine freely.

Box score (one per team)

• Click the title to fold the table away.
• Show Per 32 swaps every counting stat for its per-32-minutes rate; click again for per-game.
• Hovering a player's row lights that player's stints in the karma panel above.
• Column bests are goldenrod, column worsts red.

Players

Each team's players as one plot area with a tab bar of names, every name in that player's chart color.

• Tabs multi-select: click a name to add that player's plot, click again to drop it. Selected plots overlay in the same frame, translucent, so you can read them against each other.
• Every chart runs a fixed +15 / -15 scale so the shapes compare directly. A player's on-court stretches are tinted in their color; the line is their running plus/minus, with entry and exit dots and their event letters along the way.
• The stack above the plot lists the selected players' box score lines. Mouse anywhere over the plot and every listed player updates to their stats for the stint you are pointing at — players who were on the bench show - - -.

Lineups

The one section both teams share, titled AWY @ HOM Lineups (or vs at home).

• Both teams' five-man units on a single plus/minus axis: the translucent bands are each unit's stint (first team's tinting the top half, second team's the bottom), the markers each stint's plus/minus — diamonds for the first team, circles for the second — and the olive line is the game's score margin.
• Hover a band for that lineup's full readout: minutes and stats, who was on the floor, and who entered or left since the unit's last appearance — the opening stint lists the starting five as in. Click to pin it; click again to release. One lineup per team can be pinned at once.
• A lineup box score sits above and below the plot, each folding on its title with a Show Per 8 rate switch. Hovering a table row highlights that unit's bands in the plot, and hovering a band highlights its row. Hovering a lineup's code drops down the five player names.

Possessions

Derived rather than reported: the play-by-play walked end to end and cut into possessions. Points reconcile to the final score.

• Q1 … OT2 ALL — one period at a time, or ALL for the whole game with each period headed by its own name.
• The columns read left to right as a sentence: # and Team whose ball it was, Start the period and game clock it began on, Dur how long it lasted, then Players who was involved, Events what they did, and Offset when — whole seconds from the start of the possession to each event, one number per event in the Events order.
• A shot code carries where it came from: M3.LW.25 is a made three from the left wing, 25 feet out; X2.RM.01 a missed two at the rim. The distance is computed from the shot's own coordinates.
• Players are two initials; hover one for the full name. A tricode in that column means the team itself rather than a person, and -- means the feed named nobody.
• A value too long for its column wraps and carries on at that same column, so a busy possession can be two lines deep.
• Who What Where When — four legends on the title line: the initials expanded for this game, the event codes, the location codes, and what Offset means. Each opens over the table without moving it.

Shot Chart

The last section: a half court drawn to the rule book, with both teams' field goals on it — each shot a line from where it was launched to the rim, ending in a dot that is solid for a make and an open ring for a miss, both in the team's colour. The Colors switch swaps in the shooter-identity marks: the SHOOTER's own chart colour — the one the Shot Box names and Player Filters wear — at a make's centre and on a miss's ring over the team fill. Both teams share one floor because the feed plots every shot against the basket it attacked. Hover a shot for its line in the possessions vocabulary — initials, M2 / X3, distance in feet — followed by the possession clocks: in 8 · left 16 is eight seconds into the possession, sixteen before the shot clock would have sounded (24 at possession start, 14 again after an offensive rebound; other resets are not modelled).

• Q1 … ALL — the section opens on ALL, the whole game; every layer below — floor, stacks, Shot Box — swaps with the tab.
• The filter strip: both tricodes, Made / Miss, 2 / 3, Lines (the flight lines), Zones (the named areas), Colors (the shooter-identity marks), 2x (grows the court), FT (the corner stacks and the box's FT numbers) — then the four zone modes and Scale, then ALL, which puts every filter and mode back at once, and Demo, which runs the tour. Dim means subtracted.
• Zone modes — CLK RNG TTS TTV, select one (they are one radio group; ALL is the way back to the shots). Each replaces the floor with beads on five radial lines, one per sector: CLK in game order at a fixed step (filtered beads collapse and the string closes ranks), RNG at the shot's TRUE distance on the court's own scale, TTS seconds into the shot clock, TTV seconds left before the violation. Scale adds concentric rings serving all five rays — feet for RNG, seconds to the 24s ring for the clocks, every fifth bead for CLK.
• RM shots live at the baseline, not at the rim: an 8-wide stack per team, first row on the baseline, the pair centred on it — away team left — in game order with the same make/miss marks and the full hover readout. The rim area itself stays clean.
• Free throws stack in the court's upper corners — away team left, home right growing inward — one circle per throw in game order, wrapping every 7, with a thin seam between periods on the ALL stack. Filtered circles collapse and the grid re-stacks, always 7 wide. Hover a circle for its initials, M1 / X1 and period.
• Player Filters and Lineup Filters, off the court's right shoulder: every shooter in their own chart colour, and every lineup with five-plus minutes as the Lineups section's own code (hover a code for who is in it). Each name or code hides/shows everything that player or unit put up. Clear blacks the whole floor from any state — it only clears, never shows — and ALL brings everything back.
• Sort, under the court: every shot as a dot in a wrapping row that runs to the right edge, ordered by CLK RNG TTS TTV — game time, distance, or either clock. Every filter reaches the dots and the row closes its gaps.
• The Shot Box — the per-player shooting table, LIVE. One per team: PTS, FG 3P FT as makes-attempts, then the six segments and the three two-point bands. Every number is a counter, so EVERY filter re-counts it — areas, values, results, lineups — a filtered player's whole row leaves, and Clear reads zeros; zero attempts rest at 0-0. Names are in player colours and are themselves the player filters; the location heads carry the dotted rule and ARE the area filters; FG, 3P and FT are filters too — FG's head is its only switch and takes every field goal at once, leaving a free-throw page, while 3P and FT share the strip's 3 and FT switches, so head and chip dim together and FT off empties the FT column and its points; the 16+ head takes every shot from 16 feet out, threes included (the threes still keep their own counts out of the band columns); goldenrod marks the period's best per column, red its worst among those who tried, re-ranked per period tab (filters re-count the numbers beneath standing marks). The team totals row closes each table, and MIN and plus-minus are deliberately absent — they are not shot data and cannot re-count.
• Demo, at the strip's far end, runs a looping 48-second tour: a ghost cursor, a hover readout, the ray glow, the CLK and RNG layers, the free-throw pulse and the blackout, narrated by captions. It only shadows the controls — switching it off restores the page instantly.

Layout and coverage

• The season and team pages are frozen at a 900px design canvas — identical at every window size (small windows scroll). Game pages scale with the window.
• Every season and team page is here in full, with data and links for the whole season. Game pages are a sample — each team's first five — so a link to a game outside that set 404s.