Cover

看到想嘗試的視覺化手法,卻不知道該怎麼做嗎?讓 PlotDB 幫你吧!線上視覺化服務 PlotDB 提供上百種的視覺圖表樣版供我們自由選用,同時也提供了一個專為視覺化打造的編輯介面,而且最酷的是 – 不會寫程式也能上手!

視覺化是種很有效的溝通方式。隨著網路普及,越來越多各領域的人 – 包括商管、行銷、甚至新聞媒體 – 都想利用視覺化的力量,但當套件軟體的基本圖表無法滿足他們的時候,他們都面臨到了一個很大的門檻:程式設計。

圖表產製通常牽涉到自動化,而編程製圖能讓我們免於費時且重覆的手工繪圖;然而,雖然 D3.js 的作者 Mike Bostock 提出了「Toward Reusable Chart」的概念,另一方面我們卻看到網路上有越來越多樣性的圖表,即使已經開源,也都只能使用「一次」 – 若你完全不懂程式,你幾乎不太可能利用它們。

為什麼我們不能像逛街購物一樣的挑圖表,回家打開來就可以直接使用?於是 infographics.tw 團隊決定親手打造一個這樣的工具,經過了幾個月的努力後 — PlotDB 就這樣誕生了。

首先進入 plotdb.com ,往下一拉,馬上可以看到相當多數量的圖表:

list

這些即是 PlotDB 所提供的圖表樣版,種類相當多;不光是一些基本圖表的變形,一些比較少見的圖表如 Pareto Diagram ( 品管七手法之一 ) 、Marimekko Chart ( 堆積長條的變形 ) 或是互動式的立體地球儀、弦圖與資訊圖表常用的弧式長條、Pictogram 等等都可以看到,比方說下圖的飄雪散布圖

snow scatter plot

或是這個全球地震視覺化,可以用滑鼠拖動來瀏覽不同地區:

這些圖表都是利用 PlotDB 製作出來的喔!那麼,要怎麼使用 PlotDB 來製作視覺圖表呢?

基本操作

使用上相當容易,莫約四個步驟便能做出一個最基本的視覺化。首先準備好想要呈現的資料,然後從 PlotDB 挑選一個適合的圖表,點擊進入編輯介面,這裡我們使用 Treemap 為例,下圖即為 Treemap 的編輯介面:

PlotDB Editor

在上圖中,右方 (1) 為圖表結果預覽,左方(2) 則為圖表設定。每張圖的設定都不太一樣,但項目不會太多,包含
顏色、尺寸等等的設定,我們可以自行調整看看。

比方說下圖是簡單的調整一些參數的結果:

Sample Design of Treemap

資料連結

當然,最重要的還是要將我們的資料呈現出來;接著我們將網頁往下拉至「Data Binding」的部份,這裡提供的是連結資料與圖表的功能:

data binding panel

上圖左方 (1) 陳列了我們可以使用的資料集,除了我們自行上傳的檔案外,也提供了一些基本的範例,比方說台灣各年齡層的人口數等;我們可以在這裡點擊「New Dataset」來上傳資料,也可以直接點選列表中的資料集, PlotDB 會將資料集中的欄位呈現在上圖右上 (2) 的地方,可以看到這個範例中有八個不同的欄位,包含月份 ( month )、軍隊人數 ( army size )、死亡人數 ( death number ) 等等。

上圖右下 (3) 的地方列出了圖表使用的資料類型,以 Treemap 為例包含了下列三者:

  • category ( color of block / 顏色 )
  • name ( name of block / 標籤 )
  • value (size of block / 大小 )

看到這裡你大概也曉得要怎麼使用了 – 在 (1) 處選擇資料集,然後從 (2) 將想表現的欄位拖曳到 (3) 圖表的對應維度!

我們使用「近兩年世界各國來台旅遊人數 (逐月)」 ( 可以於此取得 ) 資料集來做個範例。首先,點擊「New Dataset 」開啟資料編輯器,並從選單「Import –> upload CSV file 」將檔案上傳:
upload dataset

上傳後資料會以試算表表格的形式讓我們直接預覽,我們可以先看看資料長什麼樣子,或者便點擊右下角的「Save」,並為資料集取個名字,我們這裡將它命名為「來台旅遊」:

save as dataset

存檔之後便會回到「Data Binding」介面,這時我們的新資料集應該已經出現在資料集列表了;若你找不到,也可以直接搜尋資料集名稱。

點選「來台旅遊」資料集,我們會在右方看到很多個欄位,除了存放國名的「國家」、該國對應洲名的「洲別」外,還有兩年內各個月的人數資料;我們逐一將「洲別」、「國家」與「105/04 ( 代表105年 4 月的各國來台旅遊人數 ) 」三個欄位拖曳到下方的圖表維度中:

drag

這時再將網頁拉回到上方圖表預覽的地方,我們的圖表已經製作好等著我們了:

treemap - travel to taiwan from other country

最後,於編輯介面左上角為圖表命名並點擊「Fork」按鈕將圖表存檔,以後有需要便可以再開啟進行編輯囉!是不是很簡單呢?

使用圖表

製作完成後,我們該怎麼使用圖表呢? PlotDB 提供許多不同的圖表使用方式,不過大家最常用到的應該會是這兩種方法:

  1. 下載成 PNG / SVG 並進行進一步編輯
  2. 使用嵌入網頁碼並嵌入於自己的文章中

上述兩個用法分別對應到下圖的兩個箭頭處:

share

點擊箭頭 1 處的按鈕,會彈出 PNG / SVG / PLOTDB 的下載選項,你可以選擇有需要的類型下載;若點擊右方的「Share」按鈕則會跳出分享對話框,並提供我們所需的連結或嵌入程式碼,我們也可以直接指定嵌入碼使用的長寬比 (Aspect Ratio ),以利於不同顯示裝置中都得到最好的顯示體驗:

share-panel

兩種模式各有什麼好處呢?使用連結或 iframe 嵌入方式可以保留圖表的互動效果與 RWD 的功能,讓我們可以在不同大小的裝置上都能有不錯的使用體驗;而 SVG 下載的方式則可以讓我們做進一步的編輯,比方說我們之前便利用 PlotDB 的 Ternary Plot 搭配 Adobe Illustrator 製作了「視覺化編程入門 — 我該選什麼程式語言?」一文的封面圖片:

cover - programming language for data visualization

進階客製化

當然,光是這樣並不足以讓 PlotDB 成為一個與眾不同的圖表服務;事實上, PlotDB 不光只是提供圖表,它還讓我們可以自由的修改圖表!在圖表預覽框上方有幾個按鈕可以點選 ( 下圖紅框處 ),包括了「Code」、「Stylesheet」與「Document」,它們分別對應到網頁基本的「JavaScript 檔」、「CSS 檔」與「HTML 檔」,而這些是所有組成圖表該有的元件了:

editing code

這些程式碼執行之後便會產生我們所看到的預覽圖結果,上圖展示了點擊「code」按鈕之後所看到的原始碼內容。原始碼的修改功讓我們可以針對圖表做很有彈性的客製化,這在工作團隊中相當有用 – 需要製作圖表時由工程師來開發、不會寫程式的編輯則可以直接透過 PlotDB 的操作介面客製並產生圖表;最棒的是這些圖表程式一旦製作完成,便可以直接重覆運用於未來的文章或簡報中,不需要工程師也可以直接產生!

結語

媒體革新的這個年代,我們有了越來越多運用視覺圖表、互動技術的內容平台,然而這些內容不同於以往,不再只是傳統編輯手中的文字與照片;我們有了資料、程式碼、3D模型、甚至影片、音效與轉譯前的原始碼,而且其數量是越來越多。

PlotDB 不僅提供我們大量的圖表樣板做武器,也提供了一個嶄新的方式管理與維護我們的數位內容,還記得前面提到 Mike Bostock 所提到的概念「Reusable Chart」嗎?妥善的管理我們的數位內容,將成為我們成長的一個強大後盾。

目前 PlotDB 還在 Beta 階段,除了問題修正之外,也會針對使用需求進行功能發展,為了讓服務永續營運,未來也會走向 Freemium 的月費模式並保持基本功能免費使用,現階段並沒有任何使用限制,就請各位讀者盡量的玩玩看吧!


Written by infographics.tw

1 Comment

發表迴響

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