Spatial-Temproal Data: Beijing Air Quality Data

by ZhangJiang


You can try it here!

Data Description

  1. It contains SO2, NO2, PM10 and PM2.5 concentrations at 27 monitor stations for every hour (from 2012.10.17 to 2012.10.30).
  2. There is some missing data (and one place missing).


The overview of my design contains two parts:

  1. On the left there are four line charts. They represent SO2, NO2, PM10 and PM2.5 concentrations from top to bottom, respectively. And the paths are in different colors.
  2. On the right there is a simplified map which marks the 27 monitor stations. If you click the spot the line charts on the left will change.

the left part(line charts):

the right part(simplified map):

Now you can click the spot on the simplified map, the line charts will change into new data. I use transition.duration(1000) to get an animated transition. For example, I click the spot “西城官园”:

You can see the data has changed!

To be Improved

I think I should add more interactions into my implement which is not intuitive enough to others. For instance, when the mouse pointer hovers on the path, the related data should be displayed. I will keep learning D3 to improve it!