李金玲 袁 鑫 楊 彪

(南華大學(xué)計(jì)算機(jī)學(xué)院 湖南 衡陽(yáng) 421001)

0 引 言

數(shù)據(jù)可視化旨在借助于圖形化手段,清晰有效地傳達(dá)與溝通信息,是一種以直觀方式傳遞抽象信息的方法,是理解復(fù)雜數(shù)據(jù)的不可或缺的工具。隨著計(jì)算機(jī)技術(shù)的成熟和搜索引擎技術(shù)的發(fā)展,政府信息公開化,眾包模式的興起,人們獲取和解讀數(shù)據(jù)的可能性大大提高?；跀?shù)據(jù)挖掘、理解數(shù)據(jù)基礎(chǔ)上的數(shù)據(jù)可視化,成為一個(gè)新的發(fā)展方向和突破。

可視化技術(shù)應(yīng)用于傳染病領(lǐng)域可以追溯到較早的19世紀(jì),英國(guó)醫(yī)生通過標(biāo)記地圖發(fā)現(xiàn)了霍亂的源頭,幫助控制當(dāng)時(shí)的倫敦霍亂疫情,這也被認(rèn)為是數(shù)據(jù)可視化的應(yīng)用典范[1]。隨著計(jì)算機(jī)技術(shù)推動(dòng)可視化技術(shù)的不斷進(jìn)步,許多學(xué)者開始探索面向大數(shù)據(jù)的更加多元化的傳染病相關(guān)領(lǐng)域可視化方法。例如金思辰等[2]通過構(gòu)建交互式可視分析系統(tǒng),幫助用戶分析疾病的時(shí)空分布,利用熱力圖輔助查看聚類信息,并通過案例對(duì)系統(tǒng)進(jìn)行評(píng)估。胡雪蕓等[3]利用可視化技術(shù)對(duì)肺結(jié)核疾病進(jìn)行分析。吳靜等[4]對(duì)傳染病相關(guān)的可視化虛擬仿真實(shí)驗(yàn)教學(xué)進(jìn)行了分析。李拓[5]對(duì)信息可視化技術(shù)在疫情中的應(yīng)用案例進(jìn)行分析,以提供有價(jià)值的可視化范本。新型冠狀病毒疫情進(jìn)一步推動(dòng)了數(shù)據(jù)可視化在傳染病領(lǐng)域的運(yùn)用,我國(guó)對(duì)全球傳染病疫情信息系統(tǒng)進(jìn)行了升級(jí),使用地圖直觀展示全球傳染病疫情信息,實(shí)現(xiàn)數(shù)據(jù)可視化應(yīng)用。以上的研究與實(shí)踐是數(shù)據(jù)可視化在傳染病相關(guān)領(lǐng)域的有益探索,但大部分工作主要集中在對(duì)個(gè)例疾病的可視化分析,或面向普通用戶的可操作性偏弱,或僅提出相應(yīng)的設(shè)計(jì)范式,缺少整合性的平臺(tái)支持等。

鑒于以上的不足,本文設(shè)計(jì)基于ECharts、Three、Spark等技術(shù)的傳染病數(shù)據(jù)可視化分析平臺(tái),將我國(guó)法定的甲、乙、丙三類傳染病的相關(guān)信息進(jìn)行集成處理,面向普通用戶利用可視化技術(shù)直觀地展現(xiàn)各傳染病的相關(guān)信息。面向?qū)I(yè)用戶利用Spark等大數(shù)據(jù)技術(shù)實(shí)現(xiàn)傳染病相關(guān)熱點(diǎn)數(shù)據(jù)的爬取和數(shù)據(jù)的分析挖掘,提供更為全面的數(shù)據(jù)相關(guān)性參考。

1 平臺(tái)設(shè)計(jì)原則

1.1 直觀數(shù)據(jù)展示

面向非醫(yī)學(xué)類普通用戶,平臺(tái)應(yīng)能夠通過適當(dāng)?shù)膱D形化處理方式,將海量、多維、復(fù)雜的傳染病相關(guān)數(shù)據(jù)進(jìn)行展示,使用戶能夠?qū)⒆⒁饬性谧罡信d趣的傳染病數(shù)據(jù)信息中,輕松地瀏覽數(shù)據(jù)概貌,清晰地觀察數(shù)據(jù)細(xì)節(jié),多維度獲取數(shù)據(jù)印象[6]。

1.2 增強(qiáng)數(shù)據(jù)理解

在為用戶提供直觀數(shù)據(jù)呈現(xiàn)基礎(chǔ)之上,平臺(tái)應(yīng)該能夠?yàn)槠渖钊肜斫鈹?shù)據(jù)提供輔助。根據(jù)數(shù)據(jù)類別選取最恰當(dāng)?shù)膱D表可視化形式能夠保證數(shù)據(jù)的有效展示。同時(shí)應(yīng)注重時(shí)間軸、視覺屬性、區(qū)域縮放、輔助參考、上卷下鉆、數(shù)據(jù)聯(lián)動(dòng)等動(dòng)態(tài)信息呈現(xiàn)與交互方式的有效利用,以便為用戶提供靈活便捷的數(shù)據(jù)互動(dòng),從而提高對(duì)數(shù)據(jù)的深入理解。

1.3 輔助探索數(shù)據(jù)

數(shù)據(jù)呈現(xiàn)的交互化使輔助用戶探索和發(fā)現(xiàn)隱含信息的重要抓手[7]。面向?qū)I(yè)用戶,平臺(tái)應(yīng)能夠提供諸如個(gè)性化的傳染病數(shù)據(jù)探索等深層次交互,允許用戶通過相應(yīng)的交互操作實(shí)現(xiàn)針對(duì)性的數(shù)據(jù)輸出呈現(xiàn)。

2 可視化分析平臺(tái)系統(tǒng)設(shè)計(jì)

2.1 總體架構(gòu)設(shè)計(jì)

為實(shí)現(xiàn)數(shù)據(jù)的高效性存儲(chǔ)、服務(wù)的分層性運(yùn)行、信息的可視化分析,平臺(tái)使用多元編程語(yǔ)言和框架技術(shù)來進(jìn)行前后端交互、大數(shù)據(jù)存儲(chǔ)。后端考慮到數(shù)據(jù)的龐大,時(shí)間的分布性明顯,采用Hive數(shù)據(jù)倉(cāng)庫(kù)來進(jìn)行大量高效率存儲(chǔ),采用Spark基于內(nèi)存迭代計(jì)算框架進(jìn)行數(shù)據(jù)分析。同時(shí),為了進(jìn)行及時(shí)和穩(wěn)定的交互,使用MySQL關(guān)系型數(shù)據(jù)庫(kù)對(duì)實(shí)現(xiàn)系統(tǒng)功能的數(shù)據(jù)進(jìn)行存儲(chǔ)。后端采用MVC架構(gòu)風(fēng)格,分離服務(wù)層、控制層、持久層,Dubbo+Springboot面向微服務(wù)架構(gòu)將平臺(tái)所需功能數(shù)據(jù)封裝成訂閱服務(wù)。前端使用Vue、ECharts、Three等框架,并設(shè)計(jì)相關(guān)請(qǐng)求接口,向后端服務(wù)進(jìn)行數(shù)據(jù)請(qǐng)求,并將數(shù)據(jù)進(jìn)行可視化展示。

(1) 整體技術(shù)實(shí)現(xiàn)。如圖1所示。

圖1 平臺(tái)整體技術(shù)實(shí)現(xiàn)

分析項(xiàng)目各種功能模塊,以及各功能模塊之間的關(guān)系,設(shè)計(jì)項(xiàng)目數(shù)據(jù)結(jié)構(gòu)。分析各模塊的子模塊,以及要完成的各種詳細(xì)功能,功能之間要相互關(guān)聯(lián),完成數(shù)據(jù)庫(kù)建設(shè),確立詳細(xì)接口設(shè)計(jì)以及調(diào)用關(guān)系。通過后端技術(shù),完成數(shù)據(jù)分析、數(shù)據(jù)存儲(chǔ),形成服務(wù)返回給前端。前端完成頁(yè)面設(shè)計(jì)再通過可視化技術(shù)實(shí)現(xiàn)數(shù)據(jù)的渲染,同時(shí)分電腦端和移動(dòng)端兩部分設(shè)計(jì),最后再部署到服務(wù)器上。

(2) 架構(gòu)展示。如圖2所示。

圖2 平臺(tái)架構(gòu)

用戶端通過視圖層對(duì)系統(tǒng)界面進(jìn)行訪問,根據(jù)自己的需求,訪問某種功能,從而向控制層發(fā)起數(shù)據(jù)請(qǐng)求;控制層解析請(qǐng)求后,向業(yè)務(wù)層發(fā)起業(yè)務(wù)訪問;業(yè)務(wù)層再對(duì)持久層發(fā)起數(shù)據(jù)訪問;持久層從數(shù)據(jù)庫(kù)中獲取對(duì)應(yīng)數(shù)據(jù),并逐層返回至系統(tǒng)界面。大數(shù)據(jù)分析層會(huì)從Hive中獲取元數(shù)據(jù),進(jìn)行聚合分析,并將數(shù)據(jù)存于MySQL數(shù)據(jù)庫(kù)中。

(3) 數(shù)據(jù)流程。如圖3所示。

圖3 平臺(tái)數(shù)據(jù)流程

平臺(tái)通過爬蟲技術(shù)以及人工搜集的方法從各種網(wǎng)站信息源處獲取原數(shù)據(jù),經(jīng)過數(shù)據(jù)清洗后存于Hive數(shù)據(jù)倉(cāng)庫(kù)。并通過大數(shù)據(jù)分析技術(shù),建立算法模型以及分析模型,將原數(shù)據(jù)轉(zhuǎn)化為本系統(tǒng)所需要的數(shù)據(jù),存儲(chǔ)于MySQL數(shù)據(jù)庫(kù)中,通過JavaEE面向微服務(wù)技術(shù)形成各種服務(wù),將數(shù)據(jù)傳給前端界面,進(jìn)行展示。

2.2 平臺(tái)結(jié)構(gòu)設(shè)計(jì)

傳染病數(shù)據(jù)可視化平臺(tái)一共分為三個(gè)模塊：數(shù)據(jù)庫(kù)、陳列館以及診療室。主要功能結(jié)構(gòu)如圖4所示。

陳列館包含傳染病分類及其病原體相關(guān)信息,主要用于介紹法定甲乙傳染病的基本信息,包括其種類數(shù)量、具體傳染病病原體名稱、簡(jiǎn)介、傳染病傳播途徑、病原體3D模型以及傳染病關(guān)鍵詞信息滾動(dòng)詞云等。數(shù)據(jù)庫(kù)涵蓋歷年大部分傳染病的發(fā)病率死亡率以及地區(qū)發(fā)病狀況,包括數(shù)據(jù)博物館及數(shù)據(jù)調(diào)查局兩部分。其中數(shù)據(jù)博物館主要涵蓋近幾年來國(guó)內(nèi)部分傳染病的發(fā)病死亡情況,共分為四個(gè)模塊。數(shù)據(jù)調(diào)查局以時(shí)間線方式串聯(lián)起各類傳染病的首次爆發(fā)歷史背景,豐富傳染病文字?jǐn)?shù)據(jù)信息。診療室包含傳染病的臨床表現(xiàn)、預(yù)防措施以及治療途徑等基本信息。

為了使用戶有更好的體驗(yàn)感,平臺(tái)開發(fā)采用SPA(單頁(yè)面應(yīng)用)方式,用戶在切換頁(yè)面和獲取數(shù)據(jù)的時(shí)候動(dòng)態(tài)地更新頁(yè)面和內(nèi)容,不會(huì)出現(xiàn)白屏的閃屏的情況。同時(shí),在各頁(yè)面組件銷毀前,釋放其各個(gè)子組件的內(nèi)存,從而提升后續(xù)瀏覽的速度與體驗(yàn)。

2.3 數(shù)據(jù)庫(kù)設(shè)計(jì)

平臺(tái)采用MySQL管理數(shù)據(jù)信息,主要數(shù)據(jù)庫(kù)表格為傳染病分類(contagion_sort)、傳染病(contagion_main)、年限分布(annual_distribution)、空間分布(site_distribution)、傳染病歷史(contagion_hitory),如表1-表5所示。

表1 傳染病分類表(contagion_sort)

表2 傳染病基本信息表(contagion_main)

表3 年限分布表(annual_distribution)

3 可視化分析平臺(tái)具體實(shí)現(xiàn)

3.1 相關(guān)技術(shù)

平臺(tái)基于Vue、ECharts、Three、Spark、Springboot等技術(shù),前端采用MVVM架構(gòu),是一個(gè)典型的SPA項(xiàng)目,后端采用mvc架構(gòu)風(fēng)格,基于Java面向微服務(wù)設(shè)計(jì),Spark基于內(nèi)存迭代計(jì)算框架,實(shí)現(xiàn)對(duì)數(shù)據(jù)的時(shí)間與空間分析,整體采用B/S結(jié)構(gòu)開發(fā)實(shí)現(xiàn),主要涉及如下相關(guān)技術(shù)：

(1) Vue.js：構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。Vue框架最大的特點(diǎn)是自底向上逐層應(yīng)用[8]。Vue的核心庫(kù)只關(guān)注視圖層,方便與第三方庫(kù)或既有項(xiàng)目整合。在本平臺(tái)中用于構(gòu)建單頁(yè)面應(yīng)用,并實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件,整合第三方庫(kù),構(gòu)建豐富的UI視圖。

(2) ECharts：商業(yè)級(jí)數(shù)據(jù)圖表庫(kù)。ECharts是基于Java Script的開源可視化圖表庫(kù)[9],能夠應(yīng)用于PC機(jī)或移動(dòng)設(shè)備上絕大部分主流瀏覽器,底層依賴輕量級(jí)的矢量圖形庫(kù)ZRender構(gòu)建,提供直觀、交互豐富、可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。在本平臺(tái)中實(shí)現(xiàn)傳染病數(shù)據(jù)的可視化,定制出豐富的可視化圖表。

(3) Three.js：JavaScript編寫的WebGL第三方庫(kù)。提供了非常多的3D顯示功能,是一款運(yùn)行在瀏覽器中的3D引擎,利用該庫(kù)可以創(chuàng)建各種三維場(chǎng)景,包括攝影機(jī)、光影、材質(zhì)等各種對(duì)象[10]。在本平臺(tái)中實(shí)現(xiàn)病原體3D模型的交互展示。

(4) Springboot：Spring體系框架,可以簡(jiǎn)化Spring應(yīng)用程序的創(chuàng)建和開發(fā)過程,使用戶可以輕松快捷地創(chuàng)建基于Spring框架的應(yīng)用程序[11]。在本平臺(tái)實(shí)現(xiàn)中用于創(chuàng)建服務(wù)及前端交互。

(5) Spark：基于內(nèi)存的分布式迭代計(jì)算框架,其核心技術(shù)主要有Spark Core、Spark SQL和Spark Streaming,同時(shí)內(nèi)置許多算子方便對(duì)數(shù)據(jù)的分析,兼容多種框架接口[12]。在本平臺(tái)中主要用于對(duì)傳染病原始數(shù)據(jù)的清洗,對(duì)數(shù)據(jù)進(jìn)行比對(duì)、預(yù)測(cè)與分析。

3.2 主要功能實(shí)現(xiàn)過程

平臺(tái)主要由前端和后端兩大塊組成,后端通過JavaEE封裝成API,前端通過Ajax局部刷新技術(shù)獲取后端處理后的數(shù)據(jù),通過Vue和ECharts動(dòng)態(tài)地渲染到圖表之中,其主要功能實(shí)現(xiàn)如下。

(1) 基于Vue-CLI構(gòu)建SPA項(xiàng)目,完成前端路由搭建。利用Vue-CLI腳手架搭建出帶有vue-router的SPA項(xiàng)目,首先在命令提示窗口輸入以下代碼安裝Vue-CLI腳手架：npm install -g Vue-CLI。然后搭建Vue項(xiàng)目,在命令提示窗口輸入：vue init webpack。在main.js中搭建vue-router,部分關(guān)鍵代碼如下：

import Vue from ′vue′

import App from ′./App′

import router from ′./router′

new Vue({

el： ′#app′,

router,

components： { App },

template： ′′

})

(2) 通過Ajax技術(shù)調(diào)用后端API,將數(shù)據(jù)保存到Vue組件實(shí)例的data中通過ECharts的setOption函數(shù)將數(shù)據(jù)渲染到圖表中,部分關(guān)鍵代碼如下：

export default {

data(){

sjkData：{},

sjkOption：null,

sjkChart：null

},

mounted(){

var _this=this;

＄.ajax({

url：’http：//localhost：3306/api/sjkData’,

type：’get’,

dataType：’json’,

success：function(data){

_this.sjkOption=data.sjkOption;

_this.sjkOption.series[0].data=data.geoDataSwl

[years];

_this.sjkChart.setOption(_this.sjkOption);

}

});

}

}

平臺(tái)依照設(shè)計(jì)原則,根據(jù)傳染病數(shù)據(jù)類型、特點(diǎn),選取相應(yīng)的ECharts可視化圖表進(jìn)行數(shù)據(jù)展示。

在傳染病病原體信息簡(jiǎn)介面板,傳染病的整體分類采用ECharts樹圖,基于TagCanvas用詞云設(shè)計(jì)發(fā)病癥狀等關(guān)鍵詞滾動(dòng)效果,如圖5所示。

相關(guān)傳染病的發(fā)病人數(shù)及死亡人數(shù)采用柱形圖展示,兩者數(shù)據(jù)分別選用色差較大的顏色形成直觀對(duì)比,也可以移動(dòng)鼠標(biāo)至相應(yīng)傳染病查看具體數(shù)據(jù),能夠進(jìn)行縱向和橫向比較。同樣的色彩對(duì)比還運(yùn)用于第二個(gè)模塊——國(guó)內(nèi)部分傳染病的發(fā)病率及死亡率狀況,此處采用ECharts雷達(dá)圖,可完整、清晰、直觀地對(duì)比二者數(shù)據(jù)差距,如圖6所示。

圖6 ECharts渲染后傳染病數(shù)據(jù)柱狀圖與雷達(dá)圖視圖

國(guó)內(nèi)當(dāng)年甲乙類傳染病的發(fā)病率及死亡率使用餅圖顯示,如圖7所示。當(dāng)年各地區(qū)甲乙類傳染病的死亡率用ECharts行政地圖展示,其顏色深淺即表示死亡率數(shù)據(jù)的高低,同時(shí)可篩選色彩范圍來查看地區(qū)狀況。每四個(gè)模塊組成一年的數(shù)據(jù)展示,更換年份只需拖動(dòng)頁(yè)面下方的時(shí)間軸即可,操作簡(jiǎn)潔,數(shù)據(jù)翔實(shí)。

圖7 ECharts渲染后傳染病數(shù)據(jù)餅圖與地圖視圖

各類傳染病的層級(jí)分類關(guān)系利用旭日?qǐng)D展示,如圖8所示。查看具體傳染病信息時(shí),鼠標(biāo)點(diǎn)擊將會(huì)發(fā)生色彩變化及圖標(biāo)浮動(dòng)效果,旭日?qǐng)D最外圍添加了國(guó)內(nèi)各類傳染病2018年的發(fā)病人數(shù)及死亡人數(shù)的數(shù)據(jù)信息。當(dāng)點(diǎn)擊具體傳染病時(shí),右側(cè)文字信息上浮至頁(yè)面當(dāng)中,細(xì)化可視化信息。

圖8 ECharts渲染后傳染病數(shù)據(jù)旭日?qǐng)D視圖

(3) 通過Three.js框架的OBJLoader與MTLLoader加載器導(dǎo)入病原體的三維obj模型文件以及其mtl材質(zhì)文件,通過OrbitControls軌道控制器實(shí)現(xiàn)模型的360度自動(dòng)旋轉(zhuǎn)以及通過拖拽事件實(shí)現(xiàn)模型的720度交互展示,如圖9所示。部分關(guān)鍵代碼如下：

圖9 Three.js渲染后新型冠狀病毒的三維視圖

var that=this;

that.controls=new

OrbitControls(that.camera,that.renderer.domElement);

that.controls.target.set(0, 0, 0);

that.controls.autoRotate=true;

var loader=new OBJLoader();

var mloader=new MTLLoader();

that.＄nextTick(()=>{

mloader.setPath(′./static/models/′).load(that.model.modelID+′.mtl′,function(mlt){

mlt.preload();

loader.setMaterials( mlt );

loader.setPath(′./static/models/′).load(that.model.modelID+′.obj′, function(object) {

that.loadingFlag=false;

console.log(′加載完畢!′);

object.traverse(function(child) {

if (child.isMesh) {

child.castShadow=true;

child.receiveShadow=true;

}

});

object.scale.set(that.model.mscale,

that.model.mscale,that.model.mscale);

object.children[0].geometry.computeBoundingBox();

object.children[0].geometry.center();

that.scene.add(object);

animate();

});

});

})

function animate() {

that.rafId=requestAnimationFrame(animate);

var delta=clock.getDelta();

if (mixer) mixer.update(delta);

controls.update(delta);

that.renderer.render(that.scene, that.camera);

}

(4) 在Pom.xml文件中導(dǎo)入相關(guān)sparkCore與sparkSql的依賴,部分關(guān)鍵代碼如下：

(5) 數(shù)據(jù)分為本地?cái)?shù)據(jù)與Hive中的數(shù)據(jù),本地?cái)?shù)據(jù)用于測(cè)試,實(shí)際運(yùn)行時(shí)使用Spark接口從Hive中獲取數(shù)據(jù),將傳染病數(shù)據(jù)的年限與名稱作為關(guān)鍵字進(jìn)行二次排序,再通過各種算法模型進(jìn)行聚合與分析,實(shí)現(xiàn)對(duì)各種年限的傳染病相關(guān)數(shù)據(jù)的計(jì)算。進(jìn)行二次排序關(guān)鍵代碼如下：

var primitiveRdd： RDD[(String, (String, String, String))]=primitiveDataSet.rdd.map(arr=>{

val id=arr.getString(0)

val time=arr.getString(1)

(SecondSortKey(imsi.toLong,time.toLong),arr)}).

sortByKey().map(arr=>{

val pathogene=arr._2.getString(0)

val introduce=arr._2.getString(1)

val death_num=arr._2.getString(2)

val deathrate=arr._2.getString(3)

val contagion=arr._2.getString(4)

(imsi,(time,pathogene,introduce+"-"+death_num,contagion))

})

4 結(jié) 語(yǔ)

本文旨在利用數(shù)據(jù)可視化技術(shù)將傳染病的各項(xiàng)相關(guān)信息,包括其爆發(fā)歷史、臨床癥狀、傳播途徑、預(yù)防措施、治療途徑、相關(guān)熱點(diǎn)詞云、病原體3D模型等非數(shù)字?jǐn)?shù)據(jù)以及歷年來各地區(qū)、時(shí)段的傳染病情況等數(shù)字?jǐn)?shù)據(jù)以圖文結(jié)合的方式進(jìn)行展現(xiàn)。通過對(duì)數(shù)據(jù)圖表的交叉對(duì)比,幫助用戶對(duì)比任意省份、傳染病之間的相似程度,檢測(cè)其相關(guān)性。同時(shí),基于不同數(shù)據(jù)視圖之間豐富的交互使用戶直觀地感受到不同地區(qū)時(shí)段傳染病的分布情況,有效地挖掘出傳染病傳播的時(shí)空模式,快速尋找出傳染病暴發(fā)的典型地區(qū)時(shí)段以及傳播趨勢(shì),從而更好地預(yù)防、把控和分析傳染病。該技術(shù)為數(shù)據(jù)可視化在具體的學(xué)科領(lǐng)域應(yīng)用提供一定的實(shí)踐價(jià)值參考,同時(shí)也能夠在一定程度上促進(jìn)數(shù)據(jù)可視化技術(shù)的發(fā)展。