forked from kopf/chineseair
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (115 loc) · 6.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>
Graphing Air Pollution in China (Aengus Walton)
</title>
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function subtractDays(date, days) {
date.setDate(date.getDate() - days);
return date;
}
function toggleDisplayGraph(i) {
var checkbox = document.getElementById('togglebox_' + i);
if(checkbox.checked) {
chart.showDataColumns(i);
} else {
chart.hideDataColumns(i);
}
}
</script>
<script type="text/javascript">
var chart;
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Beijing');
data.addColumn('number', 'Shanghai');
data.addColumn('number', 'Chengdu');
data.addColumn('number', 'Guangzhou');
data = populateData(data);
chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {
displayAnnotations: true,
zoomStartTime: subtractDays(new Date(), 7),
dateFormat: 'HH:mm MMMM dd, yyyy'
});
}
</script>
</head>
<body>
<div class="wrapper">
<h1>
Graphing Air Pollution in China
</h1>
<p>
News of high levels of air pollution in China are nothing new, but <a href="http://www.bbc.co.uk/news/world-asia-china-21007893">recent reports</a> have startled many.
</p>
<blockquote>
<p>
WHO guidelines say average concentrations of the tiniest pollution particles - called PM2.5 - should be no more than 25 microgrammes per cubic metre. Air is unhealthy above 100 microgrammes and at 300, all children and elderly people should remain indoors.
</p>
<p>
Official Beijing city readings on Saturday [12th January 2013] suggested pollution levels of over 400. An unofficial reading from a monitor at the US embassy recorded levels of over 800.
</p>
</blockquote>
<p>
As mentioned above, United States Embassies in China run twitter accounts which tweet the current levels of air pollution in <a href="https://twitter.com/BeijingAir" target="_new">Beijing</a>, <a href="https://twitter.com/CGShanghaiAir" target="_new">Shanghai</a>, <a href="https://twitter.com/Guangzhou_Air" target="_new">Guangzhou</a> and <a href="https://twitter.com/CGChengduAir" target="_new">Chengdu</a>. Apparently the authorities have threatened to shut them down on multiple occasions but not yet followed through.
</p>
<p>
I think these twitter accounts are a great idea but they have one problem: it's rather difficult to digest the information (points on the <a href="http://www.airnow.gov/index.cfm?action=aqibasics.aqi">Air Quality Index</a>) in tweet form. Twitter does a great job at getting the information out there, but to properly consume it, you really need a graph. So, one evening I decided to hack this page together.
</p>
<p>
The graph will update hourly, just as the twitter feeds do.
</p>
<h2>
Current Pollution Levels
</h2>
<form>
<label><input type="checkbox" onclick="javascript:toggleDisplayGraph(0)" name="Beijing" id="togglebox_0" checked> Beijing</label> <label><input type="checkbox" onclick="javascript:toggleDisplayGraph(1)" name="Shanghai" id="togglebox_1" checked> Shanghai</label> <label><input type="checkbox" onclick="javascript:toggleDisplayGraph(2)" name="Chengdu" id="togglebox_2" checked> Chengdu</label> <label><input type="checkbox" onclick="javascript:toggleDisplayGraph(3)" name="Guangzhou" id="togglebox_3" checked> Guangzhou</label>
</form>
<div id="chart_div" style="width: 700px; height: 340px;"></div>
<h2>
Twitter API Restrictions
</h2>
<p>
Unfortunately, twitter has a limit on how far back developers can go when downloading tweets from an account. <a href="http://twittergrep.com" target="_new">twittergrep.com</a> helps, but unfortunately gets nowhere close to serving up an account's entire tweet archive.
</p>
<p>
So, if anyone out there — Embassy worker, twitter dev, whoever — is able to provide me with these accounts' entire history, <strong>please</strong> <a href="http://ventolin.org/about-2">email me!</a>
</p>
<h2>
About me
</h2>
<p>
I'm <a href="http://ventolin.org">Aengus Walton</a>, a software engineer from Ireland, currently living in Germany. You can <a href="http://github.com/kopf">see some of my open-source projects here</a>, and <a href="http://ventolin.org">read my (much neglected) blog here</a>.
</p>
<p>
If you would like to contact me, you can <a href="http://ventolin.org/about-2">get my email address here</a>.
</p>
</div>
<script type="text/javascript" src="javascripts/data.js"></script>
<script src="javascripts/scale.fix.js" type="text/javascript"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-37666330-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>