Which would replace the heatmap?
Decision: Pending
ClassLink · Frost · Data viz sketches
Heatmaps
Three ways to read login rates for 10 schools across a week.
- Category
- Heatmaps · 5 in the audit
- Representative
- Analytics+ School Login Heatmap
- Sketches
- 10
- Data
- Mock, from screenshot
- Status
- Draft · For feedback
- Updated
- 2026-10-20
00 · Representative
Analytics+ School Login Heatmap
- What shipsA blue ramp with the percent in every cell, sortable columns and a hatched zero.
- What worksThe number is in the cell, so color never works alone.
- What to improveSeventy cells of equal weight make everything loud; rows are alphabetical, so the busiest schools are scattered.
Sketch A · Color + number
Sorted and summarized
School Login HeatmapThis Week
SchoolSunMonTueWedThuFriSatWeek average
Lincoln Elementary6%85%90%21%51%81%0%48%
Jackson Elementary12%85%57%83%41%24%0%43%
Truman Elementary0%36%73%44%80%49%0%40%
Madison Middle School12%51%22%64%41%85%3%40%
Kennedy Middle School4%16%70%43%81%49%0%38%
Roosevelt Elementary3%65%88%53%18%15%5%35%
Jefferson High School0%95%29%29%41%38%11%35%
Washington Middle School6%20%23%88%52%47%0%34%
Adams High School11%86%35%15%30%55%0%33%
Polk High School10%34%23%32%29%20%7%22%
Why
The approved look, with rows ranked and a week average, so the answer is at the top.
Spec
- Ramp the approved Frost blue, 5 steps
- Rows sorted by week average
- Peak cell outlined; zero hatched
- Average bar closes each row
Principle
Order the rows
Sketch B · Position over color
Strips, not colors
School Login HeatmapThis Week
SchoolSunMonTueWedThuFriSat
Lincoln Elementary
Jefferson High School
Washington Middle School
Roosevelt Elementary
Adams High School
Kennedy Middle School
Jackson Elementary
Madison Middle School
Truman Elementary
Polk High School
Every strip uses the same 0 to 100% scale; the busiest day is darkest.
Why
Length on a common scale is read more accurately than shade.
Spec
- Strip = 7 columns, common 0 to 100 scale
- Busiest day darkest per school
- No legend needed
- Hover gives school, day, rate
Principle
Position beats color
Sketch C · Less ink
Only what stands out
School Login HeatmapThis Week
Dot area = login rate. Dark and labeled = 80% or more.
Why
Most cells are ordinary. Drawing only the exceptions makes the pattern visible.
Spec
- Dot area = login rate, one blue
- Dark and labeled at 80% or more
- Light dots carry no label
- Weekend reads as the empty edge
Principle
Erase non-data ink
Sketch D · Explore · Color + size
Bubble grid
School Login HeatmapBubble size and shade = % of logins
Why
Size and shade say the same thing twice, so busy days jump out even for color-blind readers.
Spec
- Radius and shade = % of logins
- Sorted by week average
- Bounce in by row
- Hover gives exact %
Principle
Redundant encoding
Sketch E · Explore · Layering
Ridgeline waves
School Login HeatmapTop 6 schools · peak labeled
Why
Overlapping waves make each school a shape you recognize, with the peak day labeled.
Spec
- One wave per school, top 6
- Peak day labeled
- Gradient single series only
- Draws once, in order
Principle
Layering and separation
Sketch F · Explore · Color + number
Honeycomb
School Login HeatmapDarker = more logins · numbers at 80% or more
Why
Hexagons tile like a honeycomb, so the busy cells cluster and the rhythm of the week shows.
Spec
- Shade = % of logins, Frost ramp
- Numbers only at 80% or more
- Empty = dashed outline
- Pop in by row
Principle
Layering and separation
Sketch G · Explore · Small multiples
Daisies
School Login HeatmapThis Week
Lincoln Elementary
Peak Tue 90% · week average 48%
Jackson Elementary
Peak Mon 85% · week average 43%
Truman Elementary
Peak Thu 80% · week average 40%
Madison Middle School
Peak Fri 85% · week average 40%
Kennedy Middle School
Peak Thu 81% · week average 38%
Roosevelt Elementary
Peak Tue 88% · week average 35%
Petals run Sun to Sat clockwise from the top · petal length and shade = % of logins · center = week average
Why
Every school is a flower: the longest petal is its busiest day, so schools are told apart by shape.
Spec
- 7 round petals, Sun to Sat clockwise, none overlap
- Length and shade = % of logins
- Center = week average; peak day named
- Petals bloom once
Principle
Small multiples
Sketch H · Explore · Comparison
Top school each day
Top school each dayThis Week
Sun
12%
Jackson Elementary
Next: Madison 12%
Mon
95%
Jefferson High School
Next: Adams 86%
Tue
90%
Lincoln Elementary
Next: Roosevelt 88%
Wed
88%
Washington Middle School
Next: Jackson 83%
Thu
81%
Kennedy Middle School
Next: Truman 80%
Fri
85%
Madison Middle School
Next: Lincoln 81%
Sat
11%
Jefferson High School
Next: Polk 7%
Star = the school with the highest login rate that day · ring = best day of the week
Why
Seven cards answer "who is busiest today?" at a glance, with the runner-up as a quiet note.
Spec
- Star = top school that day
- Number 28/700 = its login rate
- Ring = best day of the week
- Roll in once
Principle
Show comparisons
Sketch I · Explore · Color + number
Candy strips
School Login HeatmapStar + number = the school's busiest day
Why
The same heatmap as a row of friendly capsules, with a star and number only on each school's best day.
Spec
- Capsule shade = % of logins
- Star + number on the busiest day
- Empty = dashed outline
- Pop in by row
Principle
Layering and separation
Sketch J · Explore · Small multiples
School tiles
School Login HeatmapTile area = week total · dots Sun to Sat, darkest = busiest day
Why
Big schools get big tiles, and a seven-dot strip in each shows the shape of its week.
Spec
- Tile area = week total
- Dots Sun to Sat, darkest = busiest
- Busiest day in words
- Pop in once
Principle
Small multiples
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?
Keep the heatmap as a toggle?
Decision: Pending