在HTML 5以及蓬勃發展的JavaScript庫當中，新型圖形元素已經顯示出了積極的發展態勢、也昭示著交互式數據顯示技術的興起。如今的網絡瀏覽器不僅需要提供具備響應式設計以及美觀圖形控制方案的豐富用戶界面，同時也需要作為數據可視化效果的承載平臺——包括柱狀圖、氣泡圖、風圖以及豐富多彩的地圖效果，且提供邊界縮放功能。

面向數據可視化的JavaScript庫

	優勢	缺點
D3	■ 實例豐富 ■ 易于實現調試數據 ■ 能夠通過擴展實現任何可以想到的數據可視化效果	■ 學習曲線太過嚴苛 ■ 數據“生命周期模式”不夠直觀 ■ 要達到理想使用效果需要用戶深入理解JavaScript
InfoVis	■ API易于理解 ■ 能夠通過調用指向強化交互性	■ 基本上屬于一套圖表庫；與其它 方案相比缺乏靈活性 ■ 不像其它工具那樣易于擴展
Processing.js	■ 可用于創建動畫效果 ■ 擁有良好的原始Processing Java 工具兼容能力	■ 要求用戶學習Processing語言 ■ 將數據傳輸至引擎當中需要一定技巧
Recline.js	■ 提供IDE與在線測試平臺 ■ 提供在線試驗程序 ■ 能夠與其它JavaScript庫實現良好 整合	■ 從“關系型數據庫”出發審視一切 ■ 提供的直接可用圖表十分有限 ■ 說明文檔尚需完善

通過網絡，我們得以在自己的桌面系統中獲得幾乎無窮無盡的、來自各新聞媒體、博客及廠商（包括任何擁有網站并提供數據源訪問的管理者）的多種動態效果與交互式圖形——其豐富程度遠超我們當初的想象。

現階段的交互式數據可視化機制主要由專門針對特定任務所設計的JavaScript庫來實現。在今天的文章中，我們將主要關注四款此類庫，它們分別是D3、InfoVis、 Processing.js以及Recline.js。它們全部能夠被用于解決我們的網頁動態數據可視化需求，但其中每一款方案所采取的實現方法都有所不同。另外，全部四項技術都供大家免費使用，并可在開源許可的規范下進行重新發布。

D3是一套頗具“開創性”的方案，它利用 JavaScript當中一部分較為晦澀的功能將數據結構與DOM表現方式相結合，最終帶來了強大而令人眼前一亮的理想效果。

InfoVis則采取了較為保守的處理途徑。其 API非常明確，使用起來也非常簡便：插入圖表對象并為其提供數據，其它的工作放心交給InfoVis即可。

作為原本基于Java的圖形系統的JavaScript 版本，Processing.js并不僅僅對給定數據的內容進行可視化處理，它也能像我們在主機游戲中見到的那樣把結果以動畫形式呈現出來。

最后要介紹的是Recline.js，它利用數據探索模式實現數據可視化處理。雖然它更傾向于將數據整理成字段與記錄，但用戶也可以通過它獲得時間線、線狀圖甚至是地理可視化處理結果。

 

圖所示為D3中經過修改的氣泡圖實例，這里的“圓形”元素被替換成了方形、但實際代表的正是原始方案中的“氣泡”概念。

D3

大家可能已經在實際工作中接觸過D3（也就是 Data-Driven Documents的簡稱）——它是一款可視化庫、目前《紐約時報》在線版面的大部分網頁都由其提供交互式信息圖形支持。而這些文章所使用的鏈接則大多來自Michael Bostock建立的網站——他正是D3項目的主要締造者，雖然他認為其中很大一部分功勞應歸屬于Jason Davies。

D3屬于名為Protovis的早期項目的衍生產物。關于由Protovis到D3的這一場重大革新以及相關內部資料，大家可以查閱由Bostock、 Vadim Ogievetsky以及Jeff Heer聯合撰寫的論文《D3：Data-Driven Documents》。

與jQuery類似，D3同樣直接對DOM進行操作。這也成為它與其它可視化工具的主要區別所在 ——它會設置單獨的對象以及功能集，并通過標準API進行DOM調用。D3所采用的整套機制頗為Web開發人員所熟悉。舉例來說，我們可以利用由D3控制的CSS樣式元素。此外，由于D3在顯示文檔時所使用的內部結構與瀏覽器完全一致，因此我們能夠直接將現有基于瀏覽器的開發及調試工具用于D3環境。

D3所提供的selection可謂至關重要。在其幫助下，我們能夠對各類文檔節點集輕松并反復進行各類操作。要變更所有段落元素的顏色，我們只需使用以下代碼：

d3.selectAll("p").style("color","white"); 

這種“鏈接”技術相當于功能的執行通道—— 每條通道都能將結果正確傳遞至對應功能—— 相信熟悉jQuery與Prototype的朋友對此一定不會感到陌生。D3程序員可以利用它來簡潔地表達多種處理方式。selection讓DOM節點的操作更簡單，我們只需設定屬性及樣式、或者復雜的節點排序——包括添加及刪除節點。

D3通過data()函數將數據與DOM節點進行綁定。作為通常位于一個選定操作之后的函數， data()能夠建立數據節點并將其與由 selection返回的DOM節點進行關聯。大家可以把這類數據看作被“連接”到了DOM節點當中。這些被接入的數據最終將成為DOM節點所表現的可視化元素的驅動依據。它決定了條狀圖形的高度、氣泡圖中氣泡單位的大小、地圖上標記點的位置等等。

數據接入可以算是D3當中的關鍵性組成部分，也被稱為“一般更新模式。”作為一種D3應用程序的編寫風格，一般更新模式以selection 操作為起點，而后依次通過D3的enter()函數將元素添加到新數據當中、更新現有元素（通過修改需要變更的任何一種元素屬性），最后通過D3的exit()函數刪除已經不再作為可視化組成部分的數據。盡管難于快速掌握，但這種一般更新模式在對可視化整體生命周期進行管理時確實表現出色。

數據同樣扮演著推動D3的重要角色，它能夠指控工具產生動態顯示效果，并生成相對簡單的靜態圖形。在氣泡圖當中，各氣泡單位的相對尺寸可以任意縮放、柱狀圖中的柱形高度能夠自由伸縮，同時新數據在進入可視化處理流程后、舊數據也將自由退出。

在D3中，整個轉換過程通過一個包含兩幀內容的關鍵幀動畫來體現，即開始與結束。開始幀通過視覺元素顯示當前狀態，結束幀則由包含與指向該元素的特定屬性值負責定義。D3的插入器功能負責處理整個轉換過程。D3為插入器提供多種備選項目，例如數字與顏色；這套方案的智能性很高，足以找到對應字符串并向其中插入嵌入值，例如字體規格中的字體大小。大家也可以定義自己的插入器功能；D3甚至支持CSS3轉換機制。

 

D3的顯示效果為放射狀Reingold-Tilford樹圖。其中所使用的數據來自Flare ActionScript庫的API。

那么這些數據來自何處？盡管大家可以將其直接嵌入到應用程序當中，但D3也提供數據的外部讀取功能，其支持來源包括：文本文件、 CSV文件、JSON文件等等。它甚至能夠讀取 HTML文檔并通過解析將其內容插入到文檔樹當中。

D3的說明文檔可謂浩如煙海，而且分散排布在網頁上的各個鏈接當中。其API文檔相當出色，除了解釋說明之外還提供大量代碼實例。與此同時，API文檔中的鏈接也指向多種特定功能，全部內容都根據D3的各個模塊加以分類。其說明頁面也包含有其它教程以及案例演示網站的鏈接。

大家在查閱范例匯總時也能得到不少樂趣，整個學習過程像是走進了D3可視化樣品的展覽館。其中的很多實例都附有詳盡解說以及對源代碼的注釋，我們完全可以花上幾天時間深入研究所有圖表類型以及能夠借此實現的可視化技術方案。

不過D3的學習曲線相對而言較為嚴苛。

 

一套利用D3創建的泰坦尼克號幸存者定制、交互式多維可視化圖表。在實例中，大家可以點擊對應維度來顯示對應“工具欄”。

它對變化數據集的可視化處理機制——包括正在進行修改的現有數據元素、正在添加的新型數據元素以及正被移除的舊有數據元素——要求使用者進行認真研究并擁有對JavaScript 的深入理解，否則根本無從上手。幸運的是， D3提供的教程非常出色，而且事實證明花費在學習上的時間會為大家帶來理想的回報。

D3能夠駕馭由HTML 5以及DOM提供的全部要素，而且能夠充分發揮用戶在JavaScript方面的卓越技能。它通過對標準文檔對象的準確操作為我們帶來可靠的可視化數據分析結果。不過奇怪的是，D3對于圖形處理工作幾乎一無所知——它甚至不知道如何繪制一個圓形（它需要借用HTML 5所提供的圖形繪制功能）。D3 的真正實力在于，它能夠以數據為基礎對文檔（正如在DOM當中）進行轉換——而這正是其 Data-Driven Documents名頭的由來。

#p#

InfoVis

JavaScript InfoVis工具集，或者簡稱InfoVis，由Nicolas Garcia Belmonte一手打造。盡管這套工具集目前由Sencha所持有，但它仍然遵循開源（BSD）許可。

InfoVis總體而言屬于一套圖表庫，且主要依賴對JSON的調用。數據在被傳遞至InfoVis的圖表函數當中之后，就會被轉化為JSON對象的形式。此外，當對圖表進行初始化時（即創建圖表中的對象，例如面積圖），圖表中的參數會被指定為JSON對象中的元素、而后才會正式進入初始化流程。從效果方面講，JSON對象可以被視為InfoVis函數調用中的命名參數。

InfoVis的固有圖形包括區狀、柱狀以及餅狀圖；樹形圖；空間及超級樹狀圖；環狀圖；放射狀圖以及力引導圖形。大家也可以將多種圖形類型混合使用以建立可視化效果（下圖所示即為餅狀圖與樹形圖的混合產物）。大部分圖表提供可配置顯示選項，允許我們定制獨一無二的圖表類型。舉例來說，大家可以在顯示區域中要求樹形圖左對齊、居中或者右對齊。

InfoVis還提供一系列核心功能函數，其中大部分直接取向各類流行JavaScript庫中的相似功能——例如jQuery、Prototype以及MooTools。舉例來說，InfoVis提供的each()函數能夠對某個重復應用特定函數——這一特性在處理大規模選擇結果（例如變更特定<div>類中的全部實例文字顏色）時非常實用。

 

這份由InfoVis生成的力引導圖形顯示了虛構家族體系當中不同成員間的彼此關系。

每一種圖表類對象都包含一個相關jupdateJSON() 方法，我們需要借此實現圖表數據更新。作為將圖表內數據批量替換為另一組數據的手段，轉換機制被內置于InfoVis的可視化對象當中。不過這套庫還定義了一組控制器方法，大家可以通過調用來設置回調函數。這些回調操作會在動畫的不同階段中付諸執行——這些動畫可以由轉換或者用戶交互所觸發。舉例來說，大家可以通過定義要求一條回調函數僅調用某個正在進行繪制的節點，從而在該節點對象被變更之前調整其圖形。

同樣，大家也可以向圖表中正在進行初始化的 JSON對象嵌入函數。舉例來說，我們可以指定一個onShow事件處理程序，用戶將鼠標懸停在特定元素之上時即會將其觸發。通過將該函數引用至特定節點當中，大家能夠撮與該節點相關的數據并將其顯示在彈出表格當中。

InfoVis的API說明文檔條理清晰，作者對網頁進行了精心整理。左側為導航欄，內容則顯示在右側。所有條目都被分門別類進行匯總——包括 Core、Loader以及Visualizations等等——并利用深度鏈接方便使用者進行瀏覽。不過要說最妙之處，則不能不提InfoVis的演示網頁。所有內容都采用交互式設計，作者甚至通過大量經過整理并附有注釋的代碼來幫助我們理解特定方面的知識。

與D3相比，InfoVis顯然是一款更加平易近人的工具集。初上手時，我們只需選擇一種圖表類型、為其提供一些JSON數據即可——剩下的工作 InfoVis自己就能完成。隨著我們對這款工具的逐漸熟悉，其可配置選項允許大家調整并以動畫形式顯示最終生成的定制化效果。

 

InfoVis通過環狀圖所顯示的目錄樹。將鼠標懸停在不同分區之上，就會有彈窗出現以提供對應目錄或者文件的具體信息。

#p#

Processing.js

從數個方面來看，Processing.js與其它幾款工具都有所不同。首先，Processing.js屬于 Processing可視化語言的JavaScript接口。Processing語言最初由麻省理工學院所開發，根據其說明文檔的表述、它是一種“簡化版 Java、且具備針對繪制及圖形處理任務的簡化 API。”

 

Processing IDE（在Java JVM當中執行）包含大量演示應用。上圖中IDE正在演示如何各行星如何圍繞太陽進行軌道運動（利用云紋理實現）。

其次，盡管Processing.js能夠被用于圖形及圖表的繪制工作，但它同時也是一套相當正規的通用型圖形與動畫工具集。Processing（當然也包括Processing.js）在數據可視化處理功能之外，還為我們帶來2D與3D圖形命令機制，允許用戶借此創建動畫、交互式數字藝術作品甚至視頻游戲。在processing.js的展示頁面中，大家會看到眾多令人贊嘆的鏈接——其中包括海洋生物動畫、小行星環境下的視頻游戲以及素描應用等等。 Processing.js利用HTML 5的canvas元素進行圖片渲染。從某種意義上講，Processing.js拓展了HTML 5的canvas功能——Processing.js 認為其初始功能太過低級，無法有效為開發人員服務。在使用Processing.js的過程中，我們通常需要利用Processing語言進行代碼編寫，并利用Processing.js將代碼內容轉譯成 JavaScript代碼以交付執行。當然，轉譯過程其實在編寫當中已經同步完成。

要開發Processing.js應用程序，大家還需要下載并使用Processing IDE。（目前提供Windows、 Linux以及Mac OS版本）這套IDE基本上算是一款編輯器，提供運行與停止按鈕、旨在通過彈窗顯示我們的Processing應用。這套IDE還允許開發人員將應用程序導出為標準可執行格式。最重要的是，如果大家之前從未接觸過Processing，下載內容中還包含大量應用示例源代碼。

除了IDE之外，Processing.js網站還提供 Processing.js幫助頁面。大家可以將自己的 Processing代碼復制到該頁面的文本框當中，而后點擊運行來查看其在瀏覽器中的實際執行結果。再有，幫助頁面也附帶一款轉換器，能夠將 Processing代碼轉換為同等效果的 Processing.js JavaScript代碼。

由于收到廣大用戶的要求，Processing.js的開發者們已經推出了專門用于在Processing.js應用程序中執行圖形化操作的Processing.js引擎API。這意味著我們能夠跳過利用Processing語言進行代碼編寫并將成果轉譯成JavaScript代碼的步驟。相反，大家只需直接在自己的JavaScript代碼中調用圖形引擎即可。

Processing.js網站上提供的教程介紹了如何將數據在不同Processing實例（即在Processing引擎當中執行的對象）之間來回傳遞以及如何讓JavaScript函數在引擎之外運行。

Processing.js網站也提供豐富的文檔資源鏈接。而且這些鏈接能幫助我們獲取更多與Processing相關的信息資源。最妙的是，演示應用數量堪稱極大豐富（我粗略估算有90個以上）。它們全部提供可視化執行窗口以及源代碼，而且不少實例還針對具體功能給出了解釋說明。 Processing.js仍然沒能徹底與其Java根源區分開來。它在使用感受上與Java類似。不過由于Processing.js 屬于JavaScript而且我們可以在任何一段JavaScript 代碼中實現該庫API調用，因此Processing.js應用能夠訪問所有DOM對象。

這幅交互式圖形由Fink Labs利用Processing.js創建，顯示的是AFL/VFL（澳大利亞足球賽）從1897年到2010年的獲勝球隊。每一年用一個圓環表示，在原示例中通過鼠標懸停即可查看年度與球隊名稱信息。

除此之外，再沒有什么能阻止大家將Processing.js與其它任何JavaScript庫混合使用了。

#p#

Recline.js

Recline.js被標榜為一款“簡單但強大的庫，能夠在純JavaScript及HTML環境下創建數據應用程序。”它主要由Rufus Pollock博士（以及他在開放知識基金會中的同事們）以及Max Ogden所締造。Recline.js的內部結構可被劃分成三塊：模型、后端與視圖。模型組件——Dataset、Record以及Field ——負責數據結構；其中Dataset作為容納記錄對象的容器。反過來，Record對象容納 Field對象，后者則表示數據構成。每個 Field擁有一個用于表示格式規范的標簽、一個表示該Field是否經過計算的標記外加數據類型。Recline.js定義了十三種數據類型，其范圍涵蓋簡單（字符串、整數與浮點數）到復雜（geo_point以及geoson）。一個Field當中能夠容納一系列甚至任意數量的復雜JSON對象。 Recline.js的Backend對象提供Dataset對象與數據源之間的連接。簡單來說，大家可以利用一個 Backend對象通過Record來“填充”Dataset。目前 Recline.js支持八種后端，其中包括CSV文件、 ElasticSearch、CouchDB、Google Doc電子表格等等。Recline.js甚至擁有所謂“memory”后端，允許大家直接將數據推送到Recline.js當中（即對應用程序進行硬編碼）。

當然，如果無法實現數據可視化處理、Recline.js 也就無法成為我們這篇文章的主角之一——這里正是視圖組件發揮威力的舞臺。Recline.js支持兩種視圖：Dataset與Widget。我之所以用“支持”這個詞來表述，是因為Recline.js本身并不提供 View對象、而只能通過與其它框架集成來實現此類功能。事實上，說明文檔中指出“Recline.js的視圖相當于Backbone視圖的實例。”

正如其名稱所暗示，Dataset視圖顯示的是Dataset對象。舉例來說，一套Grid視圖確實就是一份包含行內容與列標題表格視圖。在Recline.js網站上的Dataset 視圖示例中，我們看到了柱狀圖、線狀圖、時間線甚至顯示在地圖當中的地理數據。

Widget視圖允許我們創建其它框架當中被簡單稱為“構件”的顯示效果。Widget視圖能夠顯示或者控制某些數據集。

我們可以利用Widget視圖來顯示或者修改應用程序當中的通用數據。Recline.js說明文檔所列舉的 Widget視圖實例為QueryEditor，這套控制方案允許我們查看并修改Dataset中的當前查詢狀態。 Recline.js的說明文檔還包含一套概述頁面，用于指引大家對Recline.js獲得更為詳盡的了解。夾雜著代碼實例的解釋內容有助于我們的學習進程。雖然目前的水平已經不錯，但其完成度似乎還不太高。舉例來說，我們只能在其中找到關于Widget視圖的概述性說明，真正的解釋卻存在于源代碼的說明文檔當中。最后，我希望開發者能為其添加一份詳盡的術語詞匯表。也許熟悉Recline.js的專家不會遇到什么障礙，但對我來說其中的很多表述確實難于理解。

Recline.js幾乎完全以關系型視圖描述各類事物。其Dataset、Record以及Field組件非常實用，令人感到面對的是一套關系型數據庫。

Recline.js對于自身必須依賴于其它JavaScript 框架的特性毫不諱言。具體來說，Recline.js需要借用Backbone.js（JavaScript框架）才能允許用戶創建MVP（即模型-視圖-表現）應用程序。反過來，Backbone.js也需要借用Underscore.js（JavaScript庫）才能正常運作。

 

Recline.js數據管理器允許我們將將數據導入至Recline.js grid Dataset當中。大家可以從grid當中選擇要顯示的字段以及圖表類型。上圖所示為Allen Downy在其《思想狀態》一書中所使用的柱狀圖表。

Recline.js同樣利用jQuery對其后端代碼進行了強化，并通過Leaflet、TimelineJS等庫支持其視圖代碼。Recline.js堪稱技術與代碼重復利用領域的典范性杰作。它站在多套強大JavaScript 庫的肩膀之上，繼承其能力并實現進一步拓展。

#p#

當HTML 5遇上大數據

如果大家需要一份簡單的圖表以及直觀的操作方式，那么InfoVis無疑是最理想的方案。只需將數據打包成JSON并交付至正確的圖表對象，圖形成果就會自動生成。從另一方面講，如果大家希望擁有一套超越可視化范疇——即能夠生成抽象圖形設計或者純動畫方案——的庫，那么Processing.js絕對是不二之選。

 

Recline.js能夠顯示時間線數據（底部）、多種地圖視圖數據（右側）以及其它基本圖表類型。

不過如果大家更關心數據本身而非可視化機制——也就是說，如果各位的主要目的在于探索數據內容而非創建動畫及交互式圖表，那么這類只需要用到少數最基本圖形類別的需求最適合交給Recline.js打理。它提供的工具允許我們從多個來源獲取數據，并在數據獲取完成后對其進行查詢與分析。

不過單從可視化效果角度出發，D3的優勢則無可匹敵。它提供的圖形種類與美化方式簡直令人目眩，官方網站上的演示更是豐富多彩。而且由于D3能夠使用現有DOM 對象以及網絡瀏覽器基礎設施實現處理工作，，因此如果大家已經非常適應JavaScript（特別是已經在廣泛使用jQuery），那么其上手難度也會降低很多。即使各位稱不上JavaScript高手，數量龐大的現成用例也足以讓我們在大多數情況下通過復制粘貼獲得自己想要的成果。