min.

D3.js 入門

2020-05-11# data visualization

最近工作上大量使用 D3,一開始使用 D3 的時候總覺得,查一個範例是一個範例,很難融會貫通、D3 門檻很高、很不直覺,直到聽了 Shirley Xu 的分享有如五雷轟頂。

所以決定來測試看看,對於 D3 的新理解是不是真的能用在所有的 D3 Layout 上?因此有了這一個 Miniseries 將常常使用到的 Layout 來重新詮釋一次。

資料視覺化的本質

生活中充斥著資料,但是看看這些資料原始的樣貌:看到了一堆數字,但沒有任何的「感覺」,甚至覺得頭很大,很難在一秒之內找到最大的數字、最小的數字、也不知道變化多大、甚至要從裡面看看這個資料是對是錯都很困難。

為了讓這些資料不要躺著生灰塵、可以讓人們可以更方便的討論、理解它們,有人先從花時間用表格替這些資料對齊、分類變得更好閱讀,到後來大家找到更好的方法:把這些資料變成有助於人們看懂的圖。

資料視覺化就是在把這些「象徵」轉換成「圖像」的過程,這件事是在任何媒體上都可以發生的事情。

從目的上,這件事可以沒有特別的功能性,以藝術表現為主,像是 Generative Art,也可以為了傳遞資訊來設計,像是狹義的資料視覺化,產生各種圖表。甚至這兩者本身的界線就不是這麼明確,例如:Variable 工作室的 Data Art 作品。就算不要視覺化,我要「物體化」!沒問題,當然可以在實體物體上發生,像是:Data Physicalization。

但一般印象裡,圖像是連續的、一體的,資料是離散的、分開的,這兩件事要怎麼轉換在一起?

分解圖像與分類資料

既然圖像是完整的那就分解它,既然資料是分散的那就聚合它,前人替我們將視覺分析成一系列的元素,而替資料們分了幾大類,於是乎這兩件事就可以對應在一起了。

Visual Encoding

基本的圖像分解,可以由點到面,分別可以有尺寸、形狀、色相、飽和度、亮度及方向上的變化,當然並非所有所有都可以適用,例如:線條顯然就沒有明顯的形狀變化、更進階的我們可以讓視覺元素重複,便呈現出了樣式、或調整視覺元素與週遭的關係。

Data Type

資料最基本可以分類成以下幾種資料:

  • 類別 (nominal):這種資料之間沒有數值關係、也沒有順序關係,只是項目之間有不同,例如:性別、宗教。
  • 等級 (ordinal):這類型的資料之間有順序關係,但不是基於數值,也不能運算,例如:不同意、同意、非常同意。
  • 等距 (interval):這類型的資料之間有順序、也有實質數據上的意義,但不能代表真實世界的意義,只是一種指標,例如:溫度(0 度不等於沒有溫度)。
  • 等比 (ratio):這類型的資料不但有順序、有數據上的意義、也有真實世界的意義,例如:人數、收入、年齡。

資料看起來只有上述四種,卻已經足夠複雜,因為我們可以將許多數據疊加在同一個圖表上,甚至資料可以有結構。

而資料視覺化就是在挑戰資料與視覺之間的可能性的一個領域,了解什麼樣的轉換最能達成不同的目的?並隨著有越來越多元的資料被揭露出來,從無意義的資料、到有意義的、數據分析、預測...,搭配更多的呈現手法,例如:動畫、互動、甚至走向沈浸 VR... 資料視覺化依舊是一個欣欣向榮的領域。

網站上的資料視覺化

講了許許多多的資料視覺化,回歸到我們焦點 - 網站怎麼實現這檔事?

除了思考資料與圖像的轉換外,還需要的是透過程式把資料轉換成網站可以懂的語言。剎那間,有各式各樣的工具百花齊放,例如:ProtoVis ... 它們都是從更高層的 function 來打包各種圖表,意思類似於:你呼叫一個 function 設定一些參數、就跑出基於網頁元素的一張圖:

這樣很方便沒有錯,但這樣距離原本轉換的概念太遙遠了。如果要客製化、還要學習新套件的標準而且也沒有效率,而 D3 的美學在於,我們可以基於我們對 DOM 的理解、直接控制 DOM 元素,直接對應了一般對資料視覺化的想像:

D3 透過四個系列工具來處理資料的轉換:

  1. Data:將資料轉換成 D3 Modules 需要的形式。
  2. Modules:將資料轉成 SVG 需要的內容。
  3. Selections:將轉換後的資料塞進 DOM 元素之中。
  4. Interaction and Animation:透過時間跟互動來更新資料的變化。

而這是 2011 年時 D3 提出時的架構,回到 2020 的現代,前端框架已經流行了好幾年, Shirley Xu 在 React + D3 的分享裡面提到:D3 可以幫我們處理前段的 SVG 轉換、而後續的 DOM 操作自然的交由 Framework 來處理。

我們終於可以脫離 D3 難懂的 Data in, Data out 怎麼做 Dom 處理,從純粹的 SVG 轉換來看待 D3,接下來我們會一個個 Layout 去深入理解 D3 API 並再回頭看 D3 的 Data In Data Out。

參考資料

# data visualization

© 2020 minw Powered by Gatsby