用程式設計工具實現資料視覺化的幾個選擇

本文摘自《鮮活的資料：資料視覺化指南》3.2節

不用太緊張。掌握一點點程式設計技巧，你就能利用資料做更多的事情，遠遠超過那些開箱即用的軟體。程式設計技巧能賦予你更加靈活的能力，而且各種型別的資料都能適應。

大多數設計新穎、令人驚豔的資料圖都是通過程式碼或繪圖軟體實現的，很有可能兩者兼有。有關繪圖軟體我們稍後也會談到。

對於新手來說程式碼可能頗為神祕——我也是這樣過來的。但我們可以把它當做一門新語言來看待，因為它確實如此。每一行程式碼都告訴計算機去做某件事情。計算機不懂我們和朋友之間所用的語言，所以你必須用它自己的語言或語法才能和它交流。

與任何語言一樣，你不可能立刻就開始進行對話。要從基礎開始，然後逐步建立自己的學習方式。很可能在你意識到之前，你就已經開始寫程式碼了。關於程式設計最酷的事情在於，一旦你掌握了一門語言，學習其他語言就會更加容易，因為它們的邏輯思路是共通的。

可選項

看來你已經決定要捲起袖子寫程式碼了——好樣的。在這裡你有很多選擇。針對不同的任務，各種語言之間互有優劣。有些語言善於處理大量資料，其他一些則可能偏向於更好的視覺效果，或者提供互動功能。選擇何種語言取決於你對資料圖的目標，或者看你對哪種語言更習慣。

有些人堅持只學一門程式語言，並把它學得很透。這沒問題，而且如果你是程式設計新手，我強烈推薦這一策略。儘量熟悉程式碼的基礎規範和重要概念。

我們應該選擇最能滿足自己需要的程式語言。不過，掌握新語言、瞭解新玩法也是很有樂趣的。因此在作決定之前，不妨先積累一些程式設計經驗。

1. Python

前一章我們已經討論瞭如何利用Python來處理資料。Python善於處理大批量的資料，不會造成當機。這使得該語言能夠勝任繁重的計算和分析工作。

Python乾淨易讀的語法也很受程式設計師們歡迎，還可以利用很多模組來建立資料圖形，例如圖3-11中的這種。

圖3-11 利用Python生成的圖表

從美學方面來看，這個圖表還不夠好。直接拿Python輸出的圖片用於印刷可能會比較勉強，尤其是在邊緣處給人感覺比較粗糙。但不管怎樣，這是資料探索階段一個很不錯的開始。或者你也可以先輸出圖片，然後再利用其他的圖形編輯軟體來潤色或新增資訊。

有用的Python資源

• Python官方網站http://python.org。
• NumPy和SciPy①http://numpy.scipy.org/——科學計算模組。①NumPy是Python的一個資料處理的函式庫，裡面主要是一些矩陣的運算等。SciPy是Python語言中用於科學研究的函式庫，它是在Numpy基礎上開發的。

2. PHP

PHP是我剛開始網頁程式設計時學到的第一門語言。有些人說它很鬆散，確實如此，但也可以讓它很有條理。大部分Web伺服器都預安裝了PHP的開源軟體，因此要想著手寫PHP是非常容易的。絕大多數預安裝中都會包含一個叫做GD的圖形函式庫。這個庫非常靈活，能讓你從無到有地建立圖形，或者修改已有圖形。此外還有很多PHP圖形函式庫能幫助我們建立各類基本的圖表。 最受歡迎的是Sparkline（微線表）庫，它能讓你在文字中嵌入小字號的微型圖表，或者在數字表格中新增視覺元素，如圖3-12所示。

圖3-12 利用PHP圖形函式庫生成的微線表

一般PHP的出現都會伴隨著MySQL等資料庫，而不是一堆CSV檔案。這使它能物盡其用，處 理大型的資料集。

有用的PHP資源

• PHP官方網站（http://php.net）。
• Sparkline PHP圖形函式庫（http://sparkline.org）。

3. Processing

Processing是一門適合於設計師及資料藝術家的開源語言。最早的Processing還只能算作是小品級別，可以讓使用者快速生成圖形，但隨後獲得了長足的發展，完成了很多高質量的專案。比如說，第1章中提到的We Feel Fine就是用Processing中建立的。

Processing很棒的一點是能很快上手：輕量級的程式設計環境，只需幾行程式碼就能建立出帶有動畫和互動功能的圖形。這款工具確實很基礎，但由於它偏重於視覺思維的創造性，你很容易就能知道如何創造出更高階的作品。

雖然在一開始主要是設計師和藝術家使用Processing，但如今它的受眾群體已經越來越多樣化了。你可以藉助各種函式庫來提升它的威力。

它的缺點之一是要使用到Java小應用程式，在某些計算機上載入時可能會很慢，而且並不是每個人都安裝了Java（儘管多數人都安裝了）。不過這也有解決辦法，Processing在不久前釋出了它的JavaScript版本。

無論如何，它對於新手來說是個很好的起點。即使是毫無程式設計經驗的使用者也能夠做出有價值的東西。

有用的Processing資源

• Processing的官方網站（http://processing.org）。

4. Flash和ActionScript

網上大多數可互動的動畫資料圖都是通過Flash和ActionScript開發的，尤其是在《紐約時報》這樣的主流新聞網站上。我們可以直接用Flash來設計圖形，這也是一款所見即所得的軟體，但有了ActionScript的幫助，就能更好地控制互動行為。許多應用都是完全用ActionScript寫的，無需用到Flash環境，不過這些程式碼還是作為Flash應用來進行編譯。

說明 雖然有很多免費、開源的ActionScript函式庫，但是Flash軟體和Flash編譯器的價格比較昂 貴，在你選擇軟體時需要考慮這一點。

比如說，表現沃爾瑪企業成長的可互動動畫演示地圖 （見圖3-13） 就是用ActionScript寫成的。其中呼叫了Modest Maps庫。這是一個用於區塊拼接地圖（tile-based map）的顯示和互動的函式庫，以BSD許可協議①釋出，這表示它是免費的，大家可以隨心所欲地使用。 ① BSD許可協議（Berkeley Software Distribution license），是自由軟體（開源軟體的一個子集）中使用最廣泛的許可協議之一。

圖3-13 動畫演示沃爾瑪企業成長的地圖，以ActionScript寫成（另見彩插圖3-13）

圖3-14中的可互動堆疊面積圖也是由ActionScript寫成的。它能讓你搜尋數年來各種消費開支的大小變化，例如住房（Housing）和交通（Transportation）。這一艱鉅的任務是由加州大學伯克利分校視覺化實驗室開發的Flare Action Script庫完成的。

圖3-14 顯示消費開支分類的可互動堆疊面積圖，以ActionScript寫成

如果你對網上的可互動圖形感興趣，那麼Flash和ActionScript是非常好的選擇。Flash應用的下載相對較快，而且絕大多數人的計算機上都安裝了Flash播放器。

不過ActionScript並不好學。雖說語法並不複雜，但是安裝和程式碼的組織卻可能會難倒初學者。你不可能像Processing那樣只用幾行程式碼就執行成功。在後面的章節中我會帶領大家實踐其中的基本步驟，另外由於Flash的廣泛使用，在網上還能找到很多極有幫助的教程。

與此同時，Web瀏覽器一直在飛速發展，其執行速度和效率也有了顯著的提高。這讓我們有了很多其他的選擇。

有用的Flash和ActionScript資源

• Adobe支援（http://www.adobe.com/products/flash/whatisflash/）——Flash和ActionScript（以及其他Adobe產品）的官方文件。
• Flare視覺化工具包（http://flare.prefuse.org）。
• Modest Maps函式庫（http://modestmaps.com）。

5. HTML、JavaScript和CSS

Web瀏覽器的執行速度越來越快，功能也越來越完善。不少人使用瀏覽器的時間要超過計算機上的其他任何程式。視覺化在近期也有了相應的轉變，開始藉助HTML、JavaScript和CSS程式碼直接在瀏覽器中執行。在過去，可互動的資料圖一般都是通過Flash和ActionScript來實現，而靜態資料圖則需要儲存為圖片格式。現在的情況也大抵如此，但不再只有這一種選擇。

一些功能強健的工具包和函式庫可以幫助我們快速建立可互動或靜態的視覺化圖形。它們還提供了大量的選項，以便你針對資料需要進行定製。

比如說，史丹佛大學視覺化團隊開發的Protovis就是一款免費開源的視覺化函式庫，它能幫助你建立網頁原生的視覺化作品。Protovis提供了一系列開箱即用的視覺化工具，但你在建立幾何圖形時不會受到任何限制。圖3-15顯示的是一幅可互動的堆疊面積圖。

Protovis中內嵌了這一圖表型別。我們還可以生成形式更加新穎的流線圖（streamgraph） ，如 圖3-16所示。

圖3-16 由Protovis自定義生成的流線圖

我們還可以利用多個庫來擴充功能。Flash也能做到這一點，但JavaScript在程式碼方面的工作量會小很多。有了jQuery和MooTools等庫的協助，JavaScript也更加容易閱讀和使用。這些庫並非專為視覺化而開發的，但仍然能帶來很大幫助。它們提供了大量基礎功能，只需幾行程式碼就能實現。如果沒有這些庫，我們要寫的程式碼就會更多，而且稍不注意就可能漏洞百出。

這些庫還提供了一些外掛，幫助我們製作較為基礎的圖形。例如，你可以利用jQuery的 Sparklines（微線表）外掛來生成微線表（見圖3-17）。

圖3-17 通過jQuery的Sparklines外掛生成的微線表

用PHP也可以做到這一點，但這種方法具有更多優勢。首先，資料圖是在使用者的瀏覽器中生成的，而非伺服器端。這能緩解伺服器的壓力，否則在流量較大的情況下你的網站就可能會出問題。

另一個優勢在於你無需在自己的伺服器上安裝PHP圖形庫。很多伺服器上都預安裝了這些圖形庫，但也有一些沒有。如果你對PHP圖形庫不熟悉，安裝過程可能會非常麻煩。

也許有人不想用外掛。沒關係，利用標準的網頁程式設計也可以定製視覺化的效果。圖3-18就是一副可互動的日曆，同時也是使用者使用your.flowingdata工具的熱度圖（heatmap）。

不過還是有幾點需要注意。由於相關的軟體和技術還比較新，在不同瀏覽器中你的設計可能在顯示上會有所差別。在Internet Explorer 6這類老舊的瀏覽器中，有些工具可能無法正常執行。

不過這種情況正在逐漸好轉，因為絕大多數人都已經轉向了Firefox或Google Chrome等更現代的瀏覽器。歸根結底，這還是取決於你的受眾群體。在FlowingData網站的訪問者中，只有不到5%的人還在用低版本的Internet Explorer，因此瀏覽器相容性並不是很嚴重的問題。

圖3-18 可互動日曆，同時也是使用者使用your.flowingdata的熱度圖

同樣，由於該技術的普及率尚不夠高，為JavaScript視覺化提供支援的函式庫不像在Flash和ActionScript中那麼多。這也是為什麼許多主流新聞機構仍然大量使用Flash的原因。不過隨著技術的發展這一局面終會發生改變。

有用的HTML、JavaScript和CSS資源

• jQuery（http://jquery.com/）——一個JavaScript庫，能讓該語言的程式設計更加高效，而且讓最終程式碼更加易讀。
• jQuery Sparklines（http://omnipotent.net/jquery.sparkline/）——通過JavaScript生成靜態及動畫的微線圖。
• Protovis（http://vis.stanford.edu/protovis/）——專用於視覺化的JavaScript庫，提供了例項以便學習。
• JavaScript InfoVis工具包（http://datafl.ws/15f）—— 另一個視覺化庫，但不如Protovis成熟。
• Google Charts API（http://code.google.com/apis/chart/）——動態建立傳統形式的圖表，只需修改URL即可。

6. R

如果你瀏覽過FlowingData，可能就會知道我最喜歡的資料圖形軟體就是R。它是一款免費且開源的統計學計算軟體，圖形功能也很強大。它也是絕大多數統計學家最中意的分析軟體之一。此外還有一些功能近似的付費軟體，例如S-plus和SAS，不過它們很難比得上R的完全免費以及活躍的開發社群氛圍。

相較於之前提到的所有軟體，R的優勢之一在於它是專為資料分析而設計的。HTML的用途主要是建立網頁，而Flash則用於其他方面，例如視訊以及動態廣告。但R卻是由統計學家開發並維護，主要的物件導向也是統計學家。至於這是好是壞，取決於你從哪種角度來看待它。

支援R的工具包也有很多，你只需把資料載入到R裡面，寫一兩行程式碼就可以建立出資料圖形。比如說，你可以利用Portfolio工具包快速建立出板塊層級圖（treemap），如圖3-19所示。

建立熱度圖也同樣簡單，如圖3-20所示。

圖3-20 R生成的熱度圖

當然，還可以建立更多傳統的統計圖表，例如散點圖和時間序列圖，我們將會在第4章中對此進行深入討論。

坦白說， R的網站看起來極為落後 （見圖3-21），而且軟體本身在引導新使用者方面做得不夠好。不過你要記住，R畢竟是一門程式語言，學習任何語言都必須經歷開頭的艱難。我也讀到過一些關於R的負面評論，但通常都是那些習慣於按鈕或者滑鼠操作的人在發牢騷。所以如果你打算使用R，不要對使用者介面的期待過高，否則你一定會覺得它很不友好。

圖3-21 R的網站首頁http://www.r-project.org

但如果克服了這一點，我們就能用R做很多事情。它能夠生成達到印刷品質的圖片（至少也是雛形） ，而且極其靈活。如果願意，你可以寫出自己的函式或者程式包，按自己想要的方式來建立圖形，或者你也可以借用R函式庫裡其他人開發的成品。

R提供了基礎的繪圖功能，使用它，你基本上可以隨心所欲地繪製想要的圖形，例如線條、形狀以及框架座標軸。所以和其他程式設計工具一樣，能限制你的只有想象力而已。事實上，任何一種圖表型別都能通過R或者R的工具包實現。

提示
在搜尋引擎中搜尋有關R的內容時，它的本名可能會帶來很多不相干的結果。可以嘗試以“r-project”作為關鍵詞，這樣的搜尋結果會更加精確。

既然R這麼強大，為什麼還要學習其他工具呢？為什麼不乾脆用R來做所有事情？原因有以下幾方面， R是在你的桌面上執行的，所以它不太適合於動態網頁。儲存為圖片然後釋出到網頁上並不是問題，但這一過程不會自動完成。你也可以通過網頁來動態生成圖片，但截至目前，R的這一功能還不是特別強大，無法比JavaScript等網頁原生工具。

在建立可互動圖形或動畫方面，R也不是特別擅長。同樣，儘管也可以用R來實現，但還有其他更方便的途徑，比如Flash或者Processing。

最後，大家也許已經注意到，圖3-19和圖3-20中的圖形還欠缺一些雕琢。你恐怕不希望在報紙上看到這種水平的圖形。當然，你也可以嘗試依靠不同的選項或者新增程式碼來強化R的設計感覺，但我的策略一般是在R中建立基本圖形，然後再利用Adobe Illustrator等繪圖軟體對其進行編輯加工（後文即將討論）。如果是用於資料分析，那麼R的原始輸出就可以了，但如果是用於演示或印刷，則最好還是從視覺和美感上稍加調整。

有用的R資源

• 適用於統計運算的R專案（http://www.r-project.org）。

取捨

學習程式設計就是在學一門新的語言，一門有關位和邏輯的計算機用語言。例如，當你使用Excel或Tableau時，本質上是在和程式的翻譯器打交道。按鈕和選單是你熟悉的語言，而當你點選它們時，軟體會把你的行為翻譯為指令，併傳送給計算機。然後計算機才會服從你的命令，例如生成圖片或者處理資料。

所以，時間絕對是主要的障礙。學習一門新的語言需要時間。對很多人來說，這一障礙太高了，對我來說也是如此。你需要立刻完成工作，因為你面前有一大堆資料，而且還有人等著要結果。如果你只會與資料打這麼一次交道、以後不會再接觸，那麼選擇開箱即用的視覺化工具可能會更合適。

不過，如果你打算深入研究你的資料，而且日後可能（或者希望日後）還會接觸大量與資料相關的專案，那麼現在花些時間學習程式設計最終會節省其他專案的時間，並且作品也會給人留下更加深刻的印象。你的程式設計技巧會在每一次專案中獲得提高，你會發現程式設計越來越容易。和任何一門外語一樣，我們都會從基礎學起，然後再逐步擴大範圍，不可能從一開始就用它來著書立說。

讓我們換一種思路來看這個問題。假設你被扔到一個陌生的國度，你不會說當地的語言，但有一名隨身翻譯。如果要和當地人交流，你會先說出來，然後讓翻譯去傳遞你要表達的資訊。如果翻譯不理解你的意思，或者不懂你用的某一個詞，又該怎麼辦？他可能會乾脆忽略這個詞，或者如果他足夠聰明，說不定去查查字典。

對於開箱即用的視覺化工具來說，軟體本身就是翻譯。如果它不知道該怎樣做一件事情，你就只能卡在那裡，或者不得不尋找替代的解決辦法。和現實中的翻譯不同，軟體通常不會立刻學會“新詞” （在這裡指新的圖表型別或者資料處理方式）。新的功能需通過軟體更新獲得，也就是說你只能乾等著。那麼，如果你自己學會了這門語言會怎樣呢？

再一次宣告，我並不是說要避免使用開箱即用的工具。我一直都在使用它們。它們讓很多沉悶乏味的任務變得輕鬆容易，這很棒。但我們不能被軟體限制住，不是嗎？

在後面幾章大家就會看到，程式設計能夠幫助我們做很多事情，而且付出的努力要比徒手完成少得多。不過，還是有很多事情必須依靠雙手來完成，尤其是當你打算通過資料講故事的時候。這也就是下文的內容：視覺化的另一面。