吉林省WRF模式數值預報可視化系統設計

陳暉 范玉鑫 陳楊 吳天亭

摘要 該文利用D3.JS組件，設計了一款以實時數據為數據源，主要顯示溫度、濕度、氣壓和風場等氣象要素的大數據可視化系統。此系統可以直觀地反映東北區域的整個氣象要素分布和歷史氣象情況，能指導當前的氣象工作。該系統中D3通過TOPOJSON的地理信息數據繪制吉林省地圖，通過編寫的小程序將GRIDS數據解析為JSON格式的要素信息，將溫度濕度數據解析為色斑圖，將風的強度用色斑形式顯示，根據風的方向數據繪制成風場動畫圖。When.js將系統任務分為地圖繪制、GRIDS數據解析、公式計算和D3數據可視化4個部分。在大數據可視化當中最擔心的交互速度問題，因為D3.JS優秀的封裝性能使開發工作變得非常簡潔。

關鍵詞 D3.JS；大數據；可視化；氣象；吉林省

中圖分類號 S165 文獻標識碼 A 文章編號 1007-5739（2016）04-0345-02

近年來我國氣象事業有了長足的進步和發展，吉林省建設了大量的常規、特種自動氣象探測設備，其傳輸、處理和服務應用的信息量呈指數式增長。吉林省氣象信息網絡中心每天接收海量的數據，其中大部分數據都是非結構化的大數據，但目前對這些大數據僅能做到初步的實時業務應用，無法進行大數據的長時間序列存儲及進一步的分析處理和決策分析應用，這就造成了極大的氣象數據價值浪費。因此，氣象行業迫切需要進行氣象大數據的應用分析研究。

1 氣象大數據可視化現狀

數據的可視化，可以更直觀地分析數據之間的關系和數據形成的規律，這些對于氣象來說是非常重要的：一是便于研究存儲數據的特點。二是便于分析氣象數據的形成規律，為理論研究工作提供依據。

目前，美國的尼古拉斯·加西亞·貝爾蒙特（Nicolas Garcia Belmonte）根據美國國家氣象局的氣象數據開發的風場可視化系統，以圓圈和線條為基本圖形元素，輔助以顏色變化來表現美國1 200多個氣象站的實時風場情況。美國的馬丁·瓦滕伯格（Martin Wattenberg）和費爾蘭達·維埃加斯（Fernanda Viegas）合作研發的風場可視化系統WIND MAP，以線條為主要元素，順著風的方向利用線條的動畫繪制出風場，利用黑白明暗的變化表現風的強度。這2個系統都已經非常成熟，還有東京氣象局研發的東京風場系統，都是非常成熟的B/S結構的風場可視化系統[1-3]。但是國內并沒有成熟的B/S風場可視化系統，在預報資料的要素可視化領域，國外的氣象同行已經遠遠的走在了我們的前面。

英國開發的英國氣溫史（UK TEMPERATURE HISTORY）網站，如圖1所示。通過利用D3.JS，只需要1張圖就可以直觀看到1911—2012年的溫度變化曲線，并且其中還標注了有特別氣象災害的時期。100年的歷史僅僅用1張可交互的D3圖形就清新明了地展現出來。還有東京氣象局開發的風場網站，如圖2所示，是將實時數據轉化為風場，并以動畫形式直觀明了地顯現出來，為預報員的預報提供參考。

2 吉林省WRF模式數值預報可視化系統總體設計

該文利用D3.JS設計的氣象大數據顯示系統是一個以東三省歷史數據和實時數據為數據源，主要顯示溫度、濕度、氣壓和風場等氣象要素的大數據可視化系統。此系統可以直觀的通過東北區域的整個氣象要素分布和歷史氣象情況來指導現在的工作。

D3通過TOPOJSON的地理信息數據繪制東北區域地圖，通過編寫的小程序將GRIDS數據解析為JSON格式的要素信息。將溫度濕度數據解析為色斑圖，將風的強度用色斑形式顯示，根據風的方向數據繪制成風場動畫圖。When.js將系統任務分為地圖繪制、GRIDS數據解析、公式計算和D3數據可視化4個部分。

3 D3.JS和SVG相關技術

D3.JS是2009年斯坦福大學可視化研究組研發的項目，從一開始就是開源和友好的，它將數據處理成數據模型的形式，然后通過HTML中的超文本文檔將數據轉換到其中。并且由于HTML5的新特性，D3.JS是支持SVG技術的，也就是可縮放矢量圖形，比前幾代的HTML有了巨大進步。

D3.JS起源于斯坦福大學在2009年的一個研發項目，2011年開始發布。從2011年至今，D3.JS組件一直在更新和完善。該文所使用的D3.JS版本是2012年發布的3.0版本。3.0版本在集成可視化方面有了更加長足的進步。無論是可視化表現還是框架的易用性都變得更加突出。

吉林省氣象前端可視化系統作為一個區域性的WEB前端可視化系統，SVG的網絡性和可伸縮的矢量圖形是最好的選擇。SVG本身的語言特性遵從于XML的語法，用文本格式的描述性語言來編寫矢量圖形的內容。不涉及標量圖形的分辨率問題，也是現在使用比較廣泛的圖形模式。

D3核心功能就是處理矢量圖形圖，因為矢量圖形是由數據方程定義，無論是圖形放大還是縮小，都會重新確定點的相對坐標位置和線的位置，不會造成失真。D3是基于Javascript語言開發的，其代碼在客戶端（也就是用戶瀏覽器）上執行，這使得數據必須發送到客戶端才能進行D3可視化的轉化生成。這就要求數據必須是用戶共享的，而研討可視化有一個目的就是實現研討信息的共享。

3.1 異步處理

因為系統要顯示風場、溫度、濕度、氣壓等多個要素，所以需要引入任務調度機制保證系統的運行速度。本系統選擇了速度快，體積小的when.js組件作為任務調度模塊。

When.js是cujojs的輕量級的 Promises/A和when（）實現，從wire.js的異步核心和cujojs的IOC容器派生而來。包含很多其他有用的Promiss 相關概念，任務在when.js中存在3種狀態即默認（pending）、完成（fulfilled）、失敗（rejected）。默認狀態可以單向轉移到完成狀態，這個過程叫resolve，對應的方法是deferred.resolve（promiseOrValue）；默認狀態還可以單向轉移到失敗狀態，這個過程叫reject，對應的方法是deferred.reject（reason）；默認狀態時，還可以通過deferred.notify（update）來宣告任務執行信息，如執行進度；狀態的轉移是一次性的，一旦任務由初始的pending轉為其他狀態，就會進入到下一個任務的執行過程中。

when.js的異步處理機制大大的方便了D3.JS在處理大數據時的任務調度問題。

3.2 MVC

Backbone.js依賴于Underscore.js，部分依賴于jquery，因此在熟悉Backbone.js之前必須對Underscore.js和jquery的語法特點完全了解。某種程度上來說必須有Underscore.js和jquery的開發經驗才能更好的使用Backbone.js。它可以根據MVC當中模型中的數據更新，自動對超文本進行更新。這種特點無疑為程序開發和代碼維護提供了方便。并且restful的代碼風格也是現在使用最廣泛的代碼風格，更加方便了程序的開發。

3.3 后臺搭建

后臺使用JS開發的node.js開源平臺，作為JS開發的平臺，node.js在性能上非常強大。簡單的說node.js就是運行在服務端的JavaScript，并有著有優秀的并發功能。

node.js是建立在Chrome的JavaScript運行時之上的平臺，它用于構建快速、可擴展的網絡應用程序[4]。node.js使用一種事件驅動、非阻塞的I/O模型，這也使得跨分布式設備的數據密集型實時應用更加輕量、高效和完美[5]。node.js良好的并發性能無疑是氣象大數據可視化最好的選擇。

4 結語

D3通過TOPOJSON的地理信息數據繪制吉林省區域地圖，通過編寫的小程序將GRIDS數據解析為JSON格式的要素信息。將溫度濕度數據解析為色斑圖，將風的強度用色斑形式顯示，根據風的方向數據繪制成風場動畫圖。When.js將系統任務分為地圖繪制，GRIDS數據解析，公式計算和D3數據可視化4個部分。作為D3繪制的可視化系統優點就是交互速度快，量化清晰，便于分析和研究。

5 參考文獻

[1] DEWAR M.Getting Started with D3[M].England：O′Reilly Media，2012.

[2] 張運良，張兆鋒，張曉丹，等.使用D3.js的知識組織系統Web動態交互可視化功能實現[J].現代圖書情報技術，2013（增刊1）：127-131.

[3] 朱建軍.基于D3的可視化組件開發及其在研討系統中的應用[D].武漢：湖北工業大學，2015.

[4] 鐘強.Node.JS平臺下Web前端架構的研究[J].無線互聯科技，2013（12）：124.

[5] 巴特爾.基于NodeJS的理財應用的設計與實現[D].長春：吉林大學，2014.