Raw.densitydesign - Cover

RAW ( http://raw.densitydesign.org/ ) 是個很特別的圖表工具。基於 D3.js,一頁式不需註冊的使用方式,讓你可以很快做出不同於常見圖表的作品,再加上開放源碼的本質,隨時都能自己追加新的圖表類型。

單就圖表工具來說, RAW 相當容易使用。簡單的分成四個步驟,匯入資料、選擇圖表、欄位對應、調整參數後一張圖表就做出來了,下面讓我們一步一步快速的看一下流程。

匯入資料

需要用手打或貼上的方式,主要是逗號分隔 (CSV) 的純文字。首行定義了各欄的名稱,以粗體標示。這邊我們輸入了隨意九個國家 2014 年的出生率數據:

RAW - import data

選擇圖表

資料輸入完成以後接著選擇圖表類型,目前一共有 16 種類型可以選擇並附帶圖表說明,全都是非主流的圖表 - Circular Dendrogram 、 Hexagonal Binning 、 Stream Graph 、 Treemap - 或者說如果 Google Chart Tool 裡沒有的話,來這裡找找看就對了:

Raw - Chart Type

欄位對應

由於各個圖表的繪製方式不同,資料與圖表屬性之間的對應也會不一樣。在選定圖表之後,右邊會出現該圖表所使用的參數列表,左邊則是資料集各欄,我們利用拖拉的方式把資料集欄位丟到右邊的參數中,即完成參數對應。

比方說,當我選定了泡泡圖,我可以把國家名稱丟到 Label 參數中,然後把生育率同時丟到 Color 參數與 Size 參數,這樣子做出來的泡泡圖顏色跟大小會依生育率而定,而每個泡泡中間都會有國家的名字。

Raw - Attribute Mapping (Before)

欄位對應前

 

Raw - Attribute Mapping (After)

欄位對應後

調整參數

欄位對應的同時圖表就已經產生了,往下拉我們可以看到一個依我們資料安排而成的圖表,再來就是看有沒有需要微調的部份,在左方有些選項可以讓我們調整,而同樣的這些設定也是因圖而異。

Raw - Chart Option

最後,製作完的圖表可以選擇用 png 或 svg 的方式下載後存檔。 RAW 本身不提供 Data 或 Chart Hosting 的功能,你得自己找地方放。

追加個人圖表

個人認為 RAW 的一個很特別的點在於他本身是開源的,你可以在 RAW 的 Github 頁面找到他的原始碼,下載之後跑在自己的電腦裡,甚至利用他架設另一個網站,例如我們就架了一個 raw.infographics.tw 。而以這點為基礎, RAW 提供了一個簡明的介面,在 RAW 本身以及客製化圖表之間,讓我們可以輕鬆的利用 RAW 的介面提供自己的圖表服務。

換句話說,今天我有特別的圖表想要供大家使用,我就依照 RAW 的圖表規範製作,然後透過自營 RAW 平台發表即可,不需要再花時間去刻設定界面,資料建表介面了。這使得 RAW 從一個單純的圖表工具升級成一個圖表框架,提供給圖表開發者用來分享圖表工具。相當酷的一個概念。

至於圖表樣版要怎麼建立?有興趣的話可以直接參考他 Github 裡的說明文件,我們在 raw.infographics.tw 裡也照這份說明文件追加了一個圖表「Curved Bar Chart」,算是不太常見但又相對容易實作的例子,利用上面生育率的資料繪製出來的例子如下:

RAW Custom Chart (Curved Bar Chart)

若你對 Curved Bar Chart 這個樣板有興趣,可以參考這個位於 Github 的原始程式碼來對照前面的說明文件閱讀。

還有一點值得一提的是, RAW 本身不經手你的資料 - 圖表完全在 Client 端製作產生,與 plot.ly 完全相反的是他對你的資料能不碰就不碰,讓 RAW 本身成為一個單純的工具。這個保證讓這個工具更有機會被運用在較敏感的資料上頭。

優缺點總結

雖然 RAW 是個很酷的專案,我們還是先回歸線上圖表製作的角度來總結一下吧。

優點

  • 圖表類型多元,不落俗套
  • 快速無負擔
  • 不需登入,不用花錢
  • 考慮到資料隱私性問題

缺點

  • 資料匯入不易
  • 不提供線上分享功能
  • 顏色設定不易

 

當然我不覺得用圖表製作工具的角度評論他是公平的 - 但就圖表平台而言,我會希望 RAW 可以把資料匯入的部份做得更完整一點,同時圖表的種類也應該要再多一些比較有意思。有興趣的朋友不妨一起來開發一些獨特的圖表來送 Patch 給他們囉。


Written by infographics.tw

發表迴響

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