cover

視覺化卻要靠寫程式這種反視覺化的方式來做,不是太諷刺了嗎?雖然程式搭配人機介面與螢幕可以展現非常強大的各種視覺化,但也為許多人製造了進入門檻。不會寫程式?沒關係,來玩玩 NodeBox ,讓我們用拖拉的方式做視覺化!

NodeBox 正如其名,專案內的各種元件被設計成一個個的節點 ( Node ) ,各有不同的輸出入;有的輸出形狀、有的輸出顏色、有的輸出座標或格點;而我們視覺化設計師則透過滑鼠拖曳來連結節點間的輸出入,顏色連形狀、形狀連格點 ….. 噹噹!視覺化完成了。

就是這麼簡單。

你還要去想 SVG Path 、 Update Selection 、 Chart Configuration 、 Layout & Callback 什麼什麼看了就頭痛的東西嗎?太反直覺了!換個角度想, NodeBox 把「程式」這件事利用節點元件重新詮釋,而「編程」則變成了拉線。我們只要知道元件輸出入的含義,就不再需要去管分號是否打對、語法是否正確。NodeBox 幫你搞定這一切。 耶比!

NodeBox 為一個桌面版應用程式,我們必須要先下載並安裝才能使用。首先,連至 NodeBox 的下載網頁、選擇適合你的作業系統與  NodeBox 版本,點擊下載便行了。我們此文使用  NodeBox 3.0.44 版為各位做介紹。下載完成後點擊安裝檔,基本上沒什麼選項可以選,安裝完成後便會自動帶出 NodeBox 編輯環境 ( Windows 版本 ):

editor

編輯畫面分成三個部份:

  1. 左方的灰色區域即為視覺化結果的輸出畫面
  2. 右上方為各節點屬性的編輯視窗
  3. 右下方則為節點編輯器,拖拉、建立新元件便是於此操作。

在上圖中,我們看到右下角的編輯框中有個黑色長方形,中間寫著「rect1」,他便是一個節點,代表了一個長方形的輸出;當我們點選特定節點時,該節點產出的視覺化便會繪制在左方的輸出畫面,在此例的左邊我們可以看到已經有一個方塊在那裡了。那就是我們的視覺化輸出。做完了!喔耶!

咳… 很抱歉,雖然畫方形是視覺化的基礎,我們不會只想畫一個方形就了事的。為了展示 NodeBox 可以辦到的事,我們先準備一個 CSV 檔,如下例:

  name,value
  taiwan,30
  japan,10
  korea,40
  thailand,10
  vietnam,50
  china,90
  india,20

接著我們想要把資料匯到 NodeBox 中。怎麼匯入?

我們開始想像,任何事、任何操作都是一個節點… Bingo !利用節點讀取 CSV 。在節點編輯框上方我們可以看到有一個「(+) New Node」按鈕,按下去以後會跑出對話框,列出許多我們可以使用的節點:

nodes

從上圖中我們可以看到各種不同的節點,有算絕對值的、也有畫圓弧的。左方為節點的分類,我們點選「Data」後,雙擊「Import Csv」,便會在編輯區看到一個新增的「Import CSV」節點。若要讀取 CSV 檔案,只需要透過右上方的屬性編輯框,設定 File 到我們檔案放置的位置即可。下圖為讀取 sample.csv 之後的範例,可以看到當我們點選「Import CSV」節點時,左方的輸出畫面就不再是矩形,而變成了資料的內容:

import-csv

這時注意節點上下方,是不是有一些小小的長方形的突起呢?這些方塊代表的便是節點的輸出入,上方是輸入、下方是輸出。把滑鼠移到方塊上,便會有 Tooltip 提示我們這個輸出/入代表的內容,例如下圖的兩個 tooltip:

io

矩形節點上方有位置、寬度、高度與圓角等四個輸入,輸出則是矩形這個形狀本身;「Import CSV」則有檔名、分隔號、括號與數字分隔等 CSV 常見的設定,輸出則是資料本身。看到這裡我想大家應該都明白:沒錯,我們就是要將輸出跟輸入拉在一塊!

當然,不見得所有輸出入都必須要有所連結,像是「Import CSV」節點來說,他的四個設定都可以在屬性編輯窗完成,不需要我們另外設定;而矩形節點也一樣,長寬其實都已經有預設值。但當我們想要開始調整圖表內容時,我們便可以依照自己的設計來連結節點。

假設我們要來做個長條圖好了,大家應該會想:「Import CSV 」節點的輸出 ( data ) 接到矩形節點的輸入「Width ( 寬度 ) 」吧!這麼簡單嗎? no no no …. 仔細想想,那長條的位置呢?我們的範例資料中有兩欄資料,要用哪一欄呢?這些問題都還沒有解決。

不過,正如我們前面所說的,想做任何事?找個適合的節點吧!要選擇資料欄位,就用 Data 類別中的 「Lookup」節點吧,首先將「Import CSV」節點的輸出連結到「Lookup」節點唯一的輸入,然後點擊「Lookup」節點並編輯其「Key」屬性,設定為「value」( 這是我們的 sample.csv 中數值的欄位 ) :

lookup

這時,我們會注意到左方的輸出畫面已經從原本比較複雜的資料物件變成單純的數字了,代表我們順利的把輸入資料做了轉換。接著,試著將「lookup1」的輸出連結到「rect1」的「width」輸入,我們可以看到左方輸出畫面中的矩形好像比剛剛瘦了一點,但是只有一個:

connect-width

這是因為我們沒有設定矩形的位置。再次地,我們新增一個「Grid」節點 – 他可以幫我們產生格狀的座標點 – 然後將「grid1」節點的輸出連結到「rect1」節點,再次雙擊「rect1」以預覽輸出結果 – 結果是一片黑?

grid

這裡有兩個問題:

  1.  Grid 節點可以設定行跟列的數量,預設是 10 。所以我們產生了 10 x 10 個點,也就是一百個矩形。
  2. 矩形的寬度雖然由資料決定,高度預設為 100 ,造成互相覆蓋的情形。

因此,我們可以透過下列兩個步驟修正問題:

  1. 雙擊「grid1」節點,調整 Columns 與 Rows 參數為 1 ( 一排 ) 與 7  ( 七筆資料 )
  2. 雙擊「rect1」節點,調整高度為 10

長條馬上就出來啦!

bar-simple

當然光是這樣還是有些問題。為什麼長條不是靠左對齊?「grid1」的資料個數如果是寫死的,那資料更新時會不會爛掉?碰到問題,用 Node 就對了。首先我們用「count」節點來計算資料數量:

  1. 建立一個新的「Count」節點
  2. 將「lookup1」的輸出拉到「count1」的輸入
  3. 再將「count1」的輸出拉至「grid1」的「rows」
count

接著我們利用「Align」節點將長條對齊:

  1. 建立「Align」節點
  2. 將「grid1」原本的輸出拉至「align1」的「position」輸入
  3. 將「rect1」的輸出拉至「align1」的「shapes」輸入
  4. 雙擊「align1」並設定「Horizontal Align」屬性為 Left

大功告成:

align

完全沒有寫程式碼,但跟寫程式有著一樣的彈性,卻彌平了程式的學習門檻,是不是很棒呢?下圖為重新排版並加入文字後的效果:

bar2

看起來好像我們花了不少功夫才完成這個長條圖,但事實上要做到更複雜的圖表,不一定會比長條圖麻煩到哪去。下圖為 NodeBox 本身提供的教學,雖然結果看起來很壯觀,右方的節點是否並不複雜呢?

adopted from NodeBox Documentation

adopted from NodeBox Documentation

下圖也是在同一份教學文件中截取的;雖然這個例子看起來相當複雜,但實際上的節點不見得很多,因為節點大多是在簡化重覆性的部份:

adopted from NodeBox Documentation

adopted from NodeBox Documentation

結語

用程式做視覺化雖然威力強大卻有著極高門檻、用繪圖軟體做視覺化雖然彈性極高卻相當繁瑣。 NodeBox 可說是為程式語言的門檻開了另一扇窗,讓我們可以透過更直覺的方式來製作視覺化,卻仍具備著程式批次處理的強項。

其實在過去也一直都有利用視覺化方式來學習程式的例子,但由於他們的設計思維都偏向將程序性的語言直接翻譯成控制方塊,導致最後整個編輯畫面變得錯綜複雜,難以維護。 NodeBox 的程式邏輯較偏向於 Functional 函式思維的編程,一塊塊的指令透過輸出入的連結結合在一起,讓整個編程過程變得有彈性又直覺。

不過,由於其產生的視覺化只存在 NodeBox 環境中,雖然他也能做動畫與基本互動效果,還是需要安裝 NodeBox 才能使用。此外,相較於D3.js 或 R 等開發環境與套件, NodeBox 相對的比較不出名,社群的協助跟案例也因此較少。即便如此,對於不懂程式的人來 NodeBox 還是一個快速做出視覺化的好選擇。

此外, NodeBox 本身是開源的,我們可以在這裡找到他的原始碼;他使用 Java 開發,如果你對他支援的功能有額外的要求或建議的話,不妨到他們的專案頁面建立 Issue ,直接參與開源軟體的開發吧! 😀


Written by infographics.tw

發表迴響

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