ClassLink · Frost · Data viz sketches

Bar & column charts

Three ways to draw the same failed-login data, from one chart to a chart and table in one.

Category
Bar & column charts · 10 in the audit
Representative
Analytics+ Failed Logins
Sketches
10
Data
Mock; error split invented
Status
Draft · For feedback
Updated
2026-10-20

00 · Representative

Analytics+ Failed Logins

Current screen
  • What shipsOne KPI card, a 12-month column chart and a 10-row table of failures.
  • What worksSingle series on a zero baseline reads quickly.
  • What to improveEvery column is the same dark blue so nothing leads, and the KPI (23,996 this month) does not reconcile with a chart that peaks near 1,000.

Sketch A · Data-ink

Quiet columns

Failed Logins
23,996
This Month
Peak Month
February
1,000 failed logins
Monthly Median
495
Last 12 months
Failed LoginsLast 12 Months
01,000Median 495NovDecJan1,000FebMarAprMayJunJulAugSep590Oct

Why

Light columns let the one that matters, February, speak first.

Spec

  • Peak darkest, now mid, rest light
  • Range frame: only 0 and 1,000 on the axis
  • Median as a dashed reference line
  • Labels on the marks, no gridlines

Principle

Maximize data-ink

Sketch B · Small multiples

One panel per cause

Too Many Attempts
12,480
This year
NovDecJan520FebMarAprMayJunJulAugSep307Oct
Invalid Username or Password
8,940
This year
NovDecJan370FebMarAprMayJunJulAugSep218Oct
Other
2,576
This year
NovDecJan110FebMarAprMayJunJulAugSep65Oct
Same scale on every panel, so heights compare.

Why

Splitting by error type shows which cause drives the spike.

Spec

  • Three panels, one blue, same scale
  • Total 28/700 above each strip
  • Peak and now labeled on each
  • Hover names month and count

Principle

Small multiples, same scale

Sketch C · Density

Ranked bars with a trace

Failed Logins by ErrorLast 12 Months
Error typeShareFailed%12 months
Too Many Attempts12,48052%
Invalid Username or Password8,94037%
Other2,57611%

Why

One row gives rank, size, share and trend, so no second chart is needed.

Spec

  • Bar = failed logins, largest darkest
  • Share as a number, not a slice
  • 12-month trace beside every row
  • Replaces the chart-plus-legend

Principle

High density, small footprint

Sketch D · Explore · Data-ink

Lollipops with a lock

Failed Logins
23,996
This Month
Peak Month
February
1,000 failed logins
Failed LoginsLast 12 Months
NovDecJan1,000 · FebFebMarAprMayJunJulAugSep590Oct

Why

A stem and a dot use far less ink than a column, and the lock marks the month that mattered.

Spec

  • Stem 3px, dot 8px, peak 11px
  • Lock icon on the peak
  • KPI row centered above
  • Dots bounce in

Principle

Maximize data-ink

Sketch E · Explore · Unit chart

Stacks of locks

Failed Logins by ErrorLast 12 Months
NovDecJanFebFeb 1,000MarAprMayJunJulAugSepOct
Too Many AttemptsInvalid Username or PasswordOther1 lock = 100 failed logins

Why

Counting locks is more human than reading an axis, and the color shows which error caused them.

Spec

  • 1 lock = 100 failed logins
  • Color = error type, named in the key
  • Locks drop in, month by month
  • Hover gives the month total

Principle

Show the count

Sketch F · Explore · Data-ink

Pencil columns

Failed Logins
23,996
This Month
Peak Month
February
1,000 failed logins
Monthly Median
495
Last 12 months
Failed LoginsLast 12 Months
NovDecJan1,000FebMarAprMayJunJulAugSep590Oct

Why

Pencils say school and keep the data-ink low: the longest one is the month that mattered.

Spec

  • Length = failed logins
  • Peak darkest, now azure
  • Hero 54/600 in the first card
  • Pencils grow once

Principle

Maximize data-ink

Sketch G · Explore · Unit chart

One hundred squares

Failed Logins by Error1 square = 1% of failed logins
Too Many Attempts · 12,480Invalid Username or Password · 8,940Other · 2,576

Why

Share of failed logins becomes squares you can count, grouped by cause with the name on the group.

Spec

  • 1 square = 1%
  • Color = error type, named under each group
  • Squares pop in order
  • Hover gives type and count

Principle

Show the count

Sketch H · Explore · Data-ink

Bookshelf

Failed Logins
23,996
This Month
Peak Month
February
1,000 failed logins
Monthly Median
495
Last 12 months
Failed LoginsBook height = failed logins
NovDecJan1,000FebMarAprMayJunJulAugSep590Oct

Why

A shelf of books is school-friendly, and the tallest book is the month that mattered.

Spec

  • Book height = failed logins
  • Peak darkest, now azure
  • Hero 54/600 in the first card
  • Books rise once

Principle

Maximize data-ink

Sketch I · Explore · Layering

Streamgraph

Failed Logins by ErrorBand thickness = failed logins
NovDecJanFebMarAprMayJunJulAugSepOctFeb · 1,000Too Many AttemptsInvalid Username or…Other

Why

Causes flow like a river: you see the total and which cause swells, with names on the bands.

Spec

  • Band thickness = failed logins by error type
  • Direct labels at the right end
  • Peak named
  • Fades in once

Principle

Layering and separation

Sketch J · Explore · Small multiples

Stamp sheet

Failed LoginsStamp size = failed logins
Nov410Dec490Jan440Feb1,000HighestMar580Apr640May720Jun420Jul285Aug365Sep500Oct590

Why

Each month is a stamp and the biggest stamp is the highest month, so size does the ranking.

Spec

  • Stamp size = failed logins
  • Peak says "Highest"
  • Same layout every month
  • Pop in order

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?

Does a median line help or clutter?

Decision: Pending

Which is the right default: A, B or C?

Decision: Pending

← Design crit overview