基于Web技術(shù)的傳染病數(shù)據(jù)可視化平臺的設(shè)計與實現(xiàn)

李金玲 袁 鑫 楊 彪

(南華大學(xué)計算機學(xué)院 湖南 衡陽 421001)

0 引 言

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

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

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

1 平臺設(shè)計原則

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

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

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

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

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

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

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

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

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

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

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

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

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

圖2 平臺架構(gòu)

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

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

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

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

2.2 平臺結(jié)構(gòu)設(shè)計

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

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

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

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

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

表1 傳染病分類表(contagion_sort)

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

表3 年限分布表(annual_distribution)

3 可視化分析平臺具體實現(xiàn)

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

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

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

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

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

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

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

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

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

(1) 基于Vue-CLI構(gòu)建SPA項目,完成前端路由搭建。利用Vue-CLI腳手架搭建出帶有vue-router的SPA項目,首先在命令提示窗口輸入以下代碼安裝Vue-CLI腳手架：npm install -g Vue-CLI。然后搭建Vue項目,在命令提示窗口輸入：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組件實例的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);

}

});

}

}

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

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

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

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

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

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

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

圖8 ECharts渲染后傳染病數(shù)據(jù)旭日圖視圖

(3) 通過Three.js框架的OBJLoader與MTLLoader加載器導(dǎo)入病原體的三維obj模型文件以及其mtl材質(zhì)文件,通過OrbitControls軌道控制器實現(xiàn)模型的360度自動旋轉(zhuǎn)以及通過拖拽事件實現(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ù)分為本地數(shù)據(jù)與Hive中的數(shù)據(jù),本地數(shù)據(jù)用于測試,實際運行時使用Spark接口從Hive中獲取數(shù)據(jù),將傳染病數(shù)據(jù)的年限與名稱作為關(guān)鍵字進行二次排序,再通過各種算法模型進行聚合與分析,實現(xiàn)對各種年限的傳染病相關(guān)數(shù)據(jù)的計算。進行二次排序關(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é) 語

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