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

面向數(shù)據(jù)可視化的JavaScript庫

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

現(xiàn)階段的交互式數(shù)據(jù)可視化機制主要由專門針對特定任務所設計的JavaScript庫來實現(xiàn)。在今天的文章中，我們將主要關注四款此類庫，它們分別是D3、InfoVis、 Processing.js以及Recline.js。它們?nèi)磕軌虮挥糜诮鉀Q我們的網(wǎng)頁動態(tài)數(shù)據(jù)可視化需求，但其中每一款方案所采取的實現(xiàn)方法都有所不同。另外，全部四項技術都供大家免費使用，并可在開源許可的規(guī)范下進行重新發(fā)布。

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

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

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

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

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

D3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

它對變化數(shù)據(jù)集的可視化處理機制——包括正在進行修改的現(xiàn)有數(shù)據(jù)元素、正在添加的新型數(shù)據(jù)元素以及正被移除的舊有數(shù)據(jù)元素——要求使用者進行認真研究并擁有對JavaScript 的深入理解，否則根本無從上手。幸運的是， D3提供的教程非常出色，而且事實證明花費在學習上的時間會為大家?guī)砝硐氲幕貓蟆?/p>

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

#p#

InfoVis

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

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

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

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

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

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

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

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

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

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

#p#

Processing.js

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

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

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

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

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

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

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

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

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

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

#p#

Recline.js

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

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

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

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

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

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

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

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

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

#p#

當HTML 5遇上大數(shù)據(jù)

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

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

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

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