Spatial-Temproal Data: Beijing Air Quality Data
You can try it here!
- The data comes from Beijing municipal environmental monitoring center
- It contains SO2, NO2, PM10 and PM2.5 concentrations at 27 monitor stations for every hour (from 2012.10.17 to 2012.10.30).
- There is some missing data (and one place missing).
The overview of my design contains two parts:
- 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.
- 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!