超級乾貨 ：一文讀懂數據可視化 ZT

前言

 

數據可視化，是指將相對晦澀的的數據經過可視的、交互的方式進行展現，從而形象、直觀地表達數據蘊含的信息和規律。

 

早期的數據可視化做爲諮詢機構、金融企業的專業工具，其應用領域較爲單一，應用形態較爲保守。步入大數據時代，各行各業對數據的重視程度與日俱增，隨之而來的是對數據進行一站式整合、挖掘、分析、可視化的需求日益迫切，數據可視化呈現出越發旺盛的生命力，表現之一就是視覺元素愈來愈多樣，從樸素的柱狀圖/餅狀圖/折線圖，擴展到地圖、氣泡圖、樹圖、儀表盤等各式圖形。表現之二是可用的開發工具愈來愈豐富，從專業的數據庫/財務軟件，擴展到基於各種編程語言的可視化庫，相應的應用門檻也愈來愈低。

 

數據可視化，不只僅是統計圖表。本質上，任何可以藉助於圖形的方式展現事物原理、規律、邏輯的方法都叫數據可視化。

 

數據可視化不只是一門包含各類算法的技術, 仍是一個具備方法論的學科。通常而言，完整的可視化流程包括如下內容：

 

• 可視化輸入：包括可視化任務的描述，數據的來源與用途，數據的基本屬性、概念模型等；

• 可視化處理：對輸入的數據進行各類算法加工，包括數據清洗、篩選、降維、聚類等操做，並將數據與視覺編碼進行映射；

• 可視化輸出：基於視覺原理和任務特性，選擇合理的生成工具和方法，生成可視化做品。

 

 

 

實際上，從「數據可視化」的命名，便很容易看出數據可視化從業者如何開始可視化設計，那即是：處理數據，設計視覺，完成從數據空間到可視空間的映射, 必要時重複數據處理和圖形繪製的循環組合。

 

1. 分析數據

 

首先，咱們須要對數據作一個全面而細緻的解讀，數據的特色決定着可視化的設計原則。每項數據都有特定的屬性（或稱特徵、維度）和對應的值，一組屬性構成特徵列表。按照屬性的類型，數據能夠分爲數值型、有序型、類別型，數值型又能夠進一步分爲固定零點和非固定零點。其中，固定零點數據囊括了咱們大多數的數據對象，它們均可以對應到數軸上的某個點；非固定零點主要包括以數值表示的特定含義，如表示地理信息的經緯度、表示日期的年月日等，在分析非固定零點數據時，咱們更在乎的是它們的區間。

 

在對數據作過預處理和分析以後，咱們就可以觀察出待處理數據的分佈和維度，再結合業務邏輯和可視化目標，有可能還要對數據作某些變換，這些變換包括：

 

• 標準化，經常使用的手段包括（0，1）標準化或（-1，1）標準化，分別對應的是sigmoid函數和tanh函數，這麼作的目的在於使數據合法和美觀，但在這一過程當中可能丟失影響數據分佈、維度、趨勢的信息，應該予以特別注意；

• 擬合/平滑，爲表現數據變化趨勢，使受衆對數據發展有所預測，咱們會引入迴歸來對數據進行擬合，以達到減小噪音，凸顯數據趨勢的目的；

• 採樣，有些狀況下，數據點過多，以致於不易可視化或者影響視覺體驗，咱們會使用隨機採樣的方法抽取部分數據點，抽樣結果與全集近似分佈，同時不影響可視化元素的對比或趨勢；

• 降維，通常而言，同一可視化圖表中可以承載的維度有限（很難超過3個維度），必須對整個數據集進行降維處理。

 

2. 可視化設計

 

在開始設計以前，咱們須要對人類視覺以及注意力做簡要分析，這決定着咱們如何在第一時間抓住受衆的注意力。

 

人類視覺感知到心理認知的過程要通過信息的獲取、分析、概括、解碼、儲存、概念、提取、使用等一系列加工階段，每一個階段須要不一樣的人體組織和器官參與。簡單來說，人類視覺的特色是：

 

• 對亮度、運動、差別更敏感，對紅色相對於其餘顏色更爲敏感；

• 對於具有某些特色的視覺元素具有很強的「腦補」能力，好比空間距離較近的點每每被認爲具備某些共同的特色；

• 對眼球中心正面物體的分辨率更高，這是因爲人類晶狀體中心區域錐體細胞分佈最爲密集；

• 人們在觀察事物時習慣於將具備某種方向上的趨勢的物體視爲連續物體；

• 人們習慣於使用「經驗」去感知事物總體，而忽略局部信息。

 

這裏引入一個概念——可視編碼，它數據信息映射爲可視化元素的技術，其一般具備表達直觀、易於理解和記憶的特性。數據包含屬性和值，相應可視編碼也由兩部分組成：標記和視覺通道，標記表明數據屬性的分類，視覺通道表示人眼所能看到的各類元素的屬性，包括大小、形狀、顏色等，每每用來展現屬性的定量信息。例如，對於柱狀圖而言，標記就是矩形，視覺通道就是矩形的顏色、高度或寬度等。

 

數據可視化的設計目標和製做原則在於信、達、雅，即一要精準展示數據的差別、趨勢、規律，二要準確傳遞核心思想，三要簡潔美觀，不攜帶冗餘信息。結合人的視覺特色，很容易總結出好的數據可視化做品的基本特徵：

 

• 讓用戶的視線聚焦在可視化結果中最重要的部分；

• 對於有對比需求的數據，使用亮度、大小、形狀來進行編碼更佳；

• 使用盡可能少的視覺通道編碼數據，避免干擾信息。

 

3. 可視編碼的選擇

 

如同只學過視聽語言並不能設計出可用的電影分鏡同樣，數據可視化這一藝術設計色彩濃厚的工做絕非作過幾個餅圖、柱狀圖就能勝任。在開始涉足實踐講解以前，咱們須要解決如下疑問： 

 

可視化設計中優先選擇哪些視覺通道？有多少種視覺通道可供使用？某個視覺通道能編碼什麼信息，能包含多少信息量？視覺通道表達信息能力的區別？哪些視覺通道互不相關而哪些又相互影響？ 

 

看看下圖，或許能從必定程度上給出答案：

 

 

上圖列舉了數據可視化做品中經常使用的視覺編碼通道，針對同種數據類型，採用不一樣的視覺通道帶來的主觀認知差別很大。數值型適合用可以量化的視覺通道表示，如座標、長度等，使用顏色表示的效果就大打折扣，且容易引發歧義；相似地，序列型適合用區分度明顯的視覺通道表示，類別型適合用易於分組的視覺通道。

 

須要指出的是，上圖蘊含的理念能夠應對絕大多數應用場景下可視化圖形的設計「套路」，但數據可視化做爲視覺設計的本質決定了「山無常勢，水無常形」，任何可視化效果都拒絕生搬硬套，更不要說數據可視化的應用還要受到業務、場景和受衆的影響。

 

4. 配色

 

相信每個碼農出身的數據分析師在作可視化設計時，都會對色彩如何搭配產生過困惑。色彩理論看起來簡單卻又乏味，用起來卻不是那麼駕輕就熟。那麼，如何讓數據可視化做品簡約、靈動、美觀？下面介紹一些通用技巧。

 

1）色調與明度的跨度都要大

 

要確保配色很是容易辨識與區分，它們的明度差別必定要夠大。明度差別須要全局考慮。可是，有一組明度跨度大的配色還不夠。配色越多樣，用戶越容易將數據與圖像聯繫起來。若是能善加利用色調的變化，就能使用戶接受起來更加輕鬆。對於明度與色調，跨度越大，就能承載越多的數據。下圖展現了相同色系下不一樣明度的色階對比：

 

 

2）仿照天然的配色

 

各行各業的設計師都知道這個小祕密，對於數據可視化工程師而言，這招更是屢試不爽。一個簡單有效的方法是：找出心儀的圖片，好比惟美的風景照片，使用photoshop中「濾鏡—馬賽克—調整多邊形形狀和大小」便可看到該圖片中包含的各類顏色，而後利用吸管工具選出幾種顏色便可：

 

 

3）使用漸變

 

不管你須要2種顏色仍是10種，漸變中都能提取出這些顏色，讓可視化圖表感受天然，同時保有足夠的色調與明度差別。一個使用漸變的好方法就是：在Photoshop中拉輔助線到斷點位置，與數據的數量對應上，而後持續對漸變進行測試與調整。

 

 

能夠看到，配色表緊挨着頂部的灰度漸變，調整漸變疊加（以後就能獲得精確的漸變色值），而後從那些斷點處選取顏色，測試配色在實際運用中的效果。

 

4）使用配色工具

 

網上各類免費資源比比皆是，對於想設計出靚麗效果又機關用盡的人而言，多參考如下這些工具是一個好辦法：

 

• ColorHunt——高質量配色方案，可以快速預覽，若是你只須要4種顏色，這是絕佳的資源；

• Kuler——photoshop配色工具，Adobe家出的，應該錯不了；

• Chroma.js——Chroma.js是一個微型的JavaScript庫，適用於各類顏色處理的，可實現各類顏色的轉換和色階處理；

• Color brewer——地圖配色利器，若是你對基於地圖的可視化配色方案感到困惑，這個在線工具應該可以幫到你。

 

此外，關於配色還有一些小技巧可供參考：遵循公司既定的品牌風格；根據數據描述的對象來定，如數據描述的是咖啡，則能夠考慮使用咖色系；使用季節或者節日相關主題的色彩；若是你實在對顏色搭配感到頭疼，那就多使用萬能的「灰色」和陰影。

 

統計圖表

 

統計圖表是使用最先的可視化圖形，在數百年的進化過程當中，逐漸造成了基本「套路」，符合人類感知和認知，進而被普遍接受。

常見於各類分析報告的有柱狀圖、折線圖、餅圖、散點圖、氣泡圖、雷達圖，對於這些最經常使用的圖表類型，下表能夠爲你指明大體方向：

 

 

咱們在製做可視化圖表時，首先要從業務出發，優先挑選合理的、符合慣例的圖表，尤爲是若是你的用戶層次比較多樣的狀況下，請兼顧各個年齡段或者不一樣認知能力的用戶的需求；其次是根據數據的各類屬性和統計圖表的特色來選擇，例如餅圖並不適合用做展現絕對數值，只適用於反映各部分的比例。對於經常使用圖表，帶着目的出發，遵循各類約束，相信你能找到合適的圖表：

 

 

除了經常使用的圖表以外，可供咱們選擇的還有：

 

• 漏斗圖：漏斗圖適用於業務流程比較規範、週期長、環節多的流程分析，經過漏斗各環節業務數據的比較，可以直觀地發現和說明問題所在。

• （矩形）樹圖：一種有效的實現層次結構可視化的圖表結構，適用於表示相似文件目錄結構的數據集；

• 熱力圖：以特殊高亮的形式顯示訪客熱衷的頁面區域和訪客所在的地理區域的圖示，它基於GIS座標，用於顯示人或物品的相對密度；

• 關係圖：基於3D空間中的點—線組合，再加以顏色、粗細等維度的修飾，適用於表徵各節點之間的關係；

• 詞雲：各類關鍵詞的集合，每每以字體的大小或顏色表明對應詞的頻次；

• 桑基圖：一種有必定寬度的曲線集合表示的圖表，適用於展示分類維度間的相關性，以流的形式呈現共享同一類別的元素數量，好比展現特定羣體的人數分佈等；

• 日曆圖：顧名思義，以日曆爲基本維度的對單元格加以修飾的圖表。

 

 

數據可視化的工具

 

新型的數據可視化產品層出不窮，基本上各類語言都有本身的可視化庫，傳統數據分析及BI軟件也都擴展出必定的可視化功能，再加上專門的用於可視化的成品軟件，咱們的可選範圍實在是太多了。那麼，咱們要選擇的可視化工具，必須知足互聯網爆發的大數據需求，必須快速的收集、篩選、分析、概括、展示決策者所須要的信息，並根據新增的數據進行實時更新。

 

• 實時性：數據可視化工具必須適應大數據時代數據量的爆炸式增加需求，必須快速的收集分析數據、並對數據信息進行實時更新；

• 簡單操做：數據可視化工具知足快速開發、易於操做的特性，能知足互聯網時代信息多變的特色；

• 更豐富的展示：數據可視化工具需具備更豐富的展示方式，能充分知足數據展示的多維度要求；

• 多種數據集成支持方式：數據的來源不只僅侷限於數據庫；不少數據可視化工具都支持團隊協做數據、數據倉庫、文本等多種方式，並可以經過互聯網進行展示。

 

數據可視化主要經過編程和非編程兩類工具實現。主流編程工具包括如下三種類型：從藝術的角度創做的數據可視化，比較典型的工具是 Processing，它是爲藝術家提供的編程語言；從統計和數據處理的角度，既能夠作數據分析，又能夠作圖形處理，如R，SAS；介於二者之間的工具，既要兼顧數據處理，又要兼顧展示效果，D3.js、Echarts都是很不錯的選擇，兩者這種基於Javascript的數據可視化工具更適合在互聯網上互動的展現數據。

 

1. 入門級

 

入門級的意思是該工具是可視化工做者必須掌握的技能，難度不必定小、門檻也不必定低。相反，對於可視化大拿來講，這些工具依舊起到四兩撥千斤的妙用。

 

• Excel

 

別覺得EXCEL只會處理表格，你能夠把它當成數據庫，也能夠把它當成IDE，甚至能夠把它當成數據可視化工具來使用。它能夠建立專業的數據透視表和基本的統計圖表，但因爲默認設置了顏色、線條和風格，使其難以建立用於看上去「高大上」視覺效果。儘管如此，我仍然推薦你使用Excel。 

 

 

• Tableau

 

 

相信每個接觸到數據可視化的人都據說過Tableau，它須要一些結構化的數據， 也須要你懂一些BI。 它不須要編程，而僅僅經過簡單的拖拽操做便可完成驚豔的效果。對比Excel，它是專業應對數據可視化方案的利器，主要表如今數據可視化、聚焦/深挖、靈活分析、交互設計等功能。Tableau最大的缺點在於它是商業軟件，我的使用的話只有14天的免費期，而官方售價不菲。

 

 

2. 在線數據可視化

 

• Google Charts

 

Google Charts是一個免費的開源js庫，使用起來很是簡單，只須要在script標籤中將src指向https://www.gstatic.com/charts/loader.js而後便可開始繪製。它支持HTML5/SVG，能夠跨平臺部署，並特地爲兼容舊版本的IE採用了vml。

 

 

在新版google charts 發佈以前，google有個相似的產品叫作Google Charts API，不一樣之處在於後者使用http請求的方式將參數提交到api，然後接口返回一張png圖片。如打開http://chart.googleapis.com/chart?cht=bvg&chs=250x150&chd=s:Monkeys&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt，便可顯示下圖：

 

 

• Flot

 

Flot是一個很棒的線圖和條形圖建立工具，能夠運用於支持canvas的全部瀏覽器——意味着大多數主流瀏覽器。這是一個jQuery庫，若是你已經熟悉jQuery，你就能夠容易的對圖像進行回調、風格和行爲操做。 浮懸的優勢是你能夠訪問大量的調用函數，這樣就能夠運行你本身的代碼。設定一種風格，可讓在用戶懸停鼠標、點擊、移開鼠標時展現不一樣的效果。比起其餘製圖工具，浮懸給予你更多的靈活空間。浮懸提供的選項很少，但它能夠很好地執行常見的功能。 

 

 

• D3

 

D3（Data Driven Documents）是支持SVG渲染的另外一種JavaScript庫。可是D3可以提供大量線性圖和條形圖以外的複雜圖表樣式，例如Voronoi圖、樹形圖、圓形集羣和單詞雲等。D3.js是數據驅動文件（Data-Driven Documents）的縮寫，他經過使用HTML\CSS和SVG來渲染精彩的圖表和分析圖。D3對網頁標準的強調足以知足在全部主流瀏覽器上使用的可能性，使你免於被其餘類型架構所捆綁的苦惱，它能夠將視覺效果很棒的組件和數據驅動方法結合在一塊兒。

 

 

• Echarts

 

百度出品的優秀產品之一，也是國內目前開源項目中少有的精品。一個純 Javascript 的圖表庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器，底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。3.0版本中更是加入了更多豐富的交互功能以及更多的可視化效果，而且對移動端作了深度的優化。Echarts最使人心動的是它豐富的圖表類型，以及極低的上手難度。

 

 

• Highcharts

 

在Echarts出現之初，功能還不是那麼完善，可視化工做者每每會選擇HighCharts。Highcharts 系列軟件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款軟件，均爲純 JavaScript 編寫的 HTML5 圖表庫。Highcharts 是一個用純 JavaScript 編寫的一個圖表庫， 可以很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表。Highstock 是用純 JavaScript 編寫的股票圖表控件，能夠開發股票走勢或大數據量的時間軸圖表，Highmaps 是一款基於 HTML5 的優秀地圖組件。

 

 

• R

 

嚴格來講，R是一種數據分析語言，與matlab、GNU Octave並列。然而ggplot2的出現讓R成功躋身於可視化工具的行列，做爲R中強大的做圖軟件包，ggplot2牛在其自成一派的數據可視化理念。它將數據、數據相關繪圖、數據無關繪圖分離，並採用圖層式的開發邏輯，且不拘泥於規則，各類圖形要素能夠自由組合。當熟悉了ggplot2的基本套路後，數據可視化工做將變得很是輕鬆而有條理。

 

 

• DataV

 

阿里出品的數據可視化解決方案，之因此推薦DataV這個後起之秀，徹底是由於淘寶雙「11」活動中實時互動大屏幕太搶眼了。DataV支持多種數據源，尤爲是和阿里系各類數據庫完美銜接，若是你的數據自己就存在阿里雲上，那選用DataV確定是個省時省力的好辦法。圖表方面，DataV內置了豐富的圖表模板，支持實時數據採集和解析。

 

 

3. 類GUI數據可視化

 

• Crossfilter 

 

Crossfilter 是一個用來展現大數據集的 JavaScript 庫，它能夠把數據可視化和GUI控件結合起來，按鈕、下拉和滑塊演變成更復雜的界面元素，使你擴展內容，同時改變輸入參數和數據。交互速度超快，甚至在上百萬或者更多數據下都很快。Crossfilter也是一種JavaScript庫，它能夠在幾乎不影響速度的前提下對數據建立過濾器，將過濾後的數據用於展現，且涉及有限維度，所以能夠完成對海量數據集的篩選與加載。

 

 

4. 進階工具

 

• Processing 

 

Processing 是用 Java 編程語言寫的，而且 Java 語言也是在語言樹中最接近 Processing 的。因此，若是您熟悉 C 或 Java 語言，Processing 將很容易學。Processing 並不包括 Java 語言的一些較爲高級的特性，但這些特性中的不少特性均已集成到了 Processing。現在，圍繞它已經造成了一個專門的社區（https://www.openprocessing.org），致力於構建各類庫以供用這種語言和環境進行動畫、可視化、網絡編程以及不少其餘的應用。

 

Processing 是一個很棒的進行數據可視化的環境，具備一個簡單的接口、一個功能強大的語言以及一套豐富的用於數據以及應用程序導出的機制。

 

 

• Weka

 

Weka是一個能根據屬性分類和集羣大量數據的優秀工具，Weka不可是數據分析的強大工具，還能生成一些簡單的圖表。weka首先是一個數據挖掘的利器，它可以快速導入咱們的結構化數據，而後對數據屬性作分類、聚類分析，幫助咱們理解數據。但他的可視化功能一樣不遜色，選擇界面中的visualization，你會馬上明白：是它讓你理解數據，而後你才讓用戶可視化數據。

 

 

結語

 

咱們所處的這個時代，是一個知識大爆發的時代。僅就編程這項技能來講，如今幾乎人人都能寫上一兩行，程序員這個羣體也比十年前有了更多維度上的擴展。各類工具的使用門檻愈來愈低，帶來的是行業壁壘日漸消弭。會用某種可視化手段，並非區分小白與專家的惟一標準，筆者曾據說有人拿unity、易語言這樣的神器來實現可視化。因此，眼花繚亂的工具永遠只是輔助，真正決定你在可視化道路上走多遠的，是你對可視化理念的準確把握和執着堅守。

 

參考資料：

1. 清華大學數據可視化課程講義——張鬆海

2.《基本圖表的特色和適用場合》

3.《20 款數據可視化工具》

4.《50個大數據可視化分析工具》