該項目案例由萬博思圖提交申報,參與數據猿推出的《尋找新冠戰「疫」,中國數據智能產業先鋒力量》的公益主題策劃活動。
疫情當前 萬博思圖的企業責任與初心
一場突如其來的新冠疫情,讓全世界的人都始料不及。正值闔家團圓的春節時期,中國卻拉開了一場生死時速的救援,海內外社會各界紛紛行動起來,同心抗「疫」。在這場生死較量中,中國企業紛紛站了出來,結合自身業務模式,以技術、物資、服務等多種形式馳援戰疫,成為抗疫大潮中一道溫暖的風景。
而萬博思圖自疫情初始就沒有缺席。春節期間,萬博思圖領導頭帶頭向武漢捐款,萬博思圖員工們雖然身在四方,卻積極響應,通過各種渠道、形式支援武漢抗疫。
數據戰役 萬博思圖發力疫情監測防控
疫情期間,謠言與真相齊飛,而疫情實時動態數據對於居民提高自我防護意識,做好疫情防控工作,起著至關重要的作用。而疫情數據的可視化呈現(包括地圖、圖表等形式),能夠讓大眾即看即懂,對疫情發展態勢和分布有更加直觀的了解,也能助力政府進行疫情監測管控。
作為一家數據可視化企業,為了切實支持疫情防控工作,萬博思圖全體員工放棄春節假期,臨危受命,於2月初緊急開發上線疫情可視化監測大屏,幫助政府在疫情的可視化監控、疫情態勢研判、資源部署調度等方面發揮作用,方便管理人員整體把握疫情,支撐科學決策,並面向政府機構免費開放3個月,助力疫情防控。
疫情監測防控指揮大屏1
疫情監測防控指揮大屏2
除了通過大數據可視化助力科學防疫,公司也試圖從社會人文層面對此次疫情進行探析。從2月初開始,萬博思圖陸續推出疫情熱點信息圖報告,希望以圖文結合、生動明晰的形式,解讀疫情中的經濟民生百態,從更深入更全面的角度幫助大眾了解疫情、戰勝疫情。
在整個疫情可視化項目期間,萬博思圖深刻地了解了疫情數據呈現的邏輯,積累了豐富的疫情數據可視化經驗,為新冠全球疫情地圖的上線做了鋪墊。
疫情蔓延,國際疫情追蹤成當務之急
從3月底開始,國內疫情趨於平復,而國際疫情加速蔓延,全球累計確診新冠肺炎病例和死亡人數不斷攀升,全球疫情陷入焦灼狀態。國內疫情防控重點也開始轉向境外輸入防控。
為了追蹤全球疫情演變,同時幫助國內做好國際人口流動管控,萬博思圖再次緊急上線新冠全球3D數據地圖疫情,以強大的系統交互、酷炫的視覺體驗,實現對全球疫情的可視化追蹤呈現。
項目開發起止時間
1、2020年4月6日項目正式啟動
4月初,國際疫情呈現加速蔓延趨勢,為了可視化追蹤國際疫情演變,助力國際人口流動管控,萬博思圖正式啟動新冠全球疫情可視化地圖項目。
2、2020年5月5日項目一期上線
克服了數據源獲取、前端可視化呈現等眾多挑戰,歷時1個月,萬博思圖新冠全球疫情地圖一期重磅上線,並正式面向大眾開放。
3、2020年6月5日項目英文版上線
萬博思圖新冠全球疫情地圖一期英文版上線。
應用場景
本次上線的新冠全球疫情地圖,是一個具有強大交互功能的全球疫情數據實時呈現系統。它面向全球每一個關心疫情態勢的人開放,每個人都可以通過系統查看自己所在國家或所關心地區的疫情發展態勢。
整體立意創新 強大3D感知
為了以更藝術化、具象化的形式幫助大眾了解新冠病毒在全球的蔓延態勢,萬博思圖可視化設計師在系統首頁下足了功夫。
基於美國CDC發布的新冠病毒球體模型,可視化設計師創造性地模擬了人體肺部被新冠病毒入侵後的場景,並通過巧妙使用地球肌理,形象地展示了新冠病毒的入侵場景和全球疫情態勢。
使用滑鼠滾輪縮放,進入首屏3D模式,主視覺由新冠球體變成3D疫情地圖,可立體感知各國疫情態勢。同時,系統支持3D立體與2D平面雙視圖切換,方便橫向比較各國的疫情風險等級。
3D立體視圖
2D平面視圖
全球疫情熱力追蹤 實時權威數據
為了方便用戶更加直觀地評估、比較各國疫情風險等級, 系統整體以熱力圖的形式呈現,從綠色至紫色,顏色越深,疫情風險等級越高,越需要引起警惕。同時,熱力圖支持查詢各國、各地區現存確診、累計確診、累計治癒、累計死亡的實時數據,滑鼠挪至熱力圖上對應國家板塊,各維度實時數據,數據實時更新,權威準確。
多維指標體系 疫情態勢多維呈現
除了全球疫情熱力地圖,系統通過設置 重點國家新增確診趨勢圖、全球累計確診現有確診趨勢圖、病死率國家TOP10排名等多維圖表,構建起全球疫情態勢的多維疫情指標體系。
重點國家新增確診趨勢圖
全球累計確診現有確診趨勢圖
病死率國家TOP10
重點國家數據聯動下鑽疫情逐級探析
為了方便用戶重點了解某個國家的疫情態勢,系統提供強大的聯動下鑽功能,支持對單個國家的疫情數據進行省/州/市下鑽,並聯動相應數據圖表進行展示。從宏觀的全球態勢,到微觀的省市疫情,系統構建起了一個疫情逐級探析體系。
以美國為例,在平面視圖中點擊美國,即可下鑽展示美國疫情熱力地圖,同時,旁邊相應的疫情圖表也會聯動變成美國疫情實時數據,方便對美國疫情進行多維探析。
重點國家數據下鑽
強大時間軸組件 三級時間顆粒
系統底部設置萬博思圖自主研發的強大時間軸組件,並設置「年」、「月」、「日」三級時間顆粒,可逐級查看各時間節點的疫情數據。
同時,時間軸支持進程播放,點擊播放按鈕,即可聯動系統其它圖表,動態查看某一時間範圍內的疫情變化趨勢。
面臨挑戰
針對本次疫情可視化系統,為了能夠有一定突破和提升,在項目立項的時候就指定較高的目標,因此我們付出了很多的努力和挑戰,最大的挑戰有以下5點:
1、首先可視化設計是可視化系統最重要的環節。針對本次可視系統設計我們更多的創新,從整體結構,布局,動畫效果,數據表現方式以及每一處的色彩搭配,均需考慮採用了全新的設計理念和方式;
2、pc端尺寸及兼容性適配問題。一般定製化可視化項目是專門針對大屏端進行設計開發的,所以我們需要對頁面和圖表組件進行自適應和兼容性的考慮;
3、業務操作邏輯繁多,數據聯動關係複雜。有統計數據圖表、時間維度數據、地理緯度數據,不同緯度數據間還需要聯動下鑽,比如地圖下鑽、單日疫情時間軸與地圖聯動、時間軸歷史數據播放與地圖數據聯動以及下鑽地圖的時間軸聯動等等多層級聯動邏輯開發需求;
4、pc端性能優化。在展示形式上面我們有3D顯示要求、時間軸平滑操作要求,還有歷史播放接口的頻繁調取, 這一切的功能需求都對我們後端和前端的性能要求提出了巨大挑戰;
5、項目中對疫情可視化展示,要解決疫情數據源,疫情數據主要通過國家衛健委和世界衛健委官方網站發布。這兩個官方網站發布的疫情數據都不能直接用於可視化展示,數據必須經過下載文本內容,抽取疫情數據,清洗處理為結構化數據才可以進行可視化。
實施過程
該項目在我們不斷的打磨改進,經過努力,終於讓疫情數據以一種全新的展示方式呈現出來,既美觀絢麗,又簡單全面直觀的展示了疫情的演變歷程和當前國美外實時狀況。
接下來將從美術設計,技術實現和疫情數據採集三個方面介紹本次項目的具體實施過程。
可視化設計創意
針對疫情系統的可視化展示,我們在外觀設計上也採用了全新的設計理念。
1、首先入場動畫我們採用了刺突糖蛋白與地球結合的形式形成了新冠病毒的形態,漂浮在人體的肺部,生動的體現了此次疫情對人類的傷害以及在全世界範圍內的嚴重性。
2、當滑鼠滾輪向上滑動,便進入到了新冠全球數據地圖的展開頁面,整個頁面我們是從功能清晰,交互便捷的出發點上加上了我們的創意進行最終的呈現。包括頁面中顏色的使用以及圖表的形態我們始終遵循一個理念:創意新穎、展示美觀、交互邏輯清晰。
3、在中央主視覺上,我們以顏色以及分布點的大小來區分了各個國家現存確診的數量以及累計確診的數量,並以在地圖上高低不同的柱來表示各個國家累計死亡的數量。並且當滑鼠經過某一國家,可以清晰查看該國家的現存確診、累計確診、累計死亡、累計治癒的具體數據。
4、在主視覺兩側的圖表中我們可以清晰直觀的看到全球的累計確診、現有確診、新增確診、累計死亡、累計治癒等具體數據以及發展趨勢。在圖表上我們不僅是形態上的創意,顏色的使用上我們也從美觀與功能上也充分考慮了整個頁面的和諧統一,例如:黃色代表確診、紅色代表死亡等。
5、通過滑鼠滾輪的操作我們可以無縫下鑽到平面世界地圖,更加方便查看各個國家的疫情數據。
6、下方的時間軸我們設計了歷史回放按鈕,可以從時間選擇框內選取想要觀看回放的時間區間,點擊回放按鈕,在歷史回放的過程中,中間主視覺地圖的變化可以清楚生動的看到這個時間區間內各個國家的累計確診與現存確診在選定時間範圍內的發展變化趨勢。
可視展示技術
我們從架構、技術選型、數據對接上都做了相對應的實施方案,以確保項目的落地成型。
1、保證客戶在觀看的時候有良好的用戶體驗,也便於項目傳播推廣。
2、技術選型上,我們針對地圖部分採用了WebGL技術,做到了從新冠球體到疫情地球再到平面地球,最後下鑽到國家層面地圖的平滑過渡;對3D編程也使用了GLSL編程方式,這樣能充分調動硬體性能,提高渲染效率。
3、數據對接上的難點主要在於時間軸的聯動和歷史數據的播放,這主要取決於時間軸組件的設計架構和數據接口對接是否合理。我們設計的時候按歷史播放數據和地圖鑽取數據進行了詳細區分和篩選,以減少歷史播放時實時變化的圖表數量來控制前端顯示的性能開銷;在數據上我們也是主要針對歷史數據進行數據流的形式處理數據,這樣就能讓歷史數據播放的時候能更平滑流暢。
數據採集
為了保證數據的權威性和可持續採集,我們先後嘗試了各種方案,如直接爬取騰訊、百度、國家疫衛健委官網情等疫情數據或接摘錄疫情網站的數據。這些方案前者會被不斷改變的反扒技術限制,數據採集存在不可持續性,後者工作量太大。同時也考慮過一些第三方服務接口,但是這些接口數據不完整。經過分析後還是覺得國家衛健委官網和世界衛健委官網數據源最權威可靠。
因此,通過以下兩種方式解決國內和世界疫情數據的採集。
1、採集國家疫情數據。我們先從國家以及各省衛健委官網將每天發布的疫情內容保存為html文件,然後通過本地解析頁面DOM元素找到疫情內容,抽取疫情數據,結構化後持久化存儲。
國家衛健委官網疫情數據
處理持久化的國家疫情數據
2、世界疫情數據採集。從世界衛健委官網下載發布的疫情數據pdf文件,在本地批量解析pdf文件的中數據表格內容,抽取疫情數據持久化存儲。
世界衛健委官網疫情數據
處理持久化的世界疫情數據
3、經過計算,翻譯處理後數據通過接口,提供疫情標準的JSON格式數據為各種可視化圖表提供實時可篩選查詢的數據。
應用效果
與國外約翰霍普金斯大學推出的「網紅世界疫情地圖」相比,萬博思圖推出的新冠全球疫情地圖更加符合國內用戶的閱讀習慣。同時, 大量創意交互元素的加入,也使得該系統在可視化呈現上更為出色,為用戶多角度、自由地發掘更多的信息提供了環境和條件,提升用戶體驗的流暢度。
系統一經上線,便獲得網易新聞、搜狐網、極客網、國際在線、中國網、techweb、CSDN等數十家新聞媒體的轉載報導,各網站紛紛轉載,成為新的「網紅疫情地圖」,在可視化行業領域內收穫了良好的口碑,平臺的日均訪問量也激增至1萬+。
為了能讓更多用戶了解到這樣一個方便強大的疫情數據可視化平臺,我們也積極在微博、B站、抖音、知乎等社交平臺上做了推廣,全網共獲得超千萬次曝光和點讚。很多用戶給萬博思圖留言互動,正如一名普通用戶在B站給萬博思圖的留言所說「疫情期間,能擠出寶貴的企業經營時間,耗費人力物力開發這樣一個疫情可視化平臺,真的是難能可貴了。」
通過新冠全球疫情地圖項目,萬博思圖不僅履行了自己的社會責任,為疫情防控貢獻出科學的力量,更證明了自己在可視化領域的實力。在未來,萬博思圖將繼續堅守自己的初心與責任,持續優化改進,為疫情防控提供更加強大優秀的可視化產品。
關於萬博思圖
萬博思圖(webstudio),國內卓越的大數據服務知名品牌,專注數據可視化分析與展示、可視化系統可視化產品(萬博DataVis)、企業官網建設與運維、營銷推廣。自2007年成立以來,堅持以品質立足、創新驅動發展,提供各行業領域及應用場景全覆蓋的數據可視化分析展示與官網營銷解決方案。
經過多年的市場拓展,萬博思圖業務廣泛覆蓋智慧城市、智慧物流、工業網際網路、物聯網、新能源、生產可視化、網絡安全、汽車、智慧零售、電商、園區管理、經濟民生、教育服務、綠色環保、政務系統等11個行業及8個應用場景。
近年來,萬博思圖積極布局物聯網業務,加大物聯網應用探索力度,並加速推進「軟硬一體化『』進程。在整個產業生態中,我們致力於成為以應用服務與運營為核心的整體解決方案提供商和服務商。
公司擁有豐富的設計經驗、深厚的技術底蘊搭建核心團隊,秉承著匠人精神,提供可視化高端定製服務,先後服務於國家網際網路應急中心、華潤電力、百度、京東、泰康、順豐、德邦、福田、寶沃、奔馳等國家各機關單位、央企、大型品牌集團。
萬博思圖以成為最值得信賴的大數據可視化服務第一品牌為願景, 承載時代賦予的使命,展示數據魅力、洞悉數據價值,助力萬千企業實現數據驅動的精細化運營。