前端資料視覺化庫大搜羅

本文摘自《資料視覺化實戰：使用D3設計互動式圖表》2.4節。

D3也不是適合所有專案。有時候，可能你只想馬上生成一張圖表，沒有時間自己編寫程式碼。或者，你想支援舊版本瀏覽器，因此不能依賴於SVG等較新的技術。

在這種情況下，最好是知道還有其他什麼選擇。以下我就來簡單介紹一下D3的部分替代方案，也許不全，但它們的共同特點是都採用了Web標準技術（主要是JavaScript），而且可以免費下載使用。

簡易圖表類

DataWrapper

一個非常漂亮的線上服務，上傳資料並快速生成圖表後，就可以到處使用或將其嵌入在自己的站點中。這個服務最初定位於專欄記者，而實際上任何人都可以使用。DataWrapper在新版本瀏覽器中可以顯示動態圖表，而在舊版本瀏覽器中則顯示靜態圖片。（太聰明瞭！）你也可以下載程式碼在自己的伺服器上執行。地址：http://datawrapper.de/。

Flot

一個基於jQuery的繪相簿，使用HTML的canvas元素，也支援舊版本瀏覽器（甚至IE6）。它支援有限的視覺形式（折線、散點、條形、面積），但使用很簡單。地址：http://www.flotcharts.org/。

Google Chart Tools

由早期的Image Charts API發展而來的Google Chart Tools，可以用來生成不少標準的圖表，也支援舊版本的IE。地址：https://developers.google.com/chart/。

gRaphaël

基於Raphaël（參見本節後面）的一個圖表庫，支援舊版本瀏覽器（包括IE6）。與Flot相比，它更靈活，而且據說還要更漂亮一些。地址：http://g.raphaeljs.com/。

Highcharts JS

JavaScript圖表庫，包含一些預定義的主題和圖表。它在最新瀏覽器中使用SVG，而在舊版本IE（包括IE6及更新版本）中使用後備的VML。這個工具只對非商業用途免費。地址：http://www.highcharts.com/。

JavaScript InfoVis Toolkit

簡稱JIT，它提供了一些預設的樣式可用於展示不同的資料，包括很多例子，而文件的技術味道太濃。如果你喜歡它的預設樣式，可以選擇它，但瀏覽器支援情況不太清楚。地址：http://philogb.github.com/jit/。

jqPlot

jQuery繪圖外掛，只支援一些簡單的圖表，適合不需要自定義樣式的情況。jqPlot支援IE7及更新版本。地址：http://www.jqplot.com/。

jQuery Sparklines

可生成波形圖的jQuery外掛，主要是那些可以嵌在字裡行間的小條形圖、折線圖、面積圖。支援大多數瀏覽器，包括IE6。地址：http://omnipotent.net/jquery.sparkline/#s-about。

Peity

jQuery外掛，可生成非常小的條形圖、折線圖和餅圖，只支援較新版本的瀏覽器。再強調一遍，它能生成非常小又非常精緻的小型視覺化圖表，可愛程度加10分。地址：http://benpickles.github.com/peity/。

Timeline.js

專門用於生成互動式時間線的一個庫。不用編寫程式碼，只用其程式碼生成器即可。定製的空間不大，但時間線可不是那麼容易做的。Timeline.js只支援IE8及之後的版本。地址：http://timeline.verite.co/。

YUI Charts

雅虎YUI（Yahoo! User Interface Library）的Charts模組，可用於建立簡單的圖表，支援很多瀏覽器。地址：http://yuilibrary.com/yui/docs/charts/。

圖譜視覺化

所謂“圖譜”，就是具有網路結構的資料（比如B連線到A，A連線到C）。

Arbor.js

基於jQuery的圖譜視覺化庫。就算沒用過它，也該看一看它的文件，連它的文件都是用這個工具生成的（可見它有多純粹、多meta）。這個庫使用了HTML的canvas元素，因此只支援IE9和其他較新的瀏覽器，當然也有一些針對舊版瀏覽器的後備措施。地址：http://arborjs.org/。

Sigma.js

一個非常輕量級的圖譜視覺化庫。無論如何，你得看看它的網站，在頁面上方的大圖上晃幾下滑鼠，然後再看看它的演示。Sigma.js很漂亮，速度也快，同樣使用canvas。地址：http://sigmajs.org/。

地圖對映類

我們要區分一下地圖（全部內容都是地圖）和地圖對映（包括地理位置資料或地理資料，比如傳統的地圖）。D3本身也有很多地圖對映功能，但下面這些工具最好你也瞭解一下。

Kartograph

Gregor Aisch開發的一個基於JavaScript和Python的非常炫的、完全使用向量的庫，它的演示是必看的。最好現在就去看一看。保證你從來沒見過這麼漂亮的線上地圖。Kartograph支援IE7及更新版本。地址：http://kartograph.org/。

Leaflet

貼片地圖的庫，可以在桌面和移動裝置上流暢地互動。它支援在地圖貼片上顯示一些SVG資料層。（參見Mike的演示“Using D3 with Leaflet”：http://bost.ocks.org/mike/leaflet/。) Leaflet支援IE6（勉強）或IE7（好得多），當然還有其他更新版本的瀏覽器。地址：http://leafletjs.com/。

Modest Maps

作為貼片地相簿中的老爺爺，Modest Maps已經被Polymaps取代了，但很多人還是喜歡它，因為它體積小巧，又支援IE和其他瀏覽器的老版本。Modest Maps有很多版本，包括ActionScript、Processing、Python、PHP、Cinder、openFrameworks……。總之，它屬於老當益壯那種。地址：http://modestmaps.com/。

Polymaps

顯示貼片地圖的庫，在貼片上可以疊加資料層。Polymaps依賴於SVG，因此在較新的瀏覽器中表現很好。地址：http://polymaps.org/。

比較原始的方案

以下工具跟D3有些類似，都提供了繪製圖形的方法，但沒有預定義的模板。如果你願意從頭開始，希望得到更大的自由度，可能會對它們感興趣。

Processing.js

Processing的原生JavaScript實現，是新接觸程式設計的藝術家和設計師的夢幻式程式語言。Processing是Java寫的，因此Processing草圖要在網頁中顯示通常要靠Java小程式。有了Processing.js，常規的Processing程式碼就可以在瀏覽器中直接執行了。由於使用canvas，所以只適合現代的瀏覽器。地址：http://processingjs.org/。

Paper.js

在canavs上渲染向量圖形的框架。同樣，它的網站也堪稱網際網路上最漂亮的網站之一，它們的演示做得讓人難以置信。（現在就去欣賞一下吧。）地址：http://paperjs.org/。

Raphaël

也是一個繪製向量圖形的庫，受歡迎的原因是語法具有親和力，而且支援老版本瀏覽器。地址：http://raphaeljs.com/。

三維圖形

說來也怪，D3不擅長3D，因為瀏覽器從一開始就是二維的東西。但隨著它對WebGL的支援越來越完善，在網頁中顯示3D圖形也會漸漸成為一種趨勢。

PhiloGL

專注於3D視覺化的一個WebGL框架。地址：http://www.senchalabs.org/philogl/。

Three.js

能幫你生成任何3D場景的一個庫，谷歌Data Arts團隊出品。它的演示可以讓人整整一天都沉浸其中，興奮不已。地址：http://mrdoob.github.com/three.js/。

基於D3的工具

如果你使用D3，但又不想寫程式碼，可以考慮下面這些基於D3的工具。

Crossfilter

一個可以操作大型、多後設資料集的庫，主要作者是Mike Bostock。非常適合把你的“大資料”塞到相對小的瀏覽器裡，地址：http://square.github.com/crossfilter/。

Cubism

時間序列資料視覺化的D3外掛，也是Mike Bostock寫的。（我非常喜歡其中的演示。）地址：http://square.github.com/cubism/。

Dashku

用於實時更新線上控制板和小部件的線上工具，作者是Paul Jensen。地址：https://dashku.com/。

dc.js

這裡的“dc”是dimensional charting（維度圖表）的簡寫，因為這個庫是專門為探索大型、多維資料集而進行優化的。地址：http://nickqizhu.github.com/dc.js/。

NVD3

可重用的D3圖表。NVD3提供了很多漂亮的示例，不用像在D3裡那樣編寫程式碼就可以定製很多效果。地址：http://nvd3.org/。

Polychart.js

更多可重用的圖表，可選擇的圖表型別非常之多。Polychart.js只對非商業用途免費。地址：http://polychart.com/。

Rickshaw

顯示時間序列資料的一個工具包，提供了很多定製選項。地址：http://code.shutterstock.com/rickshaw/。

Tributary

實時測試D3程式碼的一個好工具，作者是Ian Johnson。地址：http://tributary.io/。