Beijing Air, Beta Version, Report

Here is the beta version. Go Online

Overview

This project mainly deals with two dimensions: Spatial and Temporal. There is two charts in the page, one is the map, the other is the line chart of the pollutant concentration.

The link is constructed bi-directionally. You can brush on both charts:

When mouse hovers on a station, the chart on the right will show the pollution data varing upon time. When brushing on the time-domain chart, the station will change color to show the pollution condition.

Data

The data is mainly obtained from the given dataset. However there is additional data on monitor station location, obtained from the map.

Presenting

Pollution in a station is depicted by its color. The hue is determined by the dominent pollutant, while the darkness is determined by the overall condition. The fomula is as follows:

			var r = colorscale(currentairdata[i].no2);
			var g = colorscale(currentairdata[i].so2);
			var b = colorscale((currentairdata[i].pm2_5));
			var l = Math.sqrt((r*r+b*b+g*g)/3);
			var v = (255-l)/128;
			data[j].color = d3.rgb(r*v,g*v,b*v);

When brushing on the time-domain chart, the condition all over the city at the specified time is given in the map chart.

The timedomain chart is presented in a standard line chart form.

Code

The program is implemented in Javascript, using D3 lib.

You can download the source code here. source code

As for uploading, just unzip it and copy the files into an empty directory on the server and visit “home.html”.

 
public_course/visclass_f12/assignment/a02/baiyichong.txt · Last modified: 2012/12/05 20:52 by chong