cover

你想做視覺化,但不會寫程式嗎?程式設計往往是資料視覺化的一大門檻,即便現今已有相當多工具可以幫我們達成任務,但當我們問起:「那我要怎麼做到 xxx 效果」時,得到的答案通常都還是「得寫 Code」。我們這次從過來人與程式教師的角度,與各位分享入手語言的選擇要點,希望可以對正在學做視覺化的朋友們能有幫助。

這兩天看到了 Nathan Yau 於 Flowing Data 網站所分享的文章「5 Tips for Learning to Code for Visualization」,忽然驚覺我們雖然編撰了許多視覺化技巧文章,卻忘了最基本的 — 到底要怎樣我才能學好程式?寫程式可能是很多人心裡的痛,但在做資料視覺化時往往又不可或缺,想要上手又總覺得處處碰壁。

有鑑於此,我們決定來規畫一系列的文章,從 0 到 1 ,一步步的帶大家邁向視覺化的殿堂 — 不過在那之前,就讓我們先來了解一下 — 程式語言百百種,我該挑哪一個?

我該學什麼語言?

事實上,幾乎任何程式語言都可以做視覺化,我剛開始學程式時曾用 Quick Basic 的繪圖函式做了很多漂亮的圖、而大家在學 C 語言時一定也有過經典的「印出三角形」作業。不過若談到資料科學,現今最流行的大概就是 R 、 Python 與 JavaScript 。這三者的使用情境不太相同,各有優缺點,你必須考量自己工作或人生規畫來決定要先從哪一種開始上手,而學程式最棒的一件事就是一樣通、樣樣通 — 通常你花了很常時間學會了第一個語言以後,接下來的程式語言就會快上很多。

我將這三種語言的使用情境簡單條列於此:

JavaScript — 資料呈現的王者

憑藉著彈性的網頁介面, JavaScript 可說是當前最適合做資訊傳遞的媒介語言了,他所能運行的平台也超乎想像的廣,包含各種瀏覽器、各個系統平台、各種 IoT 裝置與許多應用程式的擴充功能,我們都可以看到 JavaScript 的蹤跡。

由於 JavaScript 最早即是為了要操作網頁上的視覺元件而開發的,所以他與各式各樣的網頁元件可以說是搭配得相當好,無論是動畫、即時連線等效果,而自從 SVG 制訂並加入了 Web 大家族後,我們就可以在網頁上直接操縱各種視覺元素,並透過網站直接將內容發送給全世界。

此外,當今世界上堪稱最強的視覺化套件 D3 便是以 JavaScript 撰寫的,也只有用 JavaScript 才玩得到喔!下面這個範例恰好展示了互動、即時動畫與 D3.js 的使用,你可以點擊「重新執行」來看看執行的樣子:

然而,要利用 JavaScript 實作資料視覺化,通常也代表我們必須要一併學習 HTML 、 SVG 甚至 CSS ,有時並不會這麼容易就上手;而相較於 R 或 Python 來講, JavaScript 在資料分析這一塊比較弱了一些,這在接下來的部份我們馬上就會提到。

R — 資料分析的霸主

R 本身就是為了統計分析而設計,而這影響到了許多層面 — 從最基本的程式語法到背後支持的套件集與社群都是。舉個例子來說,若我們有一堆資料,想要一次將他們都乘上 5 ,在 R 中可能是這樣寫:

  data <- c(1,2,3,4,5)
  data <- data * 5

而在 JavaScript 中我們得這樣:

  data = [1,2,3,4,5];
  data = data.map(function(d,i) { return d * 5; });

平平是乘上 5 ,可以看到 R 是以向量為單位思考,而 JavaScript 則是相當的程序化。又或者是矩陣轉置,R 的例子:

  data = t(data)

而在 JavaScript 之中則類似:

  data = data.map(function(d,i) { return [d]; });

以一些更複雜的功能來說, R 本身就有內建像是 Covariance (cov) 、甚至 PCA (Princomp) 的分析,沒有內建的演算法也往往可以在 CRAN Package 中找到,這點 JavaScript 可說是望塵莫及!

不過,由於 R 是建構在獨立軟體的執行環境之中,我們鮮少看到直接執行 R 產生圖表的網站,通常都是透過 ggplot2 等繪圖函式庫製圖後再將圖檔上傳,或是利用 shiny 這樣的框架來建構 JS 前端 / R 後端的圖表產生流程 ( 關於 Shiny ,可參考我們先前撰寫的「R 也能互動!用 Shiny 與 R 語言將你的數據變成互動圖表」一文 )

因此,若從 R 想要製作互動圖表,製圖流程都會牽涉到主機運算資源的分配,使得他不管在資源、技術與實用性上,都比 JavaScript 低了一些。再加上靜態圖表比較不容易滿足響應式圖表的需求,通常我們若用 R 作圖,都會應用在敘事性比較重、圖表複雜性較低或使用者族群較為單一的時候。

Python — 通用性程式語言

有人說,同一件事用 Perl 可以有很多種寫法,而用 Python 只會有一種寫法。這並不是在說 Python 功能不強,而是他的簡潔、單純或明確。你若在 Python 中執行「import this」,可以看到所謂的「Zen of Python」,其中一句是這樣寫的:

There should be one – and preferably only one – obvious way to do it.  — Tim Peters

與花樣百出的 Perl 相比, Python 更為專注,而若與 C 、 Java 等典型的程式語言相比, Python 的語法又簡潔許多,比方說基本的「顯示 Hello World!」範例,  Java 的程式碼如下:

  class HelloWorldApp {
    public static void main(String[] args) {
      System.out.println("Hello World!");
    }
  }

而 Python 的程式碼則如下:

  print "Hello World!"

我想光從這個範例你就可以感覺得到 Python 很容易上手了。原本 Python 並非專為資料科學而打造,所以其實可以在很多地方看到他,比方說利用 Python 開發的網站框架 Django 、利用 Scrapy 撰寫網路爬蟲 、 開發桌面應用或遊戲等等,所以比起 R 來講,更適合「並非只是要做資料科學」的人來學習;此外,由於 SciPy 、 NumPy 、 Matplotlib 等套件的發展, Python 也越來越適合應用在資料科學上了!但若與 R 相比, R 的語法應用在資料科學上來說還是更直覺了一些。

若談到視覺化,除了直接利用 PyQt / PyQtGraph 在桌面應用中作圖之外,也可以利用 Matplotlib 來製作。但若要像 JavaScript 一般以網頁互動的方式呈現,目前只能透過 Bokeh 這樣的套件來達成; Bokeh 類似 R 的 Shiny ,將網頁前端的細節包裝成 Python 的語法,讓我們可以用 Python 碼來產生對應的 HTML 與 JavaScript 。只是,這樣的方式受限於 Bokeh 本身所支援的前端元件,若需要更彈性的製作視覺化,還是只能透過 PyQt 或 Matplotlib 來產生靜態圖表。 ( 關於 Bokeh,可以參考我們先前撰寫的「Python 上前端!利用 Bokeh 與 Python 製作網頁互動視覺化」一文 )

小結

看到這裡,我想大家應該都已經了解了:各種程式語言有其適用的情境 — 沒有最好,只有最適合!不過若你就是要專精於資料視覺化這一塊的話,我會建議你從 JavaScript 跟基本的網頁設計開始學起。

若你已經會 JavaScript 了,可以試著進入 D3.js 的世界,但若連 JavaScript 或基本網頁設計都沒有概念的話,我會建議搭配 P5.js ( JS 版 Processing ) 來進入資料視覺化的世界。由於 P5.js 的邏輯比起 D3.js 實在是簡單太多,學習曲線跟挫折感會相對小很多。關於 P5.js,可以參考我們先前撰寫的「p5.js - 初學者的資料視覺化函式庫」一文。

 

可是.. 為什麼我得學程式?

其實程式的用途很廣,拿來做視覺化只是一個小部份。我寫了很多年的程式碼,曾經用組合語言 + C 語言 + OpenGL 做過簡易打鼓機台、用 HTML + JavaScript 建過電商網站、寫過無數的遊戲… 這些都只是一小撮可能。有時我與朋友聊天談到如何監測廚房瓦斯爐忘記關,我們就開始想像利用紅外線模組搭配 arduino 與 nodejs 技術串接手機 App 做高溫警示的 Push Notification、也曾無聊而用 Win32 API 寫了自動踩地雷機器人 – 它找到你螢幕上的踩地雷程式,自動發送滑鼠事件來玩踩地雷,速度可快了!也早在 Open Data 流行的很多年前,我就利用 JScript + Windows HTA 框架實作了一個無名小站相簿爬蟲,可以搜集各個有趣帳號的公開相簿。

Coding 可應用的範圍之廣,在於他可能會帶來下一次的「工業革命」— 載客司機開始被機器人取代、營運人員開始被機器人取代、作曲家畫家開始被機器人取代 — 除了硬體的搭配,最重要的是裡面的「軟體」— 這是由我們人類所設計的演算法實作出的電子頭腦,適合運用在各種不同的領域,而且這個範圍只會越來越廣。這時,被取代的角色 — 人類,尤其是那些透過勞務換取報酬的人類 — 該怎麼辦呢?

我不知道。但回到資料視覺化這個話題,假使今天你想要製作一個 instagram 照片內容分析,利用動態泡泡散布圖 ( 如 Gapminder ) 做資料呈現,你該怎麼做?讓我問你幾個問題:

  • 你會寫程式爬照片嗎?
  • 你會分析照片內容嗎?
  • 你會做資料統計處理嗎?
  • 你會畫泡泡圖嗎?
  • 你畫的泡泡圖會動嗎?

如果你的回答全都是否,那你只能說這幾個字:「你可以幫我作嗎?」「我想要做到這樣,怎麼辦?」「有沒有套件可以做這個?」在時間、財力與人力的壓力下,很有可能你得放下這個專案,繼續掛 BBS 抄新聞、繼續分享國外案例在讚嘆之餘默默改著標點符號。

為什麼你要學程式?我想你已經了解了。


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *