Innovative Multi Year Air Quality Visualisation

We are currently deploying a very high density air quality monitoring network in Pai a popular village for backpackers in Northern Thailand that is heavily affected by seasonal wildfires.

They have an engaged community on the ground that not only puts these monitors at the right locations but also is building a website with current air quality data. You can see these here.

I would like to highlight this visualisation:

What I do like on this particular visualisation is that you not only see the annual variations but also the daily ones. This gives valuable indications that for example the air quality in the afternoons tend to be better than in the nights and mornings (which is due to higher mixing heights due strong solar heating).

We are planning to add a similar chart into our application and it would be great to hear some thoughts from the community on this.


An excellent and concise visualization, is it open source?
How does it deal with leap year which seems to be large 365px despite being 366 days long? I would make all images 366px wide and leave a gray column at the end.
tomorrow I’ll try to replicate it for my project as an hourly or daily PHP cron job, and an html snippet, but also adding a second graph about pm2.5 values, with the color scale that I’m already using for them.

Hi, good question. This visualization from is part of several on the site. Some of our other visualizations on the main page allow the user to zoom in on specific days/hours with precision. For this visualization, we wanted to help people get an overall view of years/months/hours trends, and so it doesn’t include the ability to drill down to specific days/hours. So for the leap year issue we decided to make the visualization 365px wide and simply not show the last px (December 31st) of non-leap-years. It is not critical for this particular chart to show all days. We thought that would be less confusing than the only “correct” alternative, which would be to leave a blank column at the end of February for all but leap years (making it look like data was missing). Even if we just made our chart 366px wide, that would still not be correct because the columns would be 1 day off for March onward relative to the month labels.

The chart is generated in SVG by code on our server (in Perl!) that is not open source at the moment, but feel free to ask any questions. I’d recommend either generating the whole chart as an image, or generating separate PNG images for each year and using an SVG “image” element to add the PNGs to your chart…initially we used SVG "rect"s for the “pixels” and the file sizes were absurd! Also we experimented with nearest-neighbor scaling of the pixels (effectively what you get with the SVG “rect” based “pixels”) vs interpolated and we found there were different advantages either way.

The chart data for each hour is PM2.5 US AQI plotted using the colors seen on the US gov airnow site. The data itself is an amalgam of data from more than 25 Pai stations over 5 years…that was a lot of work!

We only ask that if you use this visualization idea, please give us some credit and a link to Thanks!

1 Like

Yes, it’s not a big deal if one day every 4 years is missing, good point!
Of course I’ll give proper emphasisto the original idea and website.

We just added rain and wind data from a local weather station:

Posted to Data is Beautiful on Reddit too!