shadcn.io is not affiliated with official shadcn/ui
Air Quality Map Block for Svelte
Nine stations on a drawn street map re-valued by a pollutant toggle (PM2.5, PM10, O3, NO2), with a five-band legend in words and counts, and a ranked station list that names the worst reading.
Installation
Overview
Read one town's air by pollutant, with this air quality map for Svelte with Ark UI. Aerowick, an air-quality network, draws nine stations on a street map of an invented town. A Toggle Group switches the pollutant between PM2.5, PM10, O3 and NO2, and every station is re-valued: each is a pill with its reading and a swatch from a five-step foreground ramp, darker for worse. The five bands run from Good to Hazardous with their own limits for each pollutant, so the same number can sit in a different band for another gas, and the legend names each band with its range and how many stations are in it. A list beside the map ranks the stations for the chosen pollutant and the line under it names the worst, for example "Highest PM2.5: Depot Road at 74 µg/m³, Unhealthy." Pressing a pill or a row marks that station. The list is the way in for the keyboard; the pills are a pointer shortcut and are hidden from assistive technology. It's built from Toggle Group and Guides, with a CSS entrance only. For environmental agencies, city dashboards and public health teams.
FAQ
How are the five bands chosen?
Each pollutant has four limits in POLLUTANTS (cuts); a reading's band is the number of limits it is over, so 0 is Good and 4 is Hazardous. The legend's ranges and counts are read from the same limits, so they always match the swatches. The limits are a sample scheme made for this demo, not a health standard: use your regulator's table in your app.
Why do the bands change with the pollutant?
Particles and gases are measured in different units and harm people at different levels, so one scale would mislead. PM2.5 and PM10 are in µg/m³ and O3 and NO2 in ppb here, and a reading of 60 is Unhealthy for one and Good for another.
Is colour the only signal?
No. There is no hue at all: darkness is the ramp, the number is in every pill, the band is named in the list row and the legend gives each band's range in words with a station count.
Can I use it without a mouse?
Yes. The pollutant switch is a toggle group with arrow-key movement, and every station is a button in the ranked list with its pressed state. The pills on the map are skipped by Tab and hidden from assistive technology because the list says the same in text. A polite message gives the worst reading and the chosen station once the choice settles.
What stays local in the demo, and how do I wire it up?
All of it. The town, the nine stations and every reading are invented and typed into the file; nothing is fetched, published or saved. In your app load the latest readings for the chosen pollutant from your network and keep bandOf and rankingOf, which are the only places a band is decided.