The Visualization of Beijing Air Quality

by Zeng Qiqi

Data Description

The given data included

  • CO and O3 concentrations in the whole city for every hour.
  • SO2, NO2, PM10 and PM2.5 concentrations at 27 monitor stations for every hour.

The time of the data ranged from 2012-10-17 00:00 to 2012-10-30 23:00.

In order to display the multi-dimensional data, I made a visualization of the LATTER one.


This is a large multivariate dataset. Here we can concern about variables like PLACE, DATE, TIME, Specific POLLUTANT and so on. The size of this dataset is a bit large, so I use D3.js and another JavaScript library Crossfilter .

I used different colors to describe different pollutants.

I used the “Dot Chart” to demonstrate the concentrations of the four pollutants. The area of the Dot told the size of concentration, and we can see the daily condition intuitively by making appropriate choice. The dots are translucent so we can make overlying easily. (It can show 120 of the data at most.)

In this design, we can make interactions in several dimensions. We are able to choose an exact monitor on the map and drag on the chart to filter by the associated dimension, and the height of each bar tells the amount of data belonging to this range. Press “Show all” to reset in the corresponding dimension. Here come some examples.

We can know the distribution of SO2 concentration in DAXINGHUANGCUNZHEN monitor in 20121017, and from the Dot Chart we can see the condition of 20121017 (Fig.1). And we can know the distribution of NO2 concentration in FENGTAIHUAYUAN monitor from 3 pm to 8 pm of 20121017-20121030, meanwhile getting the overall trend from the Dot Chart (Fig.2).



Even more, we can find in what TIME, DATE and PLACE the distribution of PM10 concentration ranging from 0.4 mg/m3 to 0.8 mg/m3 happen most (Fig.3).


However, this design has some shortcomings. We cannot get knowledge of positional relationship from this graph. (At first I want to achieve making a map and show the concentration of monitors on it in different color or scale, but I haven't completed this part.)


You can try it HERE .

Step 1. Select the pollutant you want to explore.

Step 2. Select the monitor you want to explore on the map (or choose “Show All”).

Step 3. Drag on the other charts, and enjoy it.

Warning: If you choose the place (monitor) by the drop-down box, the ranges of other three variables will be initialized.

The “Dot Chart” showed only 120 (or less) of those selected data.