Visualization of Beijing Air Pollution

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.

Data

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 (SO₂, NO₂, PM_2.5, PM₁₀). Some of these values are missing in certain records.

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

• Rouge outline of Beijing (I know it looks kinda unprofessional, but it’s sufficient to serve my purpose)
• Coordinates of each monitor station

Visualization

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

• Which part of the city is more heavily polluted than others.
• Which part of the city suffer from the highest intensity of a given type of pollutant.
• What time in a day is the air most polluted in Beijing.
• What time in a day is the air most polluted, for a given place and / or a given type of pollutant.

My design consists of three interrelated sections:

• MapMap is best for encoding locations. Users can easily compare on the map which parts of the city suffers from more serious pollution than others.
• Stacked Radial Area ChartEncode time (24 hours) in a circle, and stack the concentration of each pollutant by hour. From this chart, users can see the trend of pollution intensity in a day (both on a by-pollutant basis and of all pollutants), and a rough level of overall pollution at a certain monitor station.
• Tile ChartA 14*24 table, where each cell displays the pollution concentration during a given hour in a given day. This is closest to the raw data.

Visuals

Colors

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!

Transitions

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.

Interaction

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.

• Split up each tile into four smaller tiles, each representing a type of pollutant. This is distracting because the value of different pollutants are less comparable. For example, SO2 value seems always lower than the rest pollutants, given the time and station.
• For each monitor station on the map, somehow encode the time-series value, for example stacked radial area charts.

Lessons Learned

• Design the data structure with extra care before anything else, and everything else would be a breeze. Modifying data structure later on is pain.
• The most complicated visualization, or a chart with the largest amount of information, is not necessarily the best choice. Too much information can be confusing and distracting. Instead, it is usually a good idea to break down the data into logical groups, present one group at a time, and let the user explore the rest through interaction.

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.