去年冬天霧霾嚴重的那幾天，寫了兩篇關於空氣質量的文章，《可視化之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這些網站的技術實現，相同和不同之處，篇幅限制，放到下篇吧。同樣都是環境題材，它們在數據結構，技術思路和最終的產品形態上有很多不一樣的詮釋，是一個有意思的對比。
有空再聊，端午節快樂~