Beijing Pollution Data Visualization

By Hong Fan

Try Here!

Data Description

  • Hourly concentrations data of SO2, NO2, PM10 and PM2.5 at 27 stations with some missing data.
  • Abbreviated name and full name for 27 stations.
  • And we also extract relative positions (pixels) from the original website.

Design

Basic

The dataset contains not only space information, but also temporal data which includes 4 time series. Intuitively, we use both map view and timeline view at the same time.

Fig. 1

Fig. 1 is an overview of our interface.

  1. The major part of left side shows four fundamental timelines. Each timeline is correponding to one of concentrations of SO2, NO2, PM10 and PM2.5 at a selected station.
  2. The right side shows a map of Peking. Points representing stations are put on the map. Clicking one point will trigger the cause timelines view to change for the selected station.
  3. Also the legend is a window for interaction (Fig. 2). Mouse hovering on one rectangle or corresponding text will highlight corresponding timeline. And action of clicking will hide corresponding timeline or re-show previous hidden one. Such interaction will enable closer inspection and comparison of certain pollutants.
Fig. 2

More interaction

We also consider a situation in which people may want to inspect the concentration change at a certain hour over several days. For example, people who ususally do morning exercises would like to know concentration changes at 7:00 am.

To satisfy such demand, we empoly a bar chart view above timelines view. With mouse moving in the background, we will get the corresponding time. Then we show the concentration change at this hour along days. And the interaction of legends can also affect this bar chart view.

I think this interaction is fairly convient to achieve for users.

Fig. 3

Fig. 3 is an example for such interaction. From the visualization, we can see the concentration of PM10 and PM2.5 is relatively low on weekdays and will reach a high level nearing weekends (Oct. 20 is Saturday, Oct. 26 is Friday, and Oct. 27 is Saturday) at 7:00 am. And this result will give users a useful suggestion.

Implementation

User D3.js.

You could leave a comment if you were logged in.
 
public_course/visclass_f12/assignment/a02/fanhong/start.txt · Last modified: 2012/12/06 10:48 by fan.hong