前言

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

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

數據可視化，不僅僅是統計圖表。本質上，任何能夠借助于圖形的方式展示事物原理、規律、邏輯的方法都叫數據可視化。

數據可視化不僅是一門包含各種算法的技術, 還是一個具有方法論的學科。一般而言，完整的可視化流程包括以下內容：

• 可視化輸入：包括可視化任務的描述，數據的來源與用途，數據的基本屬性、概念模型等;
• 可視化處理：對輸入的數據進行各種算法加工，包括數據清洗、篩選、降維、聚類等操作，并將數據與視覺編碼進行映射;
• 可視化輸出：基于視覺原理和任務特性，選擇合理的生成工具和方法，生成可視化作品。

 

 

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

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、易語言這樣的神器來實現可視化。所以，眼花繚亂的工具永遠只是輔助，真正決定你在可視化道路上走多遠的，是你對可視化理念的準確把握和執著堅守。