Datacomb - Cover

龐大的資料常不易分析與理解,有沒有什麼可以快速探索資料的方式呢?你需要 Datacomb ! Datacomb 是個視覺化分析與探索工具, 可以幫將我們手上的數據視覺呈現,並搭配基本的互動功能,使我們迅速對資料建立基本的認識。

資料新聞學手冊 ( Data Journalism Handbook  ) 一書中曾提到,視覺化除了做為敘事的手法之外,也可以做為探索資料集的方法之一。在探索資料的過程,我們要求的不是精美且優秀的視覺化,而是快速地建立多種面向的資料觀察方式。

即便只是供快速瀏覽分析的視覺圖表,建立這樣的圖表仍然要花費不少的力氣,這時 Datacomb 出現了 — 一個網頁視覺化介面的資料探索工具。下圖為 Datacomb 瀏覽資料的範例畫面 ( 如果想要即刻看看Datacomb 的效果的話,可以連到這個 Live Demo 網站 ) :

Datacomb Example

基本上我們可以想像成將整個資料表中的所有數字用長條表示,非數字則以顏色表現。上圖中的資料為 2014 年 NBA 球員的基本資料,從左至右代表了資料中一欄一欄的資料;最左邊是「所屬球隊 ( Team ) 」、「守備位置 ( Pos ) 」,這兩者是文字因此以顏色代表;接著「年紀 ( Age ) 」、「阻擋進攻 ( Blocks ) 」、 「抄球 ( Steals )」等則為數字,以長條圖的方式表現。

除了基本的數字呈現,我們還可以做基本的資料操作,例如排序;下圖將資料以助攻次數 (Assists )由大到小排序,很容易我們可以從守備位置看出藍色的 PG ( 控球後衛 ) 幾乎佔滿了助攻前幾名的位置:

Sorting

資料操作還包含了以下類型:

§ 顯示直方圖 ( Histogram )

直方圖可以幫助我們了解數值的分布傾向。從下圖來看,球星的年紀以 23 歲最多:

Datacomb - Histogram

§ 顯示散佈圖 ( Scatter Plot )

散布圖幫助我們理解資料數值間的關連性。下圖為以年紀為 Y 軸、其他參數為 X 軸描繪的各種參數分布,點擊紅箭頭處的圓圈即可開啟,點擊其它參數的圓圈則可指定該參數為 Y 軸:

Datacomb - Scatter Plot

§ 顯示基本統計數據

基本統計數據告訴我們資料的一些基本數字,如極值、平均、標準差、中位數等等,下圖可以看到球星從 19 歲到 38 歲都有,平均抄球次數則是 38 次,點擊下圖紅箭頭處可以打開:

Datacomb - Summary

§ 資料過濾 ( Filtering )

我們也可以只顯示有興趣的資料,點擊上方的「Show Filters」會展開過濾選單,如下圖中 Team / Pos 上方的勾選框、或者其他數值中上方的範圍選擇元件。可以看到下圖守備位置中勾選了「PF」後只剩下綠色的 PF:

Datacomb - Filter

§ 顯示選擇的資料項

我們可以點擊單筆資料項來鎖定它,這時他會以淡紅色的點呈現在散布圖之中,如下圖的紅箭頭處顯示的即為「Al Horford」在「阻擋」與「抄球」項目的分布位置。多選也是可以的,深色的點則是當前滑鼠所在的資料項:

Datacomb - focus

 

安裝 Datacomb

Datacomb 目前是以軟體而非服務的方式提供,我們必須要自行下載安裝後才能使用。想要玩玩看的朋友可以參考 Datacomb 的 Github 檔案庫 ( https://github.com/cmpolis/datacomb ),它提供了使用的基本說明;基本上我們會需要下列步驟:

  1. 事先安裝 NodeJS ( 我們先前的文章「資料爬蟲實戰-使用 node.js」有談到如何安裝 NodeJS )
  2. 下載 Datacomb 的完整檔案 ( 此處的壓縮檔 )
  3. 解壓縮後,以命令提示字元 / 終端機進入 Datacomb 目錄,接著執行
    1. npm install
    2. npm run build
    3. npm run serve
  4. 參考 demo.js ,依照我們要呈現的資料做修改。

 

總結

一般視覺化往往考慮到的都是表現與敘事階段,然而 Datacomb 提供了一個通用的資料探索視覺化介面,是不是很方便呢?有機會我們再將它包裝成一個服務給大家,這樣就不需要自行安裝與維護,方便性會再大大的提升。


Written by infographics.tw

發表迴響

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