D3 Deconstructor Cover

偶而看到很棒的資料視覺化也會想玩玩看他的資料,而他們的資料通常也不難取得,只要透過瀏覽器監看網路傳輸的內容很容易就可以找到。不過,今天要介紹一個有趣的工具,讓你按兩下滑鼠就幫你取得資料 - 他的名字是 D3 Deconstructor。

D3 Deconstructor 的原理並不複雜,基本上是透過分析指定網頁的 DOM Tree 結構、尋找 SVG 內的元素跟屬性來取得資料。但由於他是針對 D3 所設計,所以截取的目標必須要是利用 D3.js 與 SVG 元素開發的視覺化作品才行。

另外,他是一個 Google Chrome Extension,所以你必須用 Google Chrome 才能使用;到 Chrom Web Store 搜尋就可以找到,推出的時間大概是去年十月左右,目前是使用者跟評論都不多,但是評價都是五顆星。

D3 Deconstructor - Google Web Store

安裝好之後除了在瀏覽器右上角會看到以外,在滑鼠右鍵叫出的選單中也會出現 D3 Deconstructor 的選項。使用方式相當簡單,在想抓取資料的視覺化頁面上點選選單中的 D3 Deconstructor 選項即可,緊接著畫面會變黑,提示你資料正在截取中。截取完以後 D3 Deconstructor 會開啟一個新的視窗,用表格的方式呈現我們想要的資料。隨意找一個看起來不太容易抓的零時政府總預算視覺化專案來試試:

Using D3 Deconstructor D3 Deconstructor is getting data

資料截取完成後開啟的新視窗內容。看起來還不賴:

Dat by D3 deconstructor

如圖所見,左方是資料內容,右邊則有數據跟視覺屬性的對應,而在上方可以選擇匯出資料到 JSON 或 CSV 檔。

Visualization Restyling

光就這個工具可能沒有太多可以介紹的,不過事實上這一個擴充套件是美國柏克萊大學 VisLab 一篇論文裡面的其中一個工具,該論文主要在談的是如何方便的將線上的視覺化作品更換樣式,所以除了這個粹取資料的工具外,還有另外一個是用來修改樣式的工具。完整的論文在這個網頁可以下載得到,如果對這個題目有興趣的話不妨讀讀看囉!

對於 D3 Deconstructor 想了解更多的話,他其實有開放源碼放在 Github Page 上,可以去看一看。他的 Chrome Web Store 頁面則是在這裡


Written by infographics.tw

發表迴響

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