# K-12 Data Display Pattern Library Reference for data, analytics, and informational displays that read as familiar to K-12 teachers and administrators. Sep 19, 2026 · Chris Stevens > Source document for **Round 3** of the Info Design exploration > (`Info_Design_explore_3.html`). Dropped into the project per its own instructions so patterns can > be referenced by name in a prompt. ## How to use this The premise: teachers and administrators have two largely separate visual vocabularies, built from different daily software. Designing for "educators" as one audience is where most edtech data UI goes wrong. Every pattern below is tagged with the segment that actually knows it. Each entry follows the same shape so it can be handed to Claude Code as a build brief: - **Shape** — the structural form - **Known from** — the products that trained the expectation - **Reads as** — what the user takes away in the first two seconds - **Failure modes** — how it goes wrong --- ## Teacher-facing patterns ### 1. The gradebook grid The master pattern. Everything else gets interpreted through it. - **Shape** — students as rows, assignments or standards as columns, shaded cells, a summary column pinned right. Sortable by any column. - **Known from** — PowerSchool, Infinite Campus, Skyward, Canvas, Google Classroom. - **Reads as** — "where is my kid in this list." Teachers scan vertically for a name, then horizontally. - **Failure modes** — any matrix you build will be read as a gradebook whether you intend it or not. If your rows aren't students, say so loudly. Frozen header and first column are non-negotiable; teachers work in wide tables on small screens. ### 2. Red / yellow / green banding - **Shape** — three or four ordered performance bands, applied as cell fill, chip, or dot. - **Known from** — MTSS/RTI practice generally; i-Ready placement levels, Star benchmark categories, DIBELS composite, Lexia levels. - **Reads as** — the color, before the number. Teachers triage on hue and only then read values. - **Failure modes** — fails for color-vision deficiency unless paired with shape, label, or position. Also carries deficit connotations some districts have deliberately moved away from; worth confirming rather than assuming. ### 3. The tier pyramid - **Shape** — a literal triangle, three horizontal bands, roughly 80 / 15 / 5 proportions, Tier 1 at the base. - **Known from** — MTSS and PBIS professional development. Nearly every district has seen this exact graphic. - **Reads as** — instant orientation for intervention conversations. High recognition, low information density. - **Failure modes** — it is an explanatory graphic, not a data display. Making it interactive or data-driven usually confuses more than it helps; keep it as a legend or nav affordance. ### 4. The stacked proportion bar The most transferable aggregate display for teachers. - **Shape** — one horizontal bar per class, grade, or subject, segmented by performance band, labeled with both count and percent. - **Known from** — screener and diagnostic reports: i-Ready, NWEA MAP, Star. - **Reads as** — "how much of my class is where." Parsed fluently without training. - **Failure modes** — segments under about 5% become unreadable and unclickable. Give a minimum segment width and put small values in a label rather than inside the bar. Consistent band order left-to-right across every instance matters more than exact color. ### 5. Aimline and trendline progress monitoring - **Shape** — weekly probe scores as points, a straight aimline from baseline to goal, a fitted trendline through actual data, with a phase-change vertical rule when instruction changed. - **Known from** — DIBELS, acadience, intervention platforms, IEP progress reporting. - **Reads as** — "is this working." Read natively by interventionists and special education teachers; general education teachers know it less well. - **Failure modes** — needs at least six to eight data points before a trendline is honest. Showing one with three points teaches bad inference. Label the phase change or the chart lies about cause. ### 6. Item analysis grid - **Shape** — students × questions, check/X or shaded cells, with per-question difficulty across the bottom and per-student totals down the side. Distractor breakdown on drill-in. - **Known from** — inherited from bubble-sheet scanners; alive in Mastery Connect, Illuminate, Edulastic, Schoolnet. - **Reads as** — "which question did we all miss" — the column read comes first, which is the opposite of the gradebook. - **Failure modes** — teachers want to reteach from this view, so the display is only useful if each question is one click from its actual text and standard. ### 7. Photo roster and student card - **Shape** — grid of cards, photo-dominant, name below, one or two status indicators. - **Known from** — SIS rosters, seating chart tools, Class Dojo, Seesaw, attendance apps. - **Reads as** — genuine navigation. Teachers find students by face faster than by name, especially early in the year. - **Failure modes** — missing photos are the norm for new enrollees; the empty state needs real design. Also the highest-sensitivity surface in any K-12 product for privacy and for who is standing behind the teacher. ### 8. Norm-referenced score anatomy - **Shape** — a scale score with a confidence band, a percentile rank, and often a bell curve with shaded quartiles or a grade-equivalent figure. - **Known from** — NWEA RIT, Star scaled scores, state assessment reports, gifted and special education eligibility paperwork. - **Failure modes** — the single biggest misread in K-12 data. Percentile gets read as percent correct constantly, and grade equivalent gets read as "this fourth grader should be in seventh grade." If you show a percentile, show the word "percentile" and a one-line plain gloss adjacent, not in a tooltip. --- ## Admin-facing patterns ### 9. The state accountability dashboard The strongest shared reference for administrators — but the specific convention is state-bound, and admins read their own state's fluently while finding others opaque. Three worth knowing: - **California** — a five-by-five grid crossing current status against change, resolving to one of five colors. The most design-forward system and the most widely copied. - **Texas** — A–F letter grades on TXschools.gov, composed from three domains: Student Achievement, School Progress, and Closing the Gaps. Map-based school comparison alongside. - **Ohio** — 1–5 star ratings in half-star increments across six components: Achievement, Progress, Gap Closing, Early Literacy, Graduation, and College/Career/Workforce/Military Readiness. - **Reads as** — a public judgment, not a neutral metric. These land emotionally. Board members quote them. - **Failure modes** — borrowing the visual grammar of an accountability rating for something low-stakes (say, a provisioning health score) imports all of that weight. Either lean into it deliberately or pick a visibly different vocabulary. ### 10. ABC early-warning indicators - **Shape** — a student list with three flag columns — Attendance, Behavior, Course performance — plus a composite risk tier. Often icon-per-domain with a count badge. - **Known from** — early warning systems in most SIS platforms, Panorama, dropout-prevention initiatives. - **Reads as** — a worklist. Admins expect to act from this screen, not just read it. - **Failure modes** — chronic absenteeism has a specific definition (missing roughly 10% or more of days enrolled) and admins will assume that threshold. If yours differs, say so on the surface. Also: this list is a list of real children; bulk actions need friction. ### 11. Disaggregation table with suppression - **Shape** — a metric across subgroup rows: race/ethnicity, English learners, students with disabilities, economically disadvantaged, migrant, foster, homeless. "All students" row pinned top. - **Known from** — ESSA reporting, state report cards, federal data submissions. - **Reads as** — the equity view. This is the table that gets pulled into board decks. - **Failure modes** — n-size suppression is expected, not optional. Cells below the reporting threshold show an asterisk or a dash, never a number, and the threshold is stated in the legend. A table without suppression reads as either naive or non-compliant and will erode trust in the whole product. ### 12. The drill-down hierarchy More important than any single chart — this is the interaction model admins expect. - **Shape** — district → school → grade → teacher/section → student, with a persistent breadcrumb and the same layout at every level. - **Known from** — essentially every district analytics tool. - **Reads as** — "I can get to the cause." Admins distrust a number they can't decompose. - **Failure modes** — layout that changes shape between levels breaks the mental model. Also, the last hop to individual students is where FERPA and role permissions bite; the UI should make it obvious when you've crossed from aggregate into identifiable. ### 13. Utilization and adoption funnel The pattern closest to provisioning and rostering work. - **Shape** — a three-or-four stage bar or funnel: licensed → provisioned → activated → actively using. Paired with a time series and a per-school breakdown table. - **Known from** — Clever analytics, LearnPlatform, ClassLink Analytics, vendor renewal conversations. - **Reads as** — "what am I paying for that nobody uses." This is a budget display as much as a usage one. - **Failure modes** — "active" needs a stated definition (last 30 days? one session ever?) or the number is meaningless to the person defending a renewal. Stage drop-off is the insight; make the gaps between stages the visually loudest element, not the totals. --- ## Cross-cutting conventions These apply across every pattern above and are where most of the credibility is won or lost. **Directional inversion is the classic trap.** Achievement up is good. Chronic absenteeism up is bad. Suspension rate up is bad. Growth percentile up is good. A dashboard that applies one color logic across a mixed set of metrics produces confident misreads. Decide per-metric whether high is good, and encode it — don't let green mean "high" globally. **Legends are expected, not clutter.** These users read report cards with keys and score reports with glossaries. A visible legend reads as rigor, not as complexity. This is the opposite of consumer dashboard instincts. **Use the school calendar, not arbitrary dates.** BOY / MOY / EOY for screeners. Quarter, trimester, semester, or marking period (MP1–MP4) for grades. "Last 30 days" is meaningless in July. A date-range picker with no school-calendar presets signals that the product wasn't built for schools. **Print is a real output.** Teachers print for parent conferences. Admins print for board meetings and for staff who won't log in. A view with no print stylesheet, or one that clips a wide table, is half-built. Landscape letter is the safe target. **Deficit framing is actively contested.** Red/yellow/green is the default vocabulary, but a meaningful number of districts have moved to sequential blues or purples specifically to reduce the stigma of labeling children and schools as red. Treat the palette as a question for stakeholders rather than a given. **Privacy shapes the display, not just the permissions.** Aggregate views suppress small cells. Identifiable views should look visibly different from aggregate ones so a user knows when they're sharing a screen they shouldn't be. Photo rosters and individual student detail are the highest-sensitivity surfaces in the product. **Density expectations differ sharply by segment.** Teachers tolerate and expect dense grids — they live in spreadsheets. Administrators presenting to boards want fewer, larger, more legible figures. The same data usually needs two densities, not one compromise. --- ## Low-familiarity displays Not forbidden — but each needs scaffolding, a plain-language gloss, or a fallback view. | Display | Segment familiarity | The misread | |---|---|---| | Scatter plot | Low teachers, moderate admins | Read as decorative; individual point identity is assumed, so unlabeled points frustrate | | Box plot | Low teachers, moderate admins | Whiskers read as error bars; the box is read as "the range" | | Dual-axis chart | Low both | Crossing lines read as a causal event | | Radar / spider | Low both | Area is read as magnitude; axis order is read as meaningful | | Treemap | Low both | Rectangle adjacency is read as similarity | | Sankey | Low both | Visually admired, rarely acted on; band thickness overestimated | | Unlabeled heat map | Moderate | Fine if cells are a known grid; opaque if not — becomes "pretty colors" | | Sparkline without axis | Moderate | Slope magnitude is read as absolute, so unscaled sparklines mislead badly | | Violin plot | Very low both | Read as an unfamiliar shape, not a distribution | Two misreads worth calling out separately because they are near-universal: **Growth versus achievement.** A student can be high-growth and low-achievement simultaneously, and this is the single most important nuance in K-12 data — it's the entire premise of California's two-axis dashboard. Any display that shows only one will be assumed to show the other. **Percentile versus percent.** A 40th-percentile student did not get 40% correct. This confusion appears at every level including among administrators. Never abbreviate percentile to a bare number with a % sign. --- ## Build queue Sequenced so shared primitives land first. Original stack assumption: Next.js 15 / TypeScript / Tailwind v4 / shadcn/ui. **Build 0 — Shared foundation.** A synthetic data module (one district, four schools, ~30 students per section, subgroup flags, three time points, attendance; seeded and deterministic). A band token set (`band-1`..`band-4`) with both a stoplight palette and a sequential-blue palette, switchable at the root. A `MetricDirection` type (higherIsBetter / lowerIsBetter) threaded through every component that colors a value. A print stylesheet baseline targeting landscape letter. **Build 1 — Gradebook grid.** Frozen header row and first column. Sortable. Band-shaded cells with both fill and a text label. Summary column pinned right. Shown at 1366×768. Empty state and a 200-student overflow case. **Build 2 — Stacked proportion bar set.** One bar per section, count and percent labeled, minimum segment width with overflow labels outside the bar, consistent band order. A reused primitive. **Build 3 — Aimline / trendline progress chart.** Weekly probe points, aimline, fitted trendline, phase-change rule with a label, and an honest-minimum guard below six points. **Build 4 — Three accountability rating treatments, side by side.** The same school data as a California two-axis grid, a Texas A–F letter, and an Ohio 1–5 star rating. The highest-value artifact in the set. **Build 5 — Disaggregation table with suppression.** Subgroup rows, "All students" pinned, cells below threshold as a dash with a legend note, and a threshold toggle (10 / 20 / 30). **Build 6 — Utilization funnel.** Licensed → provisioned → activated → active, drop-off loudest, per-school breakdown, "active" defined on the face of the component. **Build 7 — Drill-down shell.** Breadcrumb across district → school → grade → section → student, layout holding shape at every level, visible treatment change when crossing into identifiable data. **Build 8 — Low-familiarity comparison set.** The same dataset as a scatter, box plot, and stacked bar, presented together as a research stimulus. --- ## Live reference sources Public, no login, and exactly what administrators in those states see each fall: - **California School Dashboard** — caschooldashboard.org — the five-by-five status/change color grid - **TXschools.gov** — A–F letter grades with map-based school comparison - **Ohio School Report Cards** — reportcard.education.ohio.gov — 1–5 star ratings with downloadable data and advanced report views Worth also collecting, though they need access: vendor sandbox environments for i-Ready, NWEA MAP and Star; district PD decks and "how to read your data" guides; and your own users — the fastest calibration is asking a teacher to narrate what they see in a display for thirty seconds before you explain anything.