The marker was var(--brand) — the identical value to the bar fill it sits on.
Measured by pixel-sampling every bar on both templates, in both themes:
primary SatsChart .natTick 1.00:1 (6 bars)
secondary .att8VizNatLine 1.00:1
Not low contrast. The same colour. It scored 5.47:1 only against the empty
track, which means it was visible precisely when a school was BELOW the
national average and vanished for every school at or above it — failing for
exactly the schools people are looking for.
No single colour fixes this, because the marker's position is data-driven: it
can land on the bar, on the empty track, or across the boundary. It is now a
knockout — a light core carrying a dark edge, both from tokens that flip with
the theme, so one part or the other always separates:
on the bar on the track
light 5.47 / 9.70:1 15.17:1
dark 7.81 / 10.85:1 13.52:1
THE LEGEND DESCRIBED A CHART THAT DID NOT EXIST
Both data swatches were var(--status-above) green while their bars were
var(--brand) teal, and the two were identical to each other — one swatch for
two series. Worse, the only swatch matching the bar colour was the one
labelled "National average", so reading the chart by matching colours told you
the teal bars were the benchmark. Each swatch now carries its bar's exact
value, and the marker swatch mirrors the knockout.
TWO SERIES, ONE COLOUR
Expected and Exceeding were both var(--brand), distinguished only by row.
They are a sequential pair — exceeding is the same cohort at a harder bar — so
they take two steps of one hue, the harder measure being the step further from
the ground in each theme.
They measure 1.77:1 (light) and 1.39:1 (dark) against each other, and that is
accepted rather than overlooked: two fills that must EACH clear 3:1 against
the same white track are geometrically forced close together. The distinction
is carried by the row labels and printed values; colour is redundant here, not
load-bearing.
THE TEST THAT SHOULD HAVE CAUGHT THIS
The WCAG journey composites backgrounds by walking the ancestor chain, but
these markers are absolutely positioned over a sibling — ancestor-walking is
structurally blind to overlap, which is why this shipped in two templates and
passed every gate. The new journey asks the stacking order instead, via
document.elementsFromPoint.
Writing it surfaced a second trap worth recording: elementsFromPoint takes
viewport coordinates and returns an empty stack off-screen, and these markers
sit ~1200px down. The first version defaulted an empty stack to white, which
made teal-on-teal look like teal-on-white and PASS in the light theme. It now
scrolls each marker into view and counts any marker it cannot resolve a
backdrop for as a failure rather than a pass.
Verified both directions: the new journey fails against current staging with
"1.00:1 over rgb(15,118,110)" in both themes, and passes against this build
with 6/6 markers measured at 5.47–15.17:1.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Primary School Compass 🧒📚
A modern web application for comparing primary school (KS2) performance data in Wandsworth and Merton over the last 5 years. Built with FastAPI and vanilla JavaScript with Chart.js visualizations.
Features
- 📊 Interactive Charts - Visualize KS2 performance trends over time
- 🔍 Smart Search - Find primary schools by name in Wandsworth & Merton
- ⚖️ Side-by-Side Comparison - Compare up to 5 schools simultaneously
- 🏆 Rankings - View top-performing primary schools by various KS2 metrics
- 📱 Responsive Design - Works beautifully on desktop and mobile
Key Metrics (KS2)
The application tracks these Key Stage 2 performance indicators:
| Metric | Description |
|---|---|
| Reading Progress | Progress in reading from KS1 to KS2 |
| Writing Progress | Progress in writing from KS1 to KS2 |
| Maths Progress | Progress in maths from KS1 to KS2 |
| Reading Expected % | Percentage meeting expected standard in reading |
| Writing Expected % | Percentage meeting expected standard in writing |
| Maths Expected % | Percentage meeting expected standard in maths |
| Reading, Writing & Maths Combined % | Percentage meeting expected standard in all three subjects |
Quick Start
1. Clone and Setup
cd school_results
# Create virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
2. Run the Application
# Start the server
python -m uvicorn backend.app:app --reload --port 8000
Then open http://localhost:8000 in your browser.
The app will run with sample data by default, showing 110 primary schools (66 in Wandsworth, 44 in Merton) with 5 years of KS2 performance data.
3. (Optional) Use Real Data
To use real UK school performance data:
-
Download Key Stage 2 data for the years you want (2019-2024)
- Select "Key Stage 2" as the data type
-
Place the CSV files in the
data/folder -
Restart the server - it will automatically load and filter to Wandsworth & Merton schools
Note: The app only displays schools in Wandsworth and Merton. Data from other areas will be filtered out.
See the helper script for more details:
python scripts/download_data.py
Project Structure
school_results/
├── backend/
│ └── app.py # FastAPI application with all API endpoints
├── frontend/
│ ├── index.html # Main HTML page
│ ├── styles.css # Styling (warm, editorial design)
│ └── app.js # Frontend JavaScript
├── data/
│ └── .gitkeep # Place CSV data files here
├── scripts/
│ └── download_data.py # Helper for downloading/processing data
├── requirements.txt # Python dependencies
└── README.md
API Endpoints
| Endpoint | Description |
|---|---|
GET /api/schools |
List schools with optional search/filter |
GET /api/schools/{urn} |
Get detailed data for a specific school |
GET /api/compare?urns=... |
Compare multiple schools |
GET /api/rankings |
Get school rankings by metric |
GET /api/filters |
Get available filter options |
GET /api/metrics |
Get available performance metrics |
Example API Usage
# Search for schools
curl "http://localhost:8000/api/schools?search=academy"
# Get school details
curl "http://localhost:8000/api/schools/100001"
# Compare schools
curl "http://localhost:8000/api/compare?urns=100001,100002,100003"
# Get rankings
curl "http://localhost:8000/api/rankings?metric=rwm_expected_pct&year=2024"
Data Format
If using your own CSV data, ensure it includes these columns (or similar):
| Column | Type | Description |
|---|---|---|
| URN | Integer | Unique Reference Number |
| SCHNAME | String | School name |
| LA | String | Local Authority (must be Wandsworth or Merton) |
| READPROG | Float | Reading progress score |
| WRITPROG | Float | Writing progress score |
| MATPROG | Float | Maths progress score |
| PTRWM_EXP | Float | % meeting expected standard in reading, writing & maths |
| PTREAD_EXP | Float | % meeting expected standard in reading |
| PTWRIT_EXP | Float | % meeting expected standard in writing |
| PTMAT_EXP | Float | % meeting expected standard in maths |
The application normalizes column names automatically and filters to only show Wandsworth and Merton schools.
Technology Stack
- Backend: FastAPI (Python) - High-performance async API framework
- Frontend: Vanilla JavaScript with Chart.js
- Styling: Custom CSS with CSS variables for theming
- Data: Pandas for CSV processing
Design Philosophy
The UI features a warm, editorial design inspired by quality publications:
- Typography: DM Sans for body text, Playfair Display for headings
- Color Palette: Warm cream background with coral and teal accents
- Interactions: Smooth animations and hover effects
- Charts: Clean, readable data visualizations
Development
# Run with auto-reload
python -m uvicorn backend.app:app --reload --port 8000
# Or run directly
python backend/app.py
Coverage
This application is specifically designed for:
- School Phase: Primary schools only (Key Stage 2)
- Geographic Area: Wandsworth and Merton (London boroughs)
- Time Period: Last 5 years of data (2020-2024)
Note: 2021 data shows as unavailable because SATs were cancelled due to COVID-19.
Data Source
Data is sourced from the UK Government's Compare School Performance service, which provides official school performance data for England.
Important: When using real data, please comply with the terms of use and data protection regulations.
Scheduled Jobs
Geocoding Schools (Cron Job)
School postcodes are geocoded by a scheduled job, not on-demand. This improves performance and reduces API calls.
Setup the cron job (runs weekly on Sunday at 2am):
# Edit crontab
crontab -e
# Add this line (adjust paths as needed):
0 2 * * 0 cd /path/to/school_compare && /path/to/venv/bin/python scripts/geocode_schools.py >> /var/log/geocode_schools.log 2>&1
Manual run:
# Geocode only schools missing coordinates
python scripts/geocode_schools.py
# Force re-geocode all schools
python scripts/geocode_schools.py --force
License
MIT License - feel free to use this project for educational purposes.
Built with ❤️ for Wandsworth & Merton families