4.4 視覺化子系統
4.4.5 Table Block
國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
48
圖 29. TimeMap 播放使用者打卡的移動軌跡。
4.4.5 Table Block
Table Block 使用列表的方式呈現 Facebook 打卡與手機 Log 資料的詳細內容。我們 使用 GitHub 上的 open source 專案：Bootstrap Table[27]來開發 Table Block 的內容。
Bootstrap Table 支援自動分頁(Paging)、查詢列表內容的輸入框、巢狀列表(Expand Row)、靜態或動態加入資料至列表中，因此我們選用該 open source 來實作 Table Block 的內容。
由於 Facebook 打卡內容與手機 Log 需要呈現的資訊眾多，為了方便研究者 查看，我們設計了 3 種查看資料的方式：(1) Group Data (2) Expand Data (3) 加入 手機 Log 資料。
1. Group Data：整理多筆一定時間區段內相同地點的資料為同一筆打卡的顯示 方式。
Bootstrap Table 提供 onExpandRow event，當使用者點擊展開列表的事 件。我們透過該 event 設計成巢狀列表，第一層(見圖 30)先使用統整性的資
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
49
料列出每筆打卡的時間(Time)、地點(Position)、是否有附圖(with Photo)、該 筆打卡的內容總筆數(Total Data)。
研究者可以針對列表最左方的「+」展開第二層列表，查看每筆打卡詳 細內容(見圖 31)，列表包含：連回原本頁面(Link)、打卡地點(Position)、打卡 時間(Time)、發文內容(Message)、按讚數(Likes)、回覆數(Comments)、該筆 資料是屬於純文字或圖片(Type)，若顯示為圖示，代表該筆打卡為圖片類型。
圖 30. Table Block 中，整理為同一筆打卡的顯示方式(Group Data)。
圖 31. Table Block 的 Group Data 顯示方式，展開打卡查看詳細資訊。
2. Expand Data：將每筆資料全部展開顯示。
Expand Data 的呈現方式，會依照使用者的打卡時間依序列出每筆收集 到的打卡資料，例如原本被合併為同一筆的打卡，會分開列出(見圖 32)，研
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
50
究者可以透過該種列表方式，一次查看使用者所有打卡的詳細資訊。列表包 含：連回原本頁面(Link)、打卡地點(Position)、打卡地點的地點類型(Place Type)、
打卡時間(Time)、重新整理後的打卡編碼(GroupNum)、發文內容(Message)、
按讚數(Likes)、回覆數(Comments)、該筆資料是屬於純文字或圖片(Type)，若 顯示為圖示，代表該筆打卡為圖片類型。
圖 32. Table Block 中，將同一筆打卡的所有內容分開顯示的方式。
3. 加入手機 Log 資料
Facebook 打卡資料集與手機 Log 資料集的欄位內容不同，因此我們也是 使用巢狀列表的設計方式，第一層(見圖 33)先使用統整性的資料列出前景程 式、操作前景程式或是打卡的時間點(Time)、打卡地點(Place Name)、打卡地 點的地點類型(Place Type)。
研究者可以針對列表最左方的「+」展開第二層列表，查看每筆資料的 詳細內容，依據資料來源的不同，手機 Log 資料的列表(見圖 34)包含：操作 前景程式的時間(Time)、前景程式的 Activity 內容(Activity)；Facebook 打卡資 料的列表如 Group Data 呈現方式的第二層列表所示。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
51
列表包含：連回原本頁面(Link)、打卡地點(Position)、打卡時間(Time)、發文 內容(Message)、按讚數(Likes)、回覆數(Comments)、該筆資料是屬於純文字 或圖片(Type)，若顯示為圖示，代表該筆打卡為圖片類型。
圖 33. Table Block 整合顯示 Facebook 打卡資料與手機 Log 資料。
圖 34. Table Block 顯示手機 Log 資料的詳細內容。
我們除了依照不同資料使用不同的呈現方式，另外也設計可以從 Table Block 中勾選資料的探索方式(見圖 35)。研究者可以針對想探索的議題，勾選出符合的 資料，再點擊上方藍色的 Visualize 按鈕，將勾選的內容進行視覺化，該操作會在 Search Path 中新增一筆探索記錄。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
52
圖 35. Table Block 勾選資料進行視覺化。