D1: Specification Document

Current site: Single-page Vite + React 18 app. Page chrome is React; the interactive map is D3 over us-atlas TopoJSON. Deployed as a static site on GitHub Pages under the /measles-dashboard/ base path.

GitHub: https://github.com/ACCIDDA/measles-dashboard

Requirements

Functional

Definite

Data displays accurately based on county and school
Decouple hard-coded NC and CA data from the existing project repository
Generalize to measles-dashboard-StateCode API that other states can follow
Accept data from measles-XX state repositories, given that no 404 error is received

404 error recieved → state will remain inactive
No error → populate map with state’s data

Perhaps

Data cleaning scripts to take data and match it to required API for use in dashboard

Improbable

Scripts to validate each individual API
Moving to Vercel – budget constraints would limit us to one contributor

Non-functional

Definite

Usability: The API should be able to be used by health officials from varying states
Reliability: Should be accessible at all hours of the day/even after new information is updated
Performance: Should be able to handle concurrent users from all 50 states without loss
Supportability: APIs should come with regressions tests and appropriate documentations
Physical: Should work on web devices
Design: same consistency in naming and typography as currently website holds
Implementation: Application must expose APIs written in a language that is accessible to the users (ideally python)

Will continue to host on GitHub Pages (as opposed to Vercel or other platforms) because of client's hosting preferences
Must remain static to keep free access

Interface: Leverage the imuGap model for Bayesian model as necessary for estimation.

Perhaps

Usability: non technical people should be able to upload their data and our system will take care of it
Supportability: Support light and dark mode

Improbable

Collecting data from all states and imputed into the ACCIDDA dashboard

Interfaces

Current Flow

User enters the main site and sees a map of the US

There is a search bar, download data button, API doc button, and static legend
Each state is inactive (grey), or active (blue, orange, or red) based on vaccination coverage

The user can use the search bar to search for a specific state
On click the download button downloads the all-schools.csv file to the user's device
On click the API doc button routes the user to a static data API reference page
The legend is not clickable
When a user hovers over a state, information about that state is displayed

Inactive state shows state name and "No data yet"
Active state shows state name, average vaccine coverage, classification (low, medium, high), and "Click to explore counties"

When the user clicks on an active state, they are routed to a full state map view
Counties are displayed as active or inactive in the state view

Hovering over an active county shows county name, average vaccine coverage, classification (low, medium, high), school count, and "Click to explore counties"
There is a button that toggles view between overall county vaccine coverage and percent of schools under 95% coverage

Clicking on a country shows each school on the map, a list of schools, and a search bar to search for a specific school

Hovering over a school shows its name and average coverage
Clicking on a school shows the K-5 vaccination breakdown

Clicking on an ajoining map area routes to that map area if it is active, and back to the US overview if inactive

404 Fallback

Accept data from measles-XX state repositories

404 error recieved → catch error → state marked inactive → rendered on map as grey
No error → state marked active → assign state tier and color → populate map with state’s data

When a inactive state is clicked, use the existing toast "Data not yet available for [state]"
If inactive state accessed from URL, D3 map package handles the display

Centers on grey selected state, back button shown
Next click routes back to US overview