teckyio 2019-5-6 17:23
製作品： [url]https://data-hko.tecky.io/[/url]
原始碼： [url]https://github.com/teckyio/data-hko[/url]
香港天文台的預測經常令你失望？是你的心理作用，還是這台的預測真的有偏差？
[img]https://img.eservice-hk.net/upload/2019/05/06/102218_05cec9944b04ea8a12bbfb1295597e07.gif[/img]
我們會在有誤差的時候埋怨，但天文台也可以為自己辯解，聲稱其他日子其實也很準確，到最後雙方都好像不夠說服力。這一回，我決定利用 Web Scraping，配合 d3.js ，透過 Visualisation 和數據，讓大家都把誰是誰非一眼看通透！！！（如對程式沒有興趣，可直接拉到最後看結果）
[img]https://asset-cdn.tecky.io/2019/05/03/5ccbbfb3b779cScreen-Shot-2019-05-03-at-12.12.37-PM.png[/img]
[size=5][color=DarkOrange]十年不更新的格式[/color][/size]
很多朋友初學 Web Scraping，多半都是到天文台抓取資料。而筆者則在十多年前已經開始嘗試抓取天文台的資料，為自己的桌面作一個小型「我的天文台」。
不過，每一位曾經抓取天文台資料的朋友，必然會發現，香港天文台的資料並不方便電腦處理。天文台在自己的網站 [url]https://rss.weather.gov.hk/rss_uc.html[/url] 和政府的「資料一線通」網站 [url]https://data.gov.hk/[/url] 都公開了讓程式讀取的資料位置，但你能夠拿到的東西，卻與「純文字版」沒太大分別。例子如下：
[img]https://na.cx/i/KLtP0QE.png[/img]
這個模樣的報告，根本和電台的講稿一模一樣！我們用程式沒辦法輕易找得出會下雨或是不會下雨，還要用 XML 格式，對於某些初學者來說，可能比在純文字版本找東西更多了一重處理 XML 的障礙，尤其近年來，XML 在一般大眾中的應用越來越少。
幸好，天文台使用的字眼十年如一天，我發現每逢天文台預測下雨的時候，總會以「有...雨」來形容，或者提及最挑動大家情緒的「狂風雷暴」。例如「稍後時間有幾陣雨」、「早晚有一兩陣驟雨」或「有狂風雷暴」。於是，我們便可以利用 Regular Expression，把這些字眼，以一兩行程式碼便抽取出來：
[font=Courier New][color=#4169e1]
let match = result.forecast.match(/本港地區今日天氣預測:<br\/>(.*?)<br\/>/);
let heavyRain = match[1].match(/狂風雷暴/)
let rain = match[1].match(/有[^有雨]*?雨/)
[/color][/font]
我們把這四個月的資料整合，發現天文台只有四種形容方法：「有微雨」，「有驟雨」，「有雨」和「狂風雷暴」。
玩更多 Regular Expression： [url]https://regexr.com/[/url]
[size=5][color=DarkOrange]歷史預測[/color][/size]
既然有了方法拆解預測，那麼過往的預測又能怎樣拿到呢？
一般來說，如果沒有在過去的時間把資料儲存下來，那麼過去的資料就找不回來了。也是說，若然沒有其他來源之下，你希望找回過去每一天的天文台早上預報，是沒有可能的，你唯有從今天開始每一日妥善儲存到自己的電腦或雲端上。
那麼我們要不要等數個月才有結果？！不用怕，原來政府自 2017 年開始在 data.gov.hk 提供歷史數據，其實就是政府幫我們一直儲存著這些資訊，可以按每小時抓取過往四個月的天文台的天氣預報。
話說回來，政府的開放數據一直都是為人詬病，這次也不會令大家「失望」！在我們查找的過程中，發現兩個問題
．縱然看起來數據是每小時記錄一次，但這個「每小時」的間距並不保證準確！正常時候是整點 (07:00, 08:00, 09:00...)，偶然會失常早一分鐘遲一分鐘甚至誤差十數分鐘！（07:01, 07:47, 08:30...）
．在找天文台數據時，2018-12-07 09:00 至 2019-01-01 08:00 的歷史記錄不見了，難道是那數十天負責的同事放假去了旅行⋯⋯？
[img]https://asset-cdn.tecky.io/2019/05/03/5ccbc461ee360Screen-Shot-2019-05-03-at-12.31.22-PM.png[/img]
所以，我們這次的調查只能覆蓋一至四月了。
[size=5][color=DarkOrange]實際的降雨量: 降雨量竟然有 API[/color][/size]
來到這裡，我們手頭上已經拿到足夠的「天氣預報資料」，而實際降雨量方面，原本打算在「每小時降雨量」配合傳統的 HTML 拆解方法 (利用 cheerio 或 BeautifulSoup) 把每小時不同地區的降雨量抓下來。
不過，偶然發現原來天文台有一個「每日數據摘錄」，完整收集了自 1884 年起計的每一日的總雨量記錄。而且，這個頁面更是以 Client-side Rendering 的方式顯示，換句話說，即是資料來源是有 API 可攝取，大大方便了我們作分析工作。
[img]https://asset-cdn.tecky.io/2019/05/03/5ccbbfef682f7Screen-Shot-2019-05-03-at-9.56.42-AM.png[/img]
只可惜預報方面缺少了部份歷史數據，更沒有以往年代的預報，否則我們更可以比較古今天文台的準繩度！（照道理應該是越來越準確吧！）
[size=5][color=DarkOrange]調查結果[/color][/size]
萬事俱備，這次我們用 d3.js 把降雨和預測資料，用月曆的方式顯示出來。
[img]https://asset-cdn.tecky.io/2019/05/03/5ccbc0014486fScreen-Shot-2019-05-03-at-11.19.28-AM.png[/img]
從上表中可以看到，一月二月未踏入香港的雨季，實際上有雨的日子並不多。不過，苦口婆心的天文台，幾乎不間斷地提醒大家有微雨或驟雨，二月份更加只有七日沒有預報有雨。在「狂風雷暴」的警示下，只有 4 月 19 日達 75 毫米，其他日子的降雨量並不多，最極端的「狂風雷暴日」 4 月 26 日只有 0.9 毫米降雨量。似乎這結果和我們的想法都符合————天文台預測下雨但其實都不大機會下雨！
反過來看，雖然天文台經常令我們白白帶了傘外出，但在天文台預測沒雨時日子，幾乎全部都真的是沒雨和極微雨（只有 0.2 毫米）！即是說，如果你當天發現天文台的預測沒有提及任何「雨」的字眼，你可以十分放心把雨傘放在家中。
然而，只是數日子好像不夠科學。其實我們更可運用 Confusion Matrix 和統計數據，更清晰看得出以上的結論。
[img]https://asset-cdn.tecky.io/2019/05/03/5ccbc00d16403Screen-Shot-2019-05-03-at-11.46.32-AM.png[/img]
單單是看 Accuracy，我們能指出天文台的準繩度是 70%，但這樣的說法並不夠仔細。因為
Precision 的計算的方法是 (True Positive) / (True Positive + False Positive)，即計算天文台預測有雨的日子中，有多少天是真的有下雨，而得出的數字是 0.57，換句話說即是 [b][u]當天文台話有雨，只有 57% 機會真的下雨！[/b][/u]
而 Recall 則是 (True Positive) / (True Positive + False Negative)，即計算實際有雨的日子中，有多少天是天文台有成功預測到的，這次運算達到 94%，代表實際很少情況下，會在天文台沒有預測的時候下雨起來， [b][u]當天文台說沒雨，很少機會是真的下雨[/b][/u] 。要留意的是，如果每天都說會下雨，其實 Recall 可以達到 100% 的。所以縱然有 94% Recall，配合 57% Precision 來分析，其實就是代表天文台總是偏向預測會下雨，讓大家「有備無患」。
[size=5][color=DarkOrange]後記：還有更多改良空間[/color][/size]
今次為了簡化起見，把降雨量的資料依賴了「每日數據摘錄」，不過，假若降雨記錄只是發生在淩晨 00:00 至早上 08:00 這個時段，其餘時段沒有雨，而天文台又預計當天會下雨的話，其實也算是錯誤的預計！既然我們這次的調查，看得出天文台總是常常預測有雨（Precision 的比率十分低），假若剛才的情況（清晨有雨，日間沒雨）經常發生的話，這個統計是錯誤地推高了天文台的準確率呢！
還有，我們把 0.1 毫米或以上的雨量也當作是有下雨（幾乎是幾滴雨！），我相信帶了雨傘的大家一定不會認為天文台是預測準確。
所以，其實這次對天文台是手鬆了很多呢。
[size=5][color=DarkOrange]特輯[/color][/size]
最後，今次嘗試拍了三段廣東話教學片，歡迎收看！
第一集 node.js & axios： [url]https://youtu.be/SHzR-3kHdDE[/url]
第二集 transform & regular expression：（字幕製作中，稍後將陸續上傳）
第三集 d3.js：（字幕製作中，稍後將陸續上傳）
form5 2019-5-6 21:18
interesting article to read