資料研發學習筆記4.11：大資料之資料可視化

文章目錄

• 1 可視化概述
• • 1.1 什麼是資料可視化
  • 1.2 可視化的發展曆程
  • 1.3 可視化的重要作用
• 2 可視化工具
• • 2.1 入門級工具
  • 2.2 資訊圖表工具
  • 2.3 地圖工具
  • 2.4 時間線工具
  • 2.5 進階分析工具
• 3 可視化典型案例
• • 3.1 全球黑客活動
  • 3.2 網際網路地圖
  • 3.3 程式設計語言之間的影響力關系圖
  • 3.4 百度遷徙
  • 3.5 世界國家健康與财富之間的關系
  • 3.6 3D可視化網際網路地圖APP
• 4 可視化工具實踐
• • 4.1 D3可視化庫使用指南
  • 4.2 Easel.ly資訊圖制作實踐
  • 4.3 資料可視化之魔鏡
  • 4.4 資料可視化之ECharts

1 可視化概述

1.1 什麼是資料可視化

資料可視化是指将大型資料集中的資料以圖形圖像形式表示，并利用資料分析和開發工具發現其中未知資訊的處理過程。

資料可視化技術的基本思想是将資料庫中每一個資料項作為單個圖元素表示，大量的資料集構成資料圖像，同時将資料的各個屬性值以多元資料的形式表示，可以從不同的次元觀察資料，進而對資料進行更深入的觀察和分析。

1.2 可視化的發展曆程

霍亂地圖分析了霍亂患者分布與水井分布之間的關系，發現在有一口井的供水範圍内患者明顯偏多，據此找到了霍亂爆發的根源是一個被污染的水泵 。

資料可視化曆史上的另一個經典之作是1857年“提燈女神”南丁格爾設計的**“雞冠花圖”(又稱玫瑰圖)**，它以圖形的方式直覺地呈現了英國在克裡米亞戰争中犧牲的戰士數量和死亡原因，有力地說明了改善軍隊醫院的醫療條件對于減少戰争傷亡的重要性。

20世紀50年代，随着計算機的出現和計算機圖形學的發展，人們可以利用計算機技術在電腦螢幕上繪制出各種圖形圖表，可視化技術開啟了全新的發展階段。最初，可視化技術被大量應用于統計學領域，用來繪制統計圖表，比如圓環圖、柱狀圖和餅圖、直方圖、時間序列圖、等高線圖、散點圖等，後來，又逐漸應用于地理資訊系統、資料挖掘分析、商務智能工具等，有效促進了人類對不同類型資料的分析與了解。

随着大資料時代的到來，每時每刻都有海量資料在不斷生成，需要我們對資料進行及時、全面、快速、準确的分析，呈現資料背後的價值，這就更需要可視化技術協助我們更好地了解和分析資料，可視化成為大資料分析最後的一環和對使用者而言最重要的一環。

1.3 可視化的重要作用

在大資料時代，可視化技術可以支援實作多種不同的目标：

（1）觀測、跟蹤資料

（2）分析資料

（3）輔助了解資料

（4）增強資料吸引力

2 可視化工具

2.1 入門級工具

Excel是微軟公司的辦公軟體Office家族的系列軟體之一，可以進行各種資料的處理、統計分析和輔助決策操作，已經廣泛地應用于管理、統計、金融等領域。

2.2 資訊圖表工具

資訊圖表是資訊、資料、知識等的視覺化表達，它利用人腦對于圖形資訊相對于文字資訊更容易了解的特點，更高效、直覺、清晰地傳遞資訊，在計算機科學、數學以及統計學領域有着廣泛的應用。

（1）Google Chart API

谷歌公司的制圖服務接口Google Chart API，可以用來為統計資料并自動生成圖檔，該工具使用非常簡單，不需要安裝任何軟體，可以通過浏覽器線上檢視統計圖表。

（2）D3

D3是最流行的可視化庫之一，是一個用于網頁作圖、生成互動圖形的JavaScript函數庫，提供了一個D3對象，所有方法都通過這個對象調用。D3能夠提供大量線性圖和條形圖之外的複雜圖表樣式，例如Voronoi圖、樹形圖、圓形叢集和單詞雲等。

（3）Visual.ly

Visual.ly是一款非常流行的資訊圖制作工具，非常好用，不需要任何設計相關的知識，就可以用它來快速建立自定義的、樣式美觀且具有強烈視覺沖擊力的資訊圖表。

（4）Tableau

Tableau是桌面系統中最簡單的商業智能工具軟體，更适合企業和部門進行日常資料報表和資料可視化分析工作。Tableau實作了資料運算與美觀的圖表的完美結合，使用者隻要将大量資料拖放到數字“畫布”上，轉眼間就能建立好各種圖表。

（5）大資料魔鏡

大資料魔鏡是一款優秀的國産資料分析軟體，它豐富的資料公式和算法可以讓使用者真正了解探索分析資料，使用者隻要通過一個直覺的拖放界面就可創造互動式的圖表和資料挖掘模型。

2.3 地圖工具

地圖工具在資料可視化中較為常見，它在展現資料基于空間或地理分布上有很強的表現力，可以直覺地展現各分析名額的分布、區域等特征。當名額資料要表達的主題跟地域有關聯時，就可以選擇以地圖作為大背景，進而幫助使用者更加直覺地了解整體的資料情況，同時也可以根據地理位置快速地定位到某一地區來檢視詳細資料。

下圖就是以資料地圖形式呈現的2008年世界各國GDP資料，圖中，顔色越深的國家，其GDP越高。

（1）Google Fusion Tables

Google Fusion Tables讓一般使用者也可以輕松制作出專業的統計地圖。該工具可以讓資料表呈現為圖表、圖形和地圖，進而幫助發現一些隐藏在資料背後的模式和趨勢。

（2）Modest Maps

Modest Maps是一個小型、可擴充、互動式的免費庫，提供了一套檢視衛星地圖的API，隻有10KB大小，是目前最小的可用地圖庫，它也是一個開源項目，有強大的社群支援，是在網站中整合地圖應用的理想選擇。

（3）Leaflet

Leaflet是一個小型化的地圖架構，通過小型化和輕量化來滿足移動網頁的需要。

2.4 時間線工具

時間線是表現資料在時間次元的演變的有效方式，它通過網際網路技術，依據時間順序，把一方面或多方面的事件串聯起來，形成相對完整的記錄體系，再運用圖文的形式呈現給使用者。時間線可以運用于不同領域，最大的作用就是把過去的事物系統化、完整化、精确化。自2012年Facebook在F8大會上釋出了以時間線格式組織内容的功能後，時間線工具在國内外社交網站中開始大面積流行。

下圖顯示了我國戶籍制度在1994年到2014年間随時間的演變情況，它采用了時間線表示方法。

（1）Timetoast

Timetoast是線上創作基于時間軸事件記載服務的網站，提供個性化的時間線服務，可以用不同的時間線來記錄你某個方面的發展曆程、心理路程、進度過程等等。Timetoast基于 flash 平台，可以在類似 flash時間軸上任意加入事件，定義每個事件的時間、名稱、圖像、描述，最終在時間軸上顯示事件在時間序列上的發展，事件顯示和切換十分流暢，随着滑鼠點選可顯示相關事件，操作簡單。

（2）Xtimeline

Xtimeline 是一個免費的繪制時間線的線上工具網站，操作簡便，使用者通過添加事件日志的形式建構時間表，同時也可給日志配上相應的圖表。不同于Timetoast的是，Xtimeline是一個社群類型的時間軸網站，其中加入了組群功能和更多的社會化因素，除了可以分享和評論時間軸外，還可以建立組群讨論所制作的時間軸。

2.5 進階分析工具

（1） R

R是屬于GNU系統的一個自由、免費、源代碼開放的軟體，它是一個用于統計計算和統計制圖的優秀工具，使用難度較高。R的功能包括資料存儲和處理系統、數組運算工具（具有強大的向量、矩陣運算功能）、完整連貫的統計分析工具、優秀的統計制圖功能、簡便而強大的程式設計語言，可操縱資料的輸入和輸出，實作分支、循環以及使用者可自定義功能等，通常用于大資料集的統計與分析。

（2）Weka

Weka是一款免費的、基于Java環境的、開源的機器學習以及資料挖掘軟體，不但可以進行資料分析，還可以生成一些簡單圖表。

（3）Gephi

Gephi是一款比較特殊也很複雜的軟體，主要用于社交圖譜資料可視化分析，可以生成非常酷炫的可視化圖形。

3 可視化典型案例

3.1 全球黑客活動

安全供應商Norse打造了一張能夠反映全球範圍内黑客攻擊頻率的地圖（http://map.ipviking.com），它利用Norse 的“蜜罐”攻擊陷阱顯示出所有實時滲透攻擊活動。如下圖所示，地圖中的每一條線代表的都是一次攻擊活動，借此可以了解每一天、每一分鐘甚至每一秒世界上發生了多少次惡意滲透。

3.2 網際網路地圖

為了探究網際網路這個龐大的宇宙，俄羅斯工程師 Ruslan Enikeev 根據 2011 年底的資料，将全球 196 個國家的 35 萬個網站資料整合起來，并根據 200 多萬個網站連結将這些“星球”通過關系鍊聯系起來，每一個“星球”的大小根據其網站流量來決定，而“星球”之間的距離遠近則根據連結出現的頻率、強度和使用者跳轉時建立的連結來确定，由此繪制得到了“網際網路地圖”（http://internet-map.net）。

3.3 程式設計語言之間的影響力關系圖

Ramio Gómez利用來自Freebase上的程式設計語言維護表裡的資料，繪制了程式設計語言之間的影響力關系圖，如下圖所示，圖中的每個節點代表一種程式設計語言，之間的連線代表該程式設計語言對其他語言有影響，有影響力的語言會連線多個語言，相應的節點也會越大。

3.4 百度遷徙

2014年1月25日晚間，央視與百度合作，啟用百度地圖定位可視化大資料播報春節期間全國人口遷徙情況，引起廣泛關注。

3.5 世界國家健康與财富之間的關系

如圖下圖所示，“世界國家健康與财富之間的關系”利用可視化技術，把世界上200個國家，從1810年到2010年曆時200年其各國國民的健康、财富變化資料（收集了1千多萬個資料）制作成三維動畫進行了直覺展示（http://www.moojnn.com/Index/whn）。

3.6 3D可視化網際網路地圖APP

3D可視化是描繪和了解資料的一種手段，是資料的一種表征形式，并非模拟技術。3D可視化以一種獨特的立體視角為使用者呈現資料，可以幫助使用者發現一些在2D模式下無法察覺的内容。Peer 1開發了一個稱為“網際網路地圖”的APP（如下圖），這是一個建立在小盒子形式上的3D地圖。

4 可視化工具實踐

4.1 D3可視化庫使用指南

（1）D3可視化庫介紹

D3 的全稱是（Data-Driven Documents），顧名思義，它是一個被資料驅動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 JavaScript 的函數庫，使用它主要是用來做資料可視化的

學習 D3 最好的地方是：http://d3js.org/

（2）D3可視化庫的使用

D3 是一個 JavaScript 函數庫，并不需要通常所說的“安裝”。它隻有一個檔案，在 HTML 中引用即可。有兩種方法：

• 方法一：下載下傳 D3.js 的檔案，解壓後，在 HTML 檔案中包含相關的 js 檔案即可。
• 方法二：可以直接包含網絡的連結，這種方法較簡單，但使用的時候要保持網絡連接配接有效，不能在斷網的情況下使用。

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
           

（3）預備知識

學習D3可視化庫需要的一些基礎知識如下：

• HTML：超文本标記語言，用于設定網頁的内容，比如和

  标簽

• CSS：層疊樣式表，用于設定網頁的樣式
• JavaScript：一種直譯式腳本語言，用于設定網頁的行為
• DOM：文檔對象模型，用于修改文檔的内容和結構
• SVG：可縮放矢量圖形，用于繪制可視化的圖形

（4）基本操作

文法說明：

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <title>testD3-6-SVG.html</title>  
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>  
    <style type="text/css">  
        .pumpkin {  
            fill: yellow;  
           stroke: orange;  
               stroke-width: 5;  
       }  
   </style>  
   </head>  
   <body>  
   <script type="text/javascript"></script>  
   <svg width=500 height=960>  
       <rect x="0" y="0" width="500" height="50"/>  
       <ellipse cx="250" cy="225" rx="100" ry="25"/>  
       <line x1="0" y1="120" x2="500" y2="50" stroke="black"/>  
       <text x="250" y="155" font-family="sans-serif"   
               font-size="25" fill="gray">Easy-peasy</text>  
       <circle cx="25" cy="80" r="20"  
               fill="rgba(128, 0, 128, 0.75)"   
               stroke="rgba(0, 255, 0, 0.25)"   
               stroke-width="100"/>  
       <circle cx="75" cy="80" r="20"  
               fill="rgba(0, 255, 0, 0.75)"  
               stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>  
       <circle cx="125" cy="80" r="20"  
               fill="rgba(255, 255, 0, 0.75)"  
               stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>  
       <rect x="0" y="300" width="30" height="30" fill="purple"/>  
       <rect x="20" y="305" width="30" height="30" fill="blue"/>  
       <rect x="40" y="310" width="30" height="30" fill="green"/>  
       <rect x="60" y="315" width="30" height="30" fill="yellow"/>  
       <rect x="80" y="320" width="30" height="30" fill="red"/>  
       <circle cx="25" cy="425" r="22" class="pumpkin"/>  
       <circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/>  
       <circle cx="50" cy="525" r="20" fill="rgba(0, 0, 255, 0.75)"/>  
       <circle cx="75" cy="525" r="20" fill="rgba(0, 255, 0, 0.5)"/>  
       <circle cx="100" cy="525" r="20" fill="rgba(255, 255, 0, 0.25)"/>  
       <circle cx="125" cy="525" r="20" fill="rgba(255, 0, 0, 0.1)"/>  
       <circle cx="25" cy="625" r="20" fill="purple"   
               stroke="green" stroke-width="10"  
               opacity="0.9"/>  
       <circle cx="65" cy="625" r="20" fill="green"  
               stroke="blue" stroke-width="10"  
               opacity="0.5"/>  
       <circle cx="105" cy="625" r="20" fill="yellow"  
               stroke="red" stroke-width="10"  
               opacity="0.1"/>  
   </svg>  
   </body>  
</html> 
           

運作效果圖：

4.2 Easel.ly資訊圖制作實踐

Easel.ly 是現下非常流行的資訊圖制作軟體之一，其具有界面簡潔、操作簡便、圖檔精美等特點。使用者隻需要登入Easel.ly官方網站即可開始進行資訊圖制作。

**資訊圖形是指資料、資訊或知識的可視化表現形式。**資訊圖形主要應用于必須要有一個清楚準确的解釋或表達甚為複雜且大量的資訊，例如在各式各樣的檔案檔案上、各個地圖及标志、新聞或教程檔案，表現出的設計是化繁為簡。下圖是一個典型的資訊圖，顯示的是全球各大洲的石油消費情況。

Easel.ly資訊圖制作步驟：

• 第一步：選擇模闆
• 第二步：編輯内容
• 第三步：導出圖檔

詳細過程請參考廈門大學資料庫實驗室制作教程：

《Easel.ly資訊圖制作實踐》

http://dblab.xmu.edu.cn/blog/easel-ly_use/

第一步：選擇模闆

進入Easel.ly頁面後，可以開始建立資訊圖，如下圖所示，可以選擇兩種方法建立資訊圖：

• 建立空白模版；
• 選擇一個已有模版，在其基礎上進行制作，模版内的内容可以修改。目前Easel.ly官網上已經有數量超過2百萬的模版，且可以通過選項進行篩選，推薦使用模版進行制作。

第二步：編輯内容

選好模版後便可以開始進行資訊圖的制作。下圖展示的是Easel.ly的操作台，其展示了Easel.ly的所有功能，從左到右依次是：

• 1、“Vhemes”模版選擇；
• 2、“Objects”添加元素；
• 3、“backgrounds”選擇背景；
• 4、“shaps”添加線條；
• 5、“text”添加文本；
• 6、“charts”添加資料圖表，可選直方圖、曲線圖、衛星圖、雷達圖、餅狀圖；
• 7、“upload”上傳圖檔。

隻要将元素拖到需要添加的地友善能完成元素的添加，過程十分簡便。

第三步：導出圖檔

在運用Easel.ly制作出資訊圖後，便可以進行圖檔的導出：

• 1、先點選操作台最右側的“Present”；
• 2、用滑鼠右鍵點選完成的圖檔選擇“圖檔另存為”，便可将制作的圖檔儲存到本機。

4.3 資料可視化之魔鏡

魔鏡是國内國雲資料旗下的資料可視化産品，底層封裝了可視化庫接口，使用者通過一個直覺的拖放界面就可以建立互動式的圖表和完美的儀表盤。通過強大的篩選器分類整理和探索自己ed資料。簡單拖拽的操作、上選下旋轉的功能，更為使用者實作更自由化、探索化的分析挖掘。

大資料魔鏡同時擁有市面上最豐富的可視化效果，500多種圖形庫，涵蓋了各種主流的可視化展現形式，絢麗而易讀。探索式的分析結合豐富的可視化效果，給使用者前所未有的産品體驗和視覺沖擊。以下四個圖形效果選自于魔鏡官網，展示魔鏡制作圖形的效果。

詳細教程請參考廈門大學資料庫實驗室制作的教程：

《資料可視化中級教程：資料可視化工具魔鏡》

http://dblab.xmu.edu.cn/blog/592/

使用魔鏡制作可視化圖的簡單步驟：

• 首先登陸魔鏡官方網站點選右上角“登陸/注冊”，先注冊一個賬号，然後再使用者賬号登陸。登陸之後界面如下圖所示：

  

• 點選建立項目，接下來輸入項目名，資料源選擇Excel表格，導入資料，點選儲存即可出現個人制作管理背景：

  

• 然後點選建立圖表，即可出現制作圖形的工作區：

  

  其中左邊為資料的兩個次元，次元(X軸)為文本屬性，度量(Y軸)為數值屬性。當我們需要制作某個圖表時，隻需要用滑鼠将次元拖至箭頭指向的行，将度量拖至箭頭指向的列（也可以點選次元或度量後面的箭頭），然後點選右邊框中的各種圖表，即可生成相應的圖表類型。

舉例：分析每個地區的銷售額和利潤，首先将地區拖至行，然後銷售額和利潤拖至列，然後點選某種圖表即可生成，如下：

4.4 資料可視化之ECharts

（1）Echarts簡介

ECharts是由百度商業前端資料可視化團隊研發的圖表庫，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直覺，生動，可互動，可高度個性化定制的資料可視化圖表

ECharts 提供了非常豐富的圖表類型：

• 正常的折線圖，柱狀圖，散點圖，餅圖，K線圖
• 用于統計的盒形圖
• 用于地理資料可視化的地圖，熱力圖，線圖
• 用于關系資料可視化的關系圖，treemap
• 多元資料可視化的平行坐标
• 用于 BI 的漏鬥圖，儀表盤
• 支援圖與圖之間的混搭，滿足使用者絕大部分使用者分析資料時的圖表制作需求。

（2）Echarts開發環境

ECharts是一款可視化開發庫，底層用的是javascript封裝，是以可以在網頁HTML中嵌入ECharts代碼顯示資料圖表。在網頁中嵌入ECharts步驟如下：

① 下載下傳ECharts

② HTML引入 ECharts

因為ECharts底層是javascript，是以可以像javascript一樣，直接嵌入到HTML中，如下：

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 檔案 -->
    <script src="echarts.js"></script>
</header>
</html>
           

③ 繪制一個簡單的圖表

（3）Echarts例子講解

在繪圖前我們需要為 ECharts 準備一個具備高寬的 dom 容器。

<body>
    <!-- 為 ECharts 準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
           

然後就可以通過 echarts.init 方法初始化一個 echarts 執行個體并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于準備好的dom，初始化echarts執行個體
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和資料
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
           

上面代碼是ECharts官網提供的一個簡單示例，顯示一個柱狀圖。在官網下載下傳echarts.js檔案，然後在echarts.js同一個檔案夾下面建立一個html檔案（注意改字尾為.html），将上述示例代碼複制進去，然後輕按兩下html檔案即可在浏覽器顯示。

ECharts可以很友善的導出制作的圖表隻要在代碼中加入如下代碼，即可顯示上圖右上角的工具欄，其中最右邊藍框中的圖示即為導出圖表。

toolbox: {
        show : true,
        feature : {
            dataZoom: {},
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
}
           

如果隻是簡單的制作圖表，而不是用于網頁中，最簡單的辦法是打開ECharts提供的一個示例，将示例代碼清除，直接在示例的編輯器編輯即可，而且不會出現亂碼，圖檔導出操作和上述所說一樣。

比如，在Echarts中打開“微網誌簽到資料點亮中國”這個示例，如下圖所示，将左邊的代碼清除，寫入顯示柱狀圖的代碼，就可以運作得到柱狀圖。

詳細教程請參考廈門大學資料庫實驗室制作的教程：

《資料可視化中級教程：資料可視化之ECharts》

http://dblab.xmu.edu.cn/blog/592/

其他相關筆記：

資料研發學習筆記4.1：大資料之概述與處理架構Hadoop

資料研發學習筆記4.2：大資料之分布式檔案系統HDFS

資料研發學習筆記4.3：大資料之分布式資料庫HBase

資料研發學習筆記4.4：大資料之NoSQL資料庫

資料研發學習筆記4.5：大資料之雲資料庫

資料研發學習筆記4.6：大資料之MapReduce

資料研發學習筆記4.7：大資料之資料倉庫Hive

資料研發學習筆記4.8：大資料之Spark

資料研發學習筆記4.9：流計算

資料研發學習筆記4.10：圖計算

資料研發學習筆記4.11：大資料之資料可視化