Visualization of Beijing Air Pollution

By Scott Cheng


Try clicking a dot on the map, a layer in the stacked area chart, or a pollutant name on the bottom.

This interactive visualization demonstrates the intensity distribution of several major pollutants in Beijing during October 17 and October 30, 2012.

This is one of my course assignments in the fall 2012 Visualization course at Peking University. Data is sourced from the Beijing Municipal Environmental Monitoring Center website.


The data that I have are hourly samples at 27 monitor stations over 14 days. In each record, there are concentration values of four types of pollutants (SO2, NO2, PM2.5, PM10). Some of these values are missing in certain records.

In order to draw the map, I also extracted the following spatial data from here:


I aim to clarify the following aspects of the data with this visualization:

My design consists of three interrelated sections:



I use four colors to encode the four types of pollutants, another color for the overall pollution, and some greys for legends and text. All the colors are taken from ColorBrewer – it’s really good!


Every visual change in this visualization is eased with transition. Speaking of which, it is only recently that I realized why transition feels much more comfortable than sudden changes: because sudden changes are unnatural! Nothing in the real world can change its size, position or color in an instant.

Did you notice that everything animated in when you first open this page, instead of just show up? The colors fade from white to blue, and the circles grow outwards.


There are two dimensions to select / filter in this visualization: station and pollutant.

You can select a station by clicking on the corresponding circle on the map, or select “all stations” by clicking on the rest of the map. When a station is selected, the two charts on the right display data sampled at that monitor station; otherwise, they display mean value of all stations.

You can select a type of pollutant by clicking on the pollutant name on the bottom, or by clicking on the corresponding circular area in the stacked area chart. When a pollutant type is selected, the map and the tiles only display data of that specific pollutant, and the corresponding layer in the area chart is highlighted; otherwise, the map and the tiles display aggregate value of all pollutants.

What My Visualization Does Not Have

Besides what I have implemented, I also had the following initial designs which I abandoned, in order to simplify the visualization and avoid distractions.

Lessons Learned

What Next?

Fork the GitHub repo, or grab the source! I’m fairly new to D3, and I’m open to any criticism and / or comments on my code.