forked from scottcheng/bj-air-vis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
21 lines (18 loc) · 8.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html><html><head><title>Visualization of Beijing Air Pollution</title><meta charset="utf-8"><meta name="author" content="Scott Cheng"><meta name="description" content="Visualization of the intensity distribution of several major pollutants in Beijing over two weeks"><link href="style.css" rel="stylesheet"><link rel="canonical" href="http://scottcheng.github.com/bj-air-vis/"></head><body><header><div class="content"><h1>Visualization of Beijing <span class="color">Air </span>Pollution</h1><p class="author">By <a href="http://scottcheng.com/">Scott Cheng</a></p></div></header><section id="vis"><div class="content"><div id="loading">Loading...</div><div id="stations"><div id="map-wrapper"><svg class="map"></svg></div><div id="station"><h2 id="station-name"></h2><div id="radial-wrapper"><svg class="radial"></svg></div><div id="tiles-wrapper"><svg class="tiles"></svg></div></div></div><div id="pollutant-selector"></div></div></section><div id="ix-hint"><p>Try clicking a dot on the map, a layer in the stacked area chart, or a pollutant name on the bottom.</p></div><section id="write-up"><div class="content"><p>This interactive visualization demonstrates the intensity distribution of several major pollutants in Beijing during October 17 and October 30, 2012.</p><p> This is one of <a href="http://vis.pku.edu.cn/wiki/public_course/visclass_f12/assignment/a02/chengye/start">my </a><a href="http://vis.pku.edu.cn/wiki/public_course/visclass_f12/assignment/a02/start">course assignments </a>in the <a href="http://vis.pku.edu.cn/wiki/public_course/visclass_f12/start">fall 2012 Visualization course </a>at Peking University. Data is sourced from the <a href="http://www.bjmemc.com.cn/g356.aspx">Beijing Municipal Environmental Monitoring Center website</a>.</p><h2 id="data">Data</h2><p>The data that I have are hourly samples at 27 monitor stations over 14 days. In each record, there are concentration values of four types of pollutants (SO<sub>2</sub>, NO<sub>2</sub>, PM<sub>2.5</sub>, PM<sub>10</sub>). Some of these values are missing in certain records.</p><p>In order to draw the map, I also extracted the following spatial data from <a href="http://www.bjmemc.com.cn/g356.aspx">here</a>:</p><ul><li>Rouge outline of Beijing (I know it looks kinda unprofessional, but it’s sufficient to serve my purpose)</li><li>Coordinates of each monitor station</li></ul><h2 id="visualization">Visualization</h2><p>I aim to clarify the following aspects of the data with this visualization:</p><ul><li>Which part of the city is more heavily polluted than others.</li><li>Which part of the city suffer from the highest intensity of a given type of pollutant.</li><li>What time in a day is the air most polluted in Beijing.</li><li>What time in a day is the air most polluted, for a given place and / or a given type of pollutant.</li></ul><p>My design consists of three interrelated sections:</p><ul><li> <b>Map</b>Map is best for encoding locations. Users can easily compare on the map which parts of the city suffers from more serious pollution than others.</li><li><b>Stacked Radial Area Chart</b>Encode time (24 hours) in a circle, and stack the concentration of each pollutant by hour. From this chart, users can see the trend of pollution intensity in a day (both on a by-pollutant basis and of all pollutants), and a rough level of overall pollution at a certain monitor station.</li><li><b>Tile Chart</b>A 14*24 table, where each cell displays the pollution concentration during a given hour in a given day. This is closest to the raw data.</li></ul><h2 id="visuals">Visuals</h2><h3 id="colors">Colors</h3><p>I use <span style="color:rgb(65, 171, 93)">four </span><span style="color:rgb(128, 125, 186)">colors </span><span style="color:rgb(239, 59, 44)">to </span><span style="color:rgb(241, 105, 19)">encode </span>the four types of pollutants, <span style="color:rgb(66, 146, 198)">another </span>color for the overall pollution, and some <span style="color:rgb(189, 189, 189)">greys </span>for legends and text. All the colors are taken from <a href="http://colorbrewer2.org/">ColorBrewer </a>– it’s <i>really </i>good!</p><h3 id="transitions">Transitions</h3><p>Every visual change in this visualization is eased with transition. Speaking of which, it is only recently that I realized why transition feels much more comfortable than sudden changes: because sudden changes are unnatural! Nothing in the real world can change its size, position or color in an instant.</p><p>Did you notice that everything animated in when you first open this page, instead of just show up? The colors fade from white to blue, and the circles grow outwards.</p><h2 id="interaction">Interaction</h2><p>There are two dimensions to select / filter in this visualization: station and pollutant.</p><p>You can select a station by clicking on the corresponding circle on the map, or select “all stations” by clicking on the rest of the map. When a station is selected, the two charts on the right display data sampled at that monitor station; otherwise, they display mean value of all stations.</p><p>You can select a type of pollutant by clicking on the pollutant name on the bottom, or by clicking on the corresponding circular area in the stacked area chart. When a pollutant type is selected, the map and the tiles only display data of that specific pollutant, and the corresponding layer in the area chart is highlighted; otherwise, the map and the tiles display aggregate value of all pollutants.</p><h2 id="abandoned">What My Visualization Does Not Have</h2><p>Besides what I have implemented, I also had the following initial designs which I abandoned, in order to simplify the visualization and avoid distractions.</p><ul><li>Split up each tile into four smaller tiles, each representing a type of pollutant. This is distracting because the value of different pollutants are less comparable. For example, SO2 value seems always lower than the rest pollutants, given the time and station.</li><li>For each monitor station on the map, somehow encode the time-series value, for example stacked radial area charts.</li></ul><h2 id="lessons">Lessons Learned</h2><ul><li>Design the data structure with extra care before anything else, and everything else would be a breeze. Modifying data structure later on is pain.</li><li>The most complicated visualization, or a chart with the largest amount of information, is not necessarily the best choice. Too much information can be confusing and distracting. Instead, it is usually a good idea to break down the data into logical groups, present one group at a time, and let the user explore the rest through interaction.</li></ul><h2 id="next">What Next?</h2><p>Fork the <a href="https://github.com/scottcheng/bj-air-vis">GitHub repo</a>, or
grab the <a href="https://github.com/scottcheng/bj-air-vis/archive/gh-pages.zip">source</a>! I’m fairly new to D3, and I’m open to any criticism and / or comments on my code.</p></div></section><footer><div class="content"><p>Copyright © 2012 <a href="http://scottcheng.com/">Scott Cheng</a><br>Proudly powered by <a href="http://d3js.org/">D3.js</a></p></div></footer><div id="social"><div class="social-button-wrapper"><div data-size="medium" data-annotation="none" class="g-plusone"></div></div><div class="social-button-wrapper"><a href="https://twitter.com/share" data-url="http://scottcheng.github.com/bj-air-vis/" data-counturl="http://scottcheng.github.com/bj-air-vis/" data-count="none" class="twitter-share-button">Tweet</a></div><div class="social-button-wrapper"><iframe src="http://ghbtns.com/github-btn.html?user=scottcheng&repo=bj-air-vis&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe></div></div><script src="lib/d3.v2.min.js"></script><script src="lib/colorbrewer.js"></script><script src="air-vis.js"></script><script>// twitter button
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// google +1 button
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
// ga
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33401065-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script></body></html>