資料視覺化:核心、互動、分類與工具

語言: CN / TW / HK

theme: channing-cyan highlight: a11y-dark


資料視覺化:核心、互動、分類與工具

一、寫在前面

1.1 相關背景

麥肯錫公司2011年提出【大資料時代】,大資料時代的提出背景: IDC於2011年釋出一項統計表明,再過去5年中,每年全世界資料總量均比前一年翻一番;2011年全世界建立和複製的資料總量達到1.8ZB(1ZB=109TB)。當前資訊處理和分析手段,遠遠落後於資料獲取速度。人們認識到資料的價值。

隨著“大資料時代”的出現,人們對資料的價值也日益重視,在各種展臺會議,展覽會,推薦會,常常可見到許多的大螢幕,大螢幕上通過一些 炫酷的圖譜和色彩,將資料資訊展現出來,那大螢幕上的內容的開發,通常就是前端程式設計師的工作之一,也就是常說的“大屏”與資料視覺化的具體實現。

這種具體實現,例如下面這幾張2020年天貓雙十一的大屏截圖:

image.png

image.png

image.png

1.2 導讀

本文主要分為以下幾部分:

①資料視覺化系統核心

②互動準則

③視覺化物件分類及其工具

④web 應用開發工具

二、正文部分

2.1 資料視覺化系統核心

資料視覺化系統核心分為兩部分,一是“視覺呈現”,二是“使用者互動”。

視覺呈現是指通過合適的色彩搭配,藉助合適的圖譜工具,將資料資訊以更生動形象的視覺效果表現出來, 強調視覺效果的美觀、直觀以及藝術性。例如更炫酷的色彩搭配,能生動準確表達資料資訊特點的雷達圖、熱力圖的呈現形式。

使用者互動關注使用者和系統的互動設計,包括互動操作的合理性,是否符合大多數使用者的使用習慣, 互動操作的“障礙”是否足夠低,是否設計有合適的互動反饋等。

2.2 互動準則

① 遵循普遍適用原則

遵循普遍適用原則的意思是,互動設計要符合大多數使用者的文化習慣使用習慣,在閱讀習慣上,在審美上,能被大多數人接收並欣賞; 在互動操作設計上,能讓大多數使用者輕鬆學會。

②互動延時

互動延時準則,要求使用者和系統的互動操作延時期間具有及時有效的視覺反饋提示,以及每次互動的延時的時長不宜過長。 例如使用者的一個上傳行為,系統應及時給予上傳進度提示,一個查詢或更新資料行為,系統反饋結果的時間,不應讓使用者“等太久”。

③互動成本

互動成本關注的是互動所花費的使用者成本是否足夠低,包括互動的記憶成本,理解成本,也就是要求互動應該是理解負擔輕的, 記憶負擔輕的,簡單的,符合使用者習慣的。禁忌複雜多層巢狀的互動設計。

④適度的互動場景變化

互動設計的互動過程應當配上適度的互動場景變化,適度的場景變化可以增強互動感,增強反饋感,甚至可以減輕使用者的“視覺疲勞”, 愉悅使用者的心情,及時“留住”使用者的注意力。凡事過猶不及,互動場景變化也強調“適度性”和“可接受度”。

2.3 視覺化物件分類及其工具

視覺化分類從不同維度可以有多種劃分,這裡提到的是按照視覺化物件分類,可分為:醫學視覺化、科學視覺化、資訊視覺化、可視分析四類。

這些分類也分別具有相應的軟體工具支援,如下:

①醫學視覺化軟體:3D Slicer、VolView

3D Slicer是一個用於醫學影象分析和視覺化的開源軟體平臺,你可以使用它來進行醫學影象的標註和互動式分割並可以得到三維的渲染圖。作為一款具有豐富擴充套件能力的跨平臺(Linux、MacOS、Windows)軟體,3D Slicer已經被大量應用到影象指導的醫學治療工作中。 同時作為一款開源軟體,Slicer由來自世界範圍的工程師或生物醫學研究者花費了近20年的時間共同開發和維護。

② 科學視覺化軟體:GrADS、OpenDx、AVS、Amira、IDL、World Wind、Vis5D、Goolge Earth

③資訊視覺化軟體

資訊視覺化在不同的領域也有不同的支撐工具,例如:

面向圖的視覺化軟體:IBM System G、Gephi、CiteSpace

面向高維多變數:XmdevTool、InfoScope、ParSets

面向文字視覺化:Jigsaw、IN-SPIRE

面向商業智慧:TableAu、Spotfire、Power BI、Splunk、Weave

面向公眾傳播:FlowingData、Visual.ly

④視覺化分析軟體:Gapminder、Google Public Data Explorer、Palatir

2.4 web 應用開發工具

和前端程式距離最近的就是 web 相關開發工具了,例如下面的這些:

①ECharts (免費,阿帕奇基金會孵化,有好的文件,豐富的社群案例,在做web相關的視覺化工作時,常被 web 開發人員選用,受歡迎度非常高。)

②AntV (免費,螞蟻集團全新一代資料視覺化解決方案,自述“讓資料栩栩如生”,這是一個系列,包括 G6(偏向展示,便捷的關係資料視覺化引擎與圖分析工具), X6(偏向編輯,極易定製、開箱即用、資料驅動的圖編輯引擎),L7等)

③DataV(收費,DataV旨在讓更多的人看到資料視覺化的魅力,幫助非專業的工程師通過圖形化的介面輕鬆搭建專業水準的視覺化應用。DataV提供豐富的視覺化模板, 滿足您會議展覽、業務監控、風險預警、地理資訊分析等多種業務的展示需求。)

④D3.js(Data-Driven Documents),Raphael.js,Processing.js

⑤流程視覺化:BPMN.js、X6、Jsplumb、G6-editor(已閉源)

⑥其他,例如帆軟(付費,無需編碼。FineBI資料視覺化。),Arena (即視大屏編輯器,拖拽,修改配置項做成。)等

三、寫在後面

值得一提的是,視覺化的出現要遠比“大資料時代”的概念要早,只不過當時沒和“資料”強相關, 比較早地重視和應用視覺化的行業應該是醫學行業。

另外,關於程式設計和視覺化的關係,有一種觀點是“從命令程式設計走向視覺化程式設計”。

關於正文中提到的“互動準則”,適用性不僅限於視覺化中的互動。