什么是數(shù)據(jù)可視化？數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。為了有效地傳達(dá)思想概念，美學(xué)形式與功能需要齊頭并進(jìn)，通過(guò)直觀地傳達(dá)關(guān)鍵的方面與特征，從而實(shí)現(xiàn)對(duì)于相當(dāng)稀疏而又復(fù)雜的數(shù)據(jù)集的深入洞察。

這意味面對(duì)一大堆雜亂的數(shù)據(jù)你無(wú)法嗅覺其中的關(guān)系，但通過(guò)可視化的數(shù)據(jù)呈現(xiàn)，你能很清晰的發(fā)覺其中價(jià)值。在經(jīng)過(guò)一階段的數(shù)據(jù)分析平臺(tái)搭建工作后，結(jié)合比賽，我開始了對(duì)數(shù)據(jù)可視化的研究，結(jié)合幾篇對(duì)可視化技術(shù)與工具的描述，以下整理出一些數(shù)據(jù)可視化的資料與知識(shí)，以供參考。

一、數(shù)據(jù)源類型

One-dimensional data / Points

Two-dimensional data / Tables

Multidimensional data / Relational Tables

Text and hypertext

Hierarchies and graphs / Telephone calls and Web documents

Algorithms and software

二、可視化手段

Standard 2D/3D displays

Geometrically transformed displays

Icon-based displays? ? ? Dense pixel displays

Stacked displays

三、可視化工具匯總

3.1 簡(jiǎn)易圖表

1.DataWrapper: 一個(gè)非常漂亮的在線服務(wù)，上傳數(shù)據(jù)并快速生成圖表后，就可以到處使用或?qū)⑵淝度朐谧约旱恼军c(diǎn)中。這個(gè)服務(wù)最初定位于專欄記者，而實(shí)際上任何人都可以使用。 DataWrapper 在新版本瀏覽器中可以顯示動(dòng)態(tài)圖表，而在舊版本瀏覽器中則顯示靜態(tài)圖片。

Page: http://datawrapper.de/

2.Flot: 一個(gè)基于jQuery 的繪圖庫(kù)，使用HTML 的canvas 元素，也支持舊版本瀏覽器（甚至IE6）。它支持有限的視覺形式（折線、散點(diǎn)、條形、面積），但使用很簡(jiǎn)單。

Page: http://www.flotcharts.org/

3.Google Chart Tools

4.gRapha?l: 與Flot 相比，它更靈活，而且還要更漂亮一些。

Page: http://g.raphaeljs.com/

5.Highcharts JS: JavaScript 圖表庫(kù)，包含一些預(yù)定義的主題和圖表。它在最新瀏覽器中使用SVG， 而在舊版本IE（包括IE6 及更新版本）中使用后備的VML。

Page: http://www.highcharts.com/

6.JavaScript InfoVis Toolkit: 簡(jiǎn)稱JIT，它提供了一些預(yù)設(shè)的樣式可用于展示不同的數(shù)據(jù)，包括很多例子，而文檔的技術(shù)味道太濃。

Page: http://philogb.github.io/jit/index.html

7.jqPlot: jQuery 繪圖插件，只支持一些簡(jiǎn)單的圖表，適合不需要自定義樣式的情況。

8.jQuery Sparklines: 可生成波形圖的jQuery 插件，主要是那些可以嵌在字里行間的小條形圖、折線圖、面積圖。支持大多數(shù)瀏覽器，包括IE6。

9.Peity: jQuery 插件，可生成非常小的條形圖、折線圖和餅圖，只支持較新版本的瀏覽器。再?gòu)?qiáng)調(diào)一遍，它能生成非常小又非常精致的小型可視化圖表。

Page: http://benpickles.github.com/peity/

10.Timeline.js: 專門用于生成交互式時(shí)間線的一個(gè)庫(kù)。不用編寫代碼，只用其代碼生成器即可；只支持IE8及以后的版本。

3.2 圖譜可視（具有網(wǎng)絡(luò)結(jié)構(gòu)的數(shù)據(jù)）

1. Arbor.js: 基于jQuery 的圖譜可視化庫(kù)，連它的文檔都是用這個(gè)工具生成的（可見它有多純粹、多meta）。這個(gè)庫(kù)使用了HTML 的canvas 元素，因此只支持IE9 和其他較新的瀏覽器，當(dāng)然也有一些針對(duì)舊版瀏覽器的后備措施。

Page: http://arborjs.org/

2.Sigma.js: 一個(gè)非常輕量級(jí)的圖譜可視化庫(kù)。無(wú)論如何，你得看看它的網(wǎng)站，在頁(yè)面上方的大圖上晃幾下鼠標(biāo)，然后再看看它的演示。Sigma.js 很漂亮，速度也快，同樣使用canvas。

Page: http://sigmajs.org/

3.3 地圖映射（包括地理位置數(shù)據(jù)或地理數(shù)據(jù)）

1.Kartograph: Gregor Aisch 開發(fā)的一個(gè)基于JavaScript 和Python 的非常炫的、完全使用矢量的庫(kù)，它的演示是必看的。最好現(xiàn)在就去看一看。保證你從來(lái)沒(méi)見過(guò)這么漂亮的在線地圖。Kartograph 支持IE7 及更新版本。

Page: http://kartograph.org/

2.Leaflet: 貼片地圖的庫(kù)，可以在桌面和移動(dòng)設(shè)備上流暢地交互。它支持在地圖貼片上顯示一些SVG 數(shù)據(jù)層（參見Mike 的演示”Using D3 with Leaflet”：http://bost.ocks.org/mike/leaflet/ )。 Leaflet 支持IE6（勉強(qiáng)）或IE7（好得多），當(dāng)然還有其他更新版本的瀏覽器。

Page: http://leafletjs.com/

3.Modest Maps: 作為貼片地圖庫(kù)中的老爺爺，Modest Maps 已經(jīng)被Polymaps 取代了，但很多人還是喜歡它，因?yàn)樗w積小巧，又支持IE 和其他瀏覽器的老版本。Modest Maps 有很多版本， 包括ActionScript、Processing、Python、PHP、Cinder、openFrameworks…… 總之，它屬于老當(dāng)益壯那種。

Page: http://modestmaps.com/

4.Polymaps: 顯示貼片地圖的庫(kù)，在貼片上可以疊加數(shù)據(jù)層。Polymaps 依賴于SVG，因此在較新的瀏覽器中表現(xiàn)很好。

Page: http://polymaps.org/

3.4 原始繪圖（高級(jí)定制）

1. D3.js

2.Processing.js

3.Paper.js: 在canavs 上渲染矢量圖形的框架。同樣，它的網(wǎng)站也堪稱互聯(lián)網(wǎng)上最漂亮的網(wǎng)站之一，它們的演示做得讓人難以置信。

Page: http://paperjs.org/

4.Rapha?l: 一個(gè)繪制矢量圖形的庫(kù)。

Page: http://raphaeljs.com/

3.5 三維圖形

PhiloGL: 專注于3D 可視化的一個(gè)WebGL 框架。

Page: http://www.senchalabs.org/philogl/

2.Three.js: 能幫你生成任何3D 場(chǎng)景的一個(gè)庫(kù)，谷歌Data Arts 團(tuán)隊(duì)出品。

Page: http://mrdoob.github.com/three.js/

數(shù)據(jù)可視化之路，路漫漫其修遠(yuǎn)兮啊。

作者：Joe Jiang，公眾號(hào)：數(shù)據(jù)挖掘與數(shù)據(jù)分析（ID：datakong）