陳暉 范玉鑫 陳楊 吳天亭

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

關(guān)鍵詞 D3.JS；大數(shù)據(jù)；可視化；氣象；吉林省

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

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

1 氣象大數(shù)據(jù)可視化現(xiàn)狀

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

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

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

2 吉林省WRF模式數(shù)值預報可視化系統(tǒng)總體設(shè)計

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

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

3 D3.JS和SVG相關(guān)技術(shù)

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

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

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

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

3.1 異步處理

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

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

when.js的異步處理機制大大的方便了D3.JS在處理大數(shù)據(jù)時的任務(wù)調(diào)度問題。

3.2 MVC

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

3.3 后臺搭建

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

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

4 結(jié)語

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

5 參考文獻

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

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

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

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

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