Is a unit chart too playful for a scorecard?
Decision: Pending
ClassLink · Frost · Data viz sketches
Gauges, rings & donuts
Three ways to show "how much of the whole", with no ring, gauge or slice.
- Category
- Gauges, rings & donuts · 3 in the audit
- Representative
- Analytics+ Screen Time Health
- Sketches
- 10
- Data
- Mock; band counts adjusted
- Status
- Draft · For feedback
- Updated
- 2026-10-20
00 · Representative
Analytics+ Screen Time Health
- What shipsFour green outlined scorecards (94%, 94%, 89%, 78%) and a four-color bar of health bands.
- What worksThe percentage leads and the check gives a verdict.
- What to improveFour colors for four bands, one of them violet; the scorecards show a number but not where it sits on 0 to 100.
Sketch A · Bullet graph
Bars with a verdict
Screen Time Health ScorecardThis Week
286 students need attentionthis week
050100%
Learning Time94%On track
Balanced Sessions94%On track
Rested Learner89%On track
Uninterrupted Learning78%On track
Why
A percent of a whole is a length on a 0 to 100 scale, and a verdict in words.
Spec
- Bar on a shared 0 to 100 axis
- Alert first 18/700 · value 13/600 · verdict = success badge, icon + label
- First measure darkest
- Grows in once, when in view
Principle
A length beats an angle
Sketch B · Unit chart
A hundred students
Screen Time Health1 glyph = 1% of students
7,801students
Healthy 78
Monitor 11
At Risk 7
Needs Attention 4
Why
People can be counted; a slice cannot. 100 glyphs make a share something you can see.
Spec
- Glyph = 1%, colored by health band
- Status badges: success, info, warning, danger, icon + label beside each
- Counts on the brackets, 7,801 in the title
- Hover gives students and share
Principle
Show the count, not the slice
Sketch C · Layering
One bar, four groups of students
Screen Time HealthThis Week
Share of students
Healthy 6,110
Monitor 845
At Risk 560
Needs Attention 286
Students meeting each measure
Learning Time94%
Balanced Sessions94%
Rested Learner89%
Uninterrupted Learning78%
Why
The distribution and the four measures share one card, so each explains the other.
Spec
- One bar for all 7,801, direct labels
- Lollipop rows on a 0 to 100 line
- Status color only on health bands, always with the name
- No legend; labels sit on the marks
Principle
Layer, do not separate
Sketch D · Explore · Unit chart
Ten people, partly filled
Screen Time Health ScorecardThis Week
Learning Time94%On track
Balanced Sessions94%On track
Rested Learner89%On track
Uninterrupted Learning78%On track
10 people = 100% of students
Why
A percent becomes ten outlined people, filled to the value, with a verdict beside it.
Spec
- 10 outlines = 100%
- Fill clipped to the value (94% = 9.4)
- Verdict = success badge, icon + label
- Fill bounces in
Principle
A length beats an angle
Sketch E · Explore · Area
Health tiles
Screen Time Health
Tile area = students · 7,801 total
Why
Tiles sized by students show the whole at a glance, and a status badge carries the name.
Spec
- Tile area = students
- Status badge, icon + label, names each band
- Success, info, warning, danger
- Pop in once
Principle
Show the count, not the slice
Sketch E-image-1 · Explore · Area
Health tiles, silk
Screen Time Health
Tile area = students · 7,801 total
Healthy
6,110
Monitor
845
At Risk
560
Needs Attention · 286
Why
The silk becomes two soft, flat ribbons in the Success green. Where they cross the color lightens, and on hover they drift slowly with room to breathe below.
Spec
- Two plump ribbons, flat vector, no outlines; overlap reads lighter
- Rest: frame one, lighter ink
- Hover or focus: full ink, ribbons flow right to left on a slow loop
- Live text and tile area never change; upper-left stays clear
- Reduced motion: stays still, full ink on hover
Principle
Decoration that never carries data
Sketch E-image-2 · Explore · Area
Health tiles, paper cut
Screen Time Health
Tile area = students · 7,801 total
Healthy
6,110
Monitor
845
At Risk
560
Needs Attention · 286
Why
Layered paper hills give the same tiles a handmade feel, with the quantity still carried by area alone.
Spec
- Live text: name and count above the artwork
- Artwork clipped flush; upper-left kept quiet
- Tile area never changes on hover or focus
- Tooltip on hover and keyboard focus
- Bloom: image scales to 1.06 from the bottom-right and warms slightly, 240 ms ease-in-out, once; none with reduced motion
Principle
Decoration that never carries data
Sketch E-image-3 · Explore · Area
Health tiles
Screen Time Health
Tile area = students · 7,801 total
Healthy
6,110
Monitor
845
At Risk
560
Needs Attention · 286
Why
Each glyph is a student. A wave of them drifts past on hover, so the good news feels alive without moving a number.
Spec
- Student glyph in Success green; sizes vary, none overlap
- Rest: frame one, lighter ink
- Hover or focus: full ink, wave flows right to left on a loop
- Live text and tile area never change; upper-left stays clear
- Reduced motion: stays still, full ink on hover
Principle
Count people, not pixels
Sketch F · Explore · Unit chart
Battery cells
Screen Time Health ScorecardThis Week
Learning Time94%On track
Balanced Sessions94%On track
Rested Learner89%On track
Uninterrupted Learning78%On track
10 cells = 100% of students
Why
A charged battery is a percent anyone reads at a glance, and the verdict sits beside it.
Spec
- 10 cells = 100%, partial cell clipped
- Teal = students
- Verdict = success badge
- Cells fill once
Principle
A length beats an angle
Sketch G · Explore · Metaphor
Garden
Screen Time Health ScorecardThis Week
Learning Time
94%
On trackBalanced Sessions
94%
On trackRested Learner
89%
On trackUninterrupted Learning
78%
On trackTaller plant = more students meeting the measure
Why
Each measure is a plant: taller means more students are meeting it, and the flower is the number to watch.
Spec
- Stem height = percent
- Leaf pair per 20%
- Teal = students; verdict badge below
- Stems grow, flowers bloom once
Principle
Show the quantity
Rules in every sketch
One system
- Color
- Role hue · blue for quantity · status inks
- Status
- Icon + label badge, no dots, from the Frost status spec
- Type
- Frost v.03 roles: Inter, Barlow numerals 34+
- Form
- No donuts, pies or rings
- Motion
- Once, when fully in view
- KPI cards
- One horizontal, centered row
Feedback
Which one, and why?
Do health bands keep status colors?
Decision: Pending