基于Web技術的傳染病數據可視化平臺的設計與實現

李金玲 袁 鑫 楊 彪

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

0 引 言

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

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

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

1 平臺設計原則

1.1 直觀數據展示

面向非醫學類普通用戶,平臺應能夠通過適當的圖形化處理方式,將海量、多維、復雜的傳染病相關數據進行展示,使用戶能夠將注意力集中在最感興趣的傳染病數據信息中,輕松地瀏覽數據概貌,清晰地觀察數據細節,多維度獲取數據印象[6]。

1.2 增強數據理解

在為用戶提供直觀數據呈現基礎之上,平臺應該能夠為其深入理解數據提供輔助。根據數據類別選取最恰當的圖表可視化形式能夠保證數據的有效展示。同時應注重時間軸、視覺屬性、區域縮放、輔助參考、上卷下鉆、數據聯動等動態信息呈現與交互方式的有效利用,以便為用戶提供靈活便捷的數據互動,從而提高對數據的深入理解。

1.3 輔助探索數據

數據呈現的交互化使輔助用戶探索和發現隱含信息的重要抓手[7]。面向專業用戶,平臺應能夠提供諸如個性化的傳染病數據探索等深層次交互,允許用戶通過相應的交互操作實現針對性的數據輸出呈現。

2 可視化分析平臺系統設計

2.1 總體架構設計

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

(1) 整體技術實現。如圖1所示。

圖1 平臺整體技術實現

分析項目各種功能模塊,以及各功能模塊之間的關系,設計項目數據結構。分析各模塊的子模塊,以及要完成的各種詳細功能,功能之間要相互關聯,完成數據庫建設,確立詳細接口設計以及調用關系。通過后端技術,完成數據分析、數據存儲,形成服務返回給前端。前端完成頁面設計再通過可視化技術實現數據的渲染,同時分電腦端和移動端兩部分設計,最后再部署到服務器上。

(2) 架構展示。如圖2所示。

圖2 平臺架構

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

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

圖3 平臺數據流程

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

2.2 平臺結構設計

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

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

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

2.3 數據庫設計

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

表1 傳染病分類表(contagion_sort)

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

表3 年限分布表(annual_distribution)

3 可視化分析平臺具體實現

3.1 相關技術

平臺基于Vue、ECharts、Three、Spark、Springboot等技術,前端采用MVVM架構,是一個典型的SPA項目,后端采用mvc架構風格,基于Java面向微服務設計,Spark基于內存迭代計算框架,實現對數據的時間與空間分析,整體采用B/S結構開發實現,主要涉及如下相關技術：

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

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

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

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

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

3.2 主要功能實現過程

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

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

import Vue from ′vue′

import App from ′./App′

import router from ′./router′

new Vue({

el： ′#app′,

router,

components： { App },

template： ′′

})

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

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);

}

});

}

}

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

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

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

圖6 ECharts渲染后傳染病數據柱狀圖與雷達圖視圖

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

圖7 ECharts渲染后傳染病數據餅圖與地圖視圖

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

圖8 ECharts渲染后傳染病數據旭日圖視圖

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

圖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文件中導入相關sparkCore與sparkSql的依賴,部分關鍵代碼如下：

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

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 結 語

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