可視化之Berkeley Earth

      去年冬天霧霾嚴重的那幾天，寫了兩篇關於空氣質量的文章，《可視化之PM2.5》和《談談我對霧霾的認識》。坦白說，環境問題是一個沒法逃避又無能爲力的話題。最近由於工做中有一些數據可視化的內容，借這個機會研究了一下Berkeley Earth，下簡稱爲BE，效果以下：

      從產品角度，有三個特色：第一，從可視化的效果來看，是點密度插值後的切片效果，而不是點值顯示，這就須要服務端支持緩存切片，對客戶端而言，直接加載便可；第二，提供了歷史數據和小時，天，月三種模式，可以支持最近半年左右的數據訪問，天然，不一樣模式下的切片url對應不一樣的format；第三，拖動鼠標時，能實時顯影當前位置對應的AQI值，這個就比較厲害了，用到了utfgrid的思路，能夠作到實時的本地查詢屬性的效果。

      做爲程序員，看到讓本身心動的代碼，腦海中的第一反映就是要征服她。不會F12的Web程序員等同於陽痿。查看url請求，用同一個XYZ看一下OSM對應的切片區域，肯定是墨卡託投影的切片（若是不是，那就對比一下天地圖WGS的）；代碼混淆都是屢見不鮮，我的認爲閱(tou)讀(kui)代碼是最有意思的時候，首先，從函數和變量的命名上，基本能夠判斷他寫代碼的人品，我最討厭兩種命名風格：var a,b,c和拼音命名，前者是機器乾的事，後者就不評價了。終於找到了切片url的format。

 

      可見，不管是歷史數據和實時數據，設置對應的current(UTC時間)就能夠獲取對應的切片數據，所以，我基於Cesium.UrlTemplateImageryProvider實現了createAQIBerkeleyEarthProvider方法，終於能加載對應的影像服務了！

      當你打開網頁卻發現,你擁抱的並不老是也擁抱你，瀏覽器報錯了，原來BE進行了跨域限制，也是情理之中，養了這麼多年的女兒，怎麼也是Berkeley名門閨秀，和你約約就算了，你這個窮小子，連房(服務器)都沒有，就想把女兒騙回家？

      跨域是瀏覽器的限制，服務器請求則沒有跨域限制。可見，對於一個男人而言，有房纔是硬道理，請教谷大神，寫了一個jsp代理，家小但也五臟俱全。終於能夠在本身的網頁中加載BE的切片服務了。

 

      迎娶白富美當然是一件可喜可賀的事情，可生活不像詩，鼠標實時查詢這個utfgrid功能還沒實現呢，婆婆說，這叫中看不中用。當鼠標移動時，BE會請求一個bin文件，裏面的數據結構以下：

      這其實就是utfgrid屬性切片的思路，對應的邏輯過程以下，分別在loadDataFile和displayConcentration兩個函數中實現，其中bin文件是以arraybuffer形式，這也是大數據Web環境下高效傳輸的不二選擇，其實就是二進制流的形式。

 

      如上是對BE中具體的技術介紹，在非技術層面，我的主要有以下幾點體會和收穫：

      首先，當你決定最一件事情後，難度通常比你想象的要小。最大的難點在於克服心裏的恐懼和懶惰，心理障礙遠大於實際難度。

      第二，鼠標的實時屬性查詢，這個功能很實用，可視化效果能讓用戶直觀感覺，但有點外行看熱鬧的感受，經過utfgrid技術，很好的提供了鼠標焦點的AQI數值，就至關於內行看門道了，二者很天然的融合在一塊兒。

      第三，做爲一個高校組織，這些數據都是開放的，好比PM2.5一年內的數據，精確到天，格式是NetCDF，提供了Java版本的讀取API。還有全球氣溫變化的詳細數據，都是很好的可視化效果素材。

      最後一點，從技術角度來看，該網站重服務端，大部分數據和業務都是在服務端預緩存和實時緩存的結合，好比utfgrid屬性切片的生成，克呂金算法的點插值等，儘管目前克呂金插值有JS的實現，但若是沒法藉助GPU，我的認爲沒法作到實時性（我沒驗證），並且，網站的代碼寫的很規範，對程序員很友好，讀起來也比較舒服。

      原本還想說一下aqicn.org,earth.nullschool這些網站的技術實現，相同和不一樣之處，篇幅限制，放到下篇吧。一樣都是環境題材，它們在數據結構，技術思路和最終的產品形態上有不少不同的詮釋，是一個有意思的對比。

      有空再聊，端午節快樂~