← back

nba-dataview — getting around

Three kinds of page, nested: the season holds thirty teams, a team holds its games. Everything is drawn in HTML and CSS — every control is a label wired to a hidden checkbox, every plot is positioned elements. No images anywhere. A handful of small inline scripts ride along for the things CSS cannot price: sorting tables, remembering your palette across pages, shareable links, hover readouts, and tours that walk the real pages. Strip the scripts and every page still renders whole and every filter still works — you would only lose the sorting, the memory and the tooltips.

The map

SEASON — all 30 teams, one row each
  ↓ click any tricode (ring, conference rows, or plot label)
TEAM — one team's whole season, game by game
  ↓ click a game column, then LINK
GAME — one game, both teams, play by play

Each level climbs back up and moves sideways from its top-left corner: ▴ or ^ goes up a level, ‹ › or ◂ ▸ step to the neighbour. HELP, INDEX, TOURS and SHOWCASE close every page; INDEX drops you back at the current season, TOURS is the player for the scripted walks, and SHOWCASE is the curated greatest hits — the games, teams and seasons every change to this site is judged against.

Season page

Navigating

Controls

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

Team page

Navigating

Tabs

GAMES card (filters)

PLAYERS card

PLOTS card

SHOW / SHRINK (main row, right side)

Plot label lines (under each 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).

Tracking and pinning

Box score

Game page

Navigating

All of it stacks in the top-left corner, five lines in the title block's own type, each line sitting on one of the header's own rows:

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: the header, the Scouting desk, the shared Box Score — one fold holding both teams' box scores, which open with it and still fold one at a time on their bare TRI Box Score lines — the shared Lineups, then Possessions, Rotations, the Shot Chart, and the ESPN recap closing the page. Every section loads closed, the closed titles keeping one shared pitch, so the page opens as a true folded index end to end. Every scroller on the page wears the teams' colours — a team's own table scrolls under its brand, the shared ones under both.

Header

Stacked on the page's right: the game id alone in dark grey on the top line, then the matchup, tip-off date and time, venue, and 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.

Scouting

The scout's desk opens the page: a welcome and a few words on how to read a game with these sections, then the team windows — two columns, the home team on the left and the away team on the right, nine games apiece: the four before this game, this game, and the four after — each with its date, matchup, score and margin, this game's own row standing brighter. Every other game in the columns is a link to its page; the season's edges leave a column short. This game's row and every row BEFORE it carry a Notes toggle — trailing the cells on both sides, under the team's tricode that heads the column, so each team's notes sit on its own side of the page — opening the desk's notes on that team's night in that game: why it won or lost, argued from the game's own numbers (the shooting and free-throw ledgers, the leaders, the period that decided it, the plus/minus poles). Each opened note is headed by its game, so several can stand at once; the rows after this game stay plain — a scout previews from what came before. The desk writes every game's notes itself; a few games carry notes written by hand. Where the desk has called a game in advance, an I Know toggle sits on the line under this game's row, under Notes on both sides, and opens its forecast — written before tip-off from the five games each side brought in, so the notes beside it can grade it; where no one has written one, the desk writes its own from the derived tables — each side's form, leaders, absentees and rest, then the call with a score. The rows AFTER this game carry their I Know in the Notes slot, so the forecasts for the games ahead sit where their notes will one day be. Every row of both windows carries an Available toggle beside its Notes slot, opening that team's availability board going into that game, headed by the game day and the team's rest: OUT (a rotation player who has missed two or more straight, since when, and whether he returns tonight), BACK (returned within the last five after such a streak, with his minutes since), NEW (five or more minutes over his season norm across the last five); "full strength" when there is nothing to report.

Box Score (one per team, inside the shared fold)

One fold owns the team's whole player story: the box score leads, and its rows ARE the player selector — no separate tab bar.

Lineups

The one section both teams share — the plain title reads AWY @ HOM Lineups (or vs at home), and the whole package folds on the first team's Lineups Box Score line: its ▾ closes both tables and the plot down to that one title.

Possessions

Derived rather than reported: the play-by-play walked end to end and cut into possessions. Points reconcile to the final score. A plot of the game's four ledgers leads the section, and the table of every trip follows it.

Rotations

The whole game on one plot: the home-perspective score margin runs through the middle as a step curve — the tie line dead centre, leads shaded in the leading team's colour — with one lane per player riding its banks, home above, away below, stacked outward in minutes order, names on the gutter in each player's colour (SGA, Wemby and friends go by the names people use). Quarter marks carry the period names and the wall-clock time.

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. One chip cycles the four COLOUR SCHEMES, always naming the next one: Classic → Grey → CVD → TMS → back. Classic is the opening view (ALL also lands there); Grey drops the floor to shades of grey, the away side light and the home side dark; CVD is the colour-blind-safe scheme — the teams always read Okabe-Ito blue vs orange whatever their brand colours, and every player is re-dealt a CVD-planned colour (cool shades for the blue side, warm for the orange, stepping through lightness — lightness survives colour blindness when hue does not); TMS is the TEAMS look, standing still: every mark keeps its team-colour body and wears its shooter's wedge, aimed down its own flight line to the basket — a pie of a third on a make, the ring's quarter arc on a miss, the stacks' wedges at the bottom — with the flight lines in the shooter's colour full-time. The Shot Box below keeps its player colours in every scheme, because the table is the legend. Your pick follows you to every page. Both teams share one floor because the feed plots every shot against the basket it attacked. Hover a shot for its readout — the player code in the shooter's own colour, the shot code M2 / X3, the distance, then the shot-clock numbers: AS M3 25  11 | 7 is eleven seconds into the shot clock with seven left before it would have sounded (24 at possession start, 14 again after an offensive rebound; other resets are not modelled). The same readout answers EVERY mark that is a shot — the floor dots, the baseline and free-throw stacks, the zone-mode beads, the histogram squares.

ESPN Update

The AP game recap, via ESPN — headline and story. It closes the page's app list.

Tours

Scripted walks of the site. A tour opens pages, glides to things, clicks and mouses over them, and pauses to let you look — with a ghost cursor playing the hand. TOURS sits beside HELP and INDEX in every page's corner.

Playing one

Writing one

Links and memory

Layout and coverage