陳暉 范玉鑫 陳楊 吳天亭

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

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

中圖分類號(hào) S165 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 1007-5739（2016）04-0345-02

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 異步處理

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

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

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

3.2 MVC

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

3.3 后臺(tái)搭建

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

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

4 結(jié)語(yǔ)

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

5 參考文獻(xiàn)

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

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

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

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

[5] 巴特爾.基于NodeJS的理財(cái)應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)[D].長(zhǎng)春：吉林大學(xué)，2014.