移動端數據可視化設計移動化可視化網絡化 _移動端數據可視化設計

文章插圖

文章插圖
什么是數據可視化

科學可視化（Scientific Visualization）、信息可視化（Information Visualization）和可視分析學（Visual Analytics）三個學科方向通常被看成可視化的三個主要分支。而將這三個分支整合在一起形成的新學科 “數據可視化”，這是可視化研究領域的新起點。——《數據可視化》

廣義的數據可視化涉及信息技術、自然科學、統計分析、圖形學、交互、地理信息等多種學科。

科學可視化
科學可視化（Scientific Visualization）是科學之中的一個跨學科研究與應用領域，主要關注三維現象的可視化，如建筑學、氣象學、醫學或生物學方面的各種系統，重點在于對體、面以及光源等等的逼真渲染。科學可視化是計算機圖形學的一個子集，是計算機科學的一個分支。科學可視化的目的是以圖形方式說明科學數據，使科學家能夠從數據中了解、說明和收集規律。

信息可視化
信息可視化（Information Visualization）是研究抽象數據的交互式視覺表示以加強人類認知。抽象數據包括數字和非數字數據，如地理信息與文本。信息可視化與科學可視化有所不同：科學可視化處理的數據具有天然幾何結構（如磁感線、流體分布等），信息可視化處理的數據具有抽象數據結構。柱狀圖、趨勢圖、流程圖、樹狀圖等，都屬于信息可視化，這些圖形的設計都將抽象的概念轉化成為可視化信息。

可視化分析
可視分析學（Visual Analytics）是隨著科學可視化和信息可視化發展而形成的新領域，重點是通過交互式視覺界面進行分析推理。

科學可視化、信息可視化與可視分析學三者有一些重疊的目標和技術，這些領域之間的邊界尚未有明確共識，初略來說有以下區分：
科學可視化處理具有自然幾何結構（磁場、MRI 數據、洋流）的數據。信息可視化處理抽象數據結構，如樹或圖形。可視分析學將交互式視覺表示與基礎分析過程（統計過程、數據挖掘技術）結合，能有效執行高級別、復雜的活動（推理、決策）。為什么需要數據可視化人類利用視覺獲取的信息量，遠遠超出其他器官
人類的眼睛是一對高帶寬巨量視覺信號輸入的并行處理器，擁有超強模式識別能力，配合超過 50% 功能用于視覺感知相關處理的大腦，使得人類通過視覺獲取數據比任何其他形式的獲取方式更好，大量視覺信息在潛意識階段就被處理完成，人類對圖像的處理速度比文本快 6 萬倍。數據可視化正是利用人類天生技能來增強數據處理和組織效率。
可視化可以幫助我們處理更加復雜的信息并增強記憶
大多數人對統計數據了解甚少，基本統計方法（平均值、中位數、范圍等）并不符合人類的認知天性。最著名的一個例子是 Anscombe 的四重奏，根據統計方法看數據很難看出規律，但一可視化出來，規律就非常清楚。

可視化還可以有效增強人的記憶力，我們經常說的一圖勝千言就是可視化對生活的影響。
如何實現數據可視化可視化實現流程
在技術上，數據可視化最簡單的理解，就是數據空間到圖形空間的映射。

一個經典的可視化實現流程，是先對數據進行加工過濾，轉變成視覺可表達的形式（Visual Form），然后再渲染成用戶可見的視圖（View）。

可視化技術棧
具備專業素養的數據可視化工程師一般來說需要掌握以下技術棧：
基礎數學：三角函數、線性代數、幾何算法圖形相關：canvas、svg、webgl、計算圖形學、圖論工程算法：基礎算法、統計算法、常用的布局算法數據分析：數據清洗、統計學、數據建模設計美學：設計原則、美學評判、顏色、交互、認知可視化基礎：可視化編碼、可視分析、圖形交互可視化解決方案：圖表的正確使用、常見的業務的可視化場景常用的數據可視化工具
在學術界與工程界，數據可視化工具都非常之多，學術界用得比較多的是 R 語言, ggplot2, Python 可視化庫等，普通用戶喜聞樂見的是 Excel，商業上的產品是 Tableau, DOMO, PowerBI 等等，是個精彩紛呈的世界。這里有常用的 25 個數據可視化工具對比，沒有完美的可視化工具，每個工具都有各自的優缺點。下面是一張工具選擇推薦圖，根據目的分類，左上是簡單快捷，左下是故事導向，右上是為了分享分析，右側是創新型圖表，右下是分析型工具。

我們常常聽說的數據可視化

數據可視化（Data Visualization）和信息可視化（Information Visualization）是兩個相近的專業領域名詞。狹義上的數據可視化指的是將數據用統計圖表方式呈現，而信息可視化則是將非數字的信息進行可視化。前者用于傳遞信息，后者用于表現抽象或復雜的概念、技術和信息。而廣義上的數據可視化則是數據可視化、信息可視化以及科學可視化等等多個領域的統稱。——《數據可視化之美》

我們常常聽說的數據可視化大多指狹義的數據可視化以及部分信息可視化。根據數據類型和性質的差異，經常分為以下幾種類型：
統計數據可視化：用于對統計數據進行展示、分析。統計數據一般都是以數據庫表的形式提供，常見的統計可視化類庫有 HighCharts、ECharts、G2、Chart.js 等等，都是用于展示、分析統計數據。
關系數據可視化：主要表現為節點和邊的關系，比如流程圖、網絡圖、UML 圖、力導圖等。常見的關系可視化類庫有 mxGraph、JointJS、GoJS、G6 等。
地理空間數據可視化：地理空間通常特指真實的人類生活空間，地理空間數據描述了一個對象在空間中的位置。在移動互聯網時代，移動設備和傳感器的廣泛使用使得每時每刻都產生著海量的地理空間數據。常見類庫如 Leaflet、Turf、Polymaps 等等，最近 Uber 開源的 deck.gl 也屬于此類。
還有時間序列數據可視化（如 timeline）、文本數據可視化（如 worldcloud）等等。
基于Web的可視化技術
在講各種流行類庫框架前，我們先了解下 Web 圖形的底層技術規范。
底層技術規范SVG：可縮放矢量圖形（Scalable Vector Graphics），是基于可擴展標記語言（標準通用標記語言的子集）用于描述二維矢量圖形的一種圖形格式。Canvas 2D：Canvas 通過 JavaScript 來繪制 2D 圖形，通過逐像素來進行渲染。Canvas 3D WebGL：WebGL（Web Graphic Library）是一個 JavaScript API，用于在任何兼容的 Web 瀏覽器中渲染 3D 圖形。WebGL 程序由用 JavaScript 編寫的控制代碼和用 OpenGL 著色語言（GLSL）編寫的著色器代碼構成，這種語言類似于 C 或 C++，可在 GPU 上執行。
比較流行的基礎繪圖庫，基于 SVG 的有 snap.svg、rapheal.js 等，基于 Canvas 2D 的有 zrender、g 等，基于 WebGL 的有 three.js、SceneJS、PhiloGL 等，這些基礎繪圖庫可以讓上層封裝更簡單容易。
我們重點回到基于 Web 技術的數據可視化類庫。
D3
D3.js 是一個基于數據操作文檔的 JavaScript 庫。D3 可以將強大的可視化組件和數據驅動的 DOM 操作方法完美結合。
D3的優劣：
強大的 SVG 操作能力，可以非常容易的將數據映射為 SVG 屬性集成了大量數據處理、布局算法和計算圖形的工具方法強大的社區和豐富的 demoAPI 太底層，復用性低，學習與使用成本高
D3 沒有提供封裝好的組件，在復用性、易用性方面不佳，社區里有很多基于 D3 的可視化組件庫：
nvd3.js: 基于 D3 封裝了常見的折線圖、散點圖、餅圖，功能比較簡單dc.js: 除了提供了常見的圖表外還提供了一些數據處理能力c3.js: 一個輕量級的基于狀態管理的圖表庫
D3 有著 Stanford 的血脈淵源，在學術界享有很高聲譽，靈活強大使得它成為目前領域內使用最廣泛的可視化類庫，但偏底層的 API 和數據驅動模式，使得上手 D3 存在一定門檻，基于 D3 的工程實現上需要自己考慮和處理更多內容，如動畫、交互、統一樣式等，研發成本較高。
HighCharts
HighCharts 是一個用純 JavaScript 編寫的圖表庫，能夠簡單便捷的在 Web 應用上添加交互性圖表。這是在 Web 上使用最廣泛的圖表，企業使用需要購買商業授權。
HighCharts的優劣：
使用門檻極低，兼容性好使用廣泛，非常成熟樣式比較陳舊、圖表難以擴展商業上使用需要購買版權
這是圖表界的 jQuery，在世界范圍內是使用最多最廣的一個可視化類庫，但整體圖表設計比較陳舊難以擴展，同時商業公司使用需要按照使用人數購買版權，比較昂貴，阿里有購買過，目前已不推薦使用。
ECharts
ECharts 縮寫自 Enterprise Charts，企業級圖表，開源來自百度數據可視化團隊，是一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器，底層依賴另一個也是該團隊自主研發的輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。ECharts 是目前國內唯一一個入選 GitHub 全球可視化榜單的開源項目，2w+ star 全球排名第三，社區活躍，覆蓋主流前端框架和 8 種編程語言的擴展，目前國內市場占有率處于絕對領先地位。
ECharts的優劣：
豐富的圖表類型，覆蓋主流常規的統計圖表配置項驅動，三級個性化圖表樣式管理移動端優化，交互和布局適配，按需打包深度的交互式數據探索地理特效（百度遷徙，百度人氣，公交軌跡等效果）靈活性上不如 Vega 等基于圖形語法的類庫復雜關系型圖表比較難定制
ECharts 能很好滿足傳統圖表需求，但在高度靈活多樣化的可視需求面前，需要另尋出路。
Leaflet
Leaflet 是面向移動設備的交互式地圖的 JavaScript 庫。測量的 JS 只有大約 38 KB，它具有大多數開發人員需要的所有映射功能。
Leaflet的優劣：
專門針對地圖應用mobile 兼容性良好API 簡潔、支持插件機制功能比較簡單，需要具備二次開發能力
地圖專用，其他領域使用不上。目前 Google 地圖、高德地圖、百度地圖都擁有自研的 JS 庫。
deck.gl
deck.gl 是 Uber 可視化團隊基于 WebGL 開發的面向大數據分析的可視化類庫。
deck.gl的優劣：
主要以 3D 地圖可視化為主，內置了地理信息可視化常見的場景支持大規模數據的可視化需要具備 WebGL 的知識，層的擴展比較復雜
deck.gl 在 3D 地圖領域效果很贊，在其他領域不適用。
酷屏
效果炫酷
酷屏不僅僅只是形態多變，而是真正做到給用戶帶來震撼的視覺沖擊，內置近百種炫酷組件和3D特效，只有你想不到的，沒有酷屏做不到的。
開發周期短
酷屏剔除了繁瑣的更新步驟，提供豐富的二次開發接口，支持自行改進、增加組件，無需換包或打補丁，不重啟服務器的情況下即可完成組件的更新，為實施人員提供便利。
響應快速
【移動端數據可視化設計移動化可視化網絡化】支持動態局部刷新，秒級響應，各項操作流暢，即使數量巨大，用戶也不必擔心卡頓，支持拖拽式操作，簡便易上手。

移動端數據可視化設計 移動化可視化網絡化

移動端數據可視化設計移動化可視化網絡化