Every chart the 6-8 Sports platform needs, one system, light and dark.
The 68 UI Data Viz Atlas renders the water polo platform's charting language as real, interactive React components: 25 live charts and widgets, 20 proposed reference boards, one token set, matched to the live scoreboard at scores.6-8sports.com and extended into 3D, geographic, and on-air surfaces.
Live componenta real interactive component: hover, focus, and click it.
Proposed componenta reference artboard on the roadmap; the full family lives in the canvas.
45 examples, drawn from 12 chart families
The atlas is organized by the question each chart answers, not by library. These are the 12 families the platform draws from.
Comparison
Bar, diverging bar, 3D bar
Framing
Bullet, radial gauge, progress ring
Ranking
Ranked bar list, leaderboard
Distribution
Histogram, box plot, beeswarm
Trend
Line, area, win probability
Part-to-whole
Donut, treemap, waffle
Hierarchy
Treemap, bracket
Correlation
Scatter, bubble, heatmap
Spatial
Shot map, 3D shot map, goal cage
Flow
Sankey, flow map
Network
Passing network
Text
Play-by-play, commentator feed
Atlas 01 / 07
Theme: one token set, two stages
Every surface resolves from a single token layer, so the same components render as the light scoreboard by day and the navy broadcast stage on air. Toggle the theme in the nav and watch the page follow.
Which shooters put up the most goals this tournament?
Live componentBarChart
Coach: which quarters did we win, and which did we drop?
Live componentRadarChart
Scout: is this a two-way player or a one-trick specialist?
Live componentRankedBarList
1
KovacWestgate11 G+2
2
BauerWestgate8 G
3
MarlowSouthport6 G+1
4
PetrovWestgate5 G+1
GM: rank my contributors, with the movers flagged.
Live componentLeaderboard
Tournament scorers
#AthleteGoals
1
KovacWGB
11
2
BauerWGB
8
3
MarlowSPT
6
Broadcast: who leads the tournament right now?
Proposed component
Fan: how did the standings shuffle week to week?
Atlas 03 / 07
Trend and distribution
Form over a season and the spread underneath a single number. A line for momentum, a win-probability read, a histogram, and a box plot that separates a hot night from a real profile.
Coach: how close are our special-teams rates to target?
Live componentRadialGauge
0%Power-play conversion
Broadcast: what is the power-play conversion right now?
Live componentBulletChart
Power-play %
0%113%
Save rate
0%80%
Sprints won
0117%
04080
Coach: which rates cleared their target and which missed?
Live componentScatterPlot
Analyst: who shoots a lot, and who shoots well?
Live componentBubbleChart
Goals
GM: three stats at once, who carries the load?
Live componentHeatmap
LowHigh1-4 G
Coach: which team owned which quarter?
Proposed component
GM: how is scoring shared across the roster?
Proposed component
Analyst: how does a possession flow to a shot?
Proposed component
Fan: what is the path to the final?
Atlas 05 / 07
Spatial, 3D and broadcast HUD
Where the shots came from and where they finished, plus the depth vocabulary the broadcast layer draws from. The 3D marks are CSS depth, not a game engine, so they stay light and ship everywhere.
Regional CEO: where are our subscribers, and where can I drill in?
Proposed component
Growth: show the worldwide footprint on a sphere.
Proposed component
League: how do players move between clubs and regions?
Atlas 07 / 07
Use-case matrix and research
The atlas is grounded, not decorative: a use-case matrix ties every chart to a persona question, and one interaction grammar runs under all of them. These artboards are the reference boards behind the components above.
