一、視覺化思維的步驟

下面是一張資料視覺化作品，將多種瓷器的資料進行視覺化展示。

本章就來介紹，這張圖是如何實現的，怎麼從資料變成視覺化圖形。

一種製作方法是，開啟 PS 軟體，一個個增加圖形，調整位置、大小以及調整。不過，這是繪圖，而不是資料視覺化。資料視覺化需要有資料，而且是結構化資料，然後將資料展示成圖形。

讓我們看看如何使用資料視覺化的思維，繪製出這張圖表。

● 第一步：拿到資料，分析資料型別
● 第二步：將資料繪製成一個圖形
● 第三步：將資料欄位對映成圖形的屬性
● 第四步：對圖形進行調整

二、原始資料

沒有資料就沒有視覺化。此外，僅僅有資料不進行分析處理，也無法理解資料。

下面是上一節瓷器圖表的原始資料。

[  {year: 1000, name: '南宋|龍泉窯|青瓷蓮瓣碗', size: 20}, {year: 1400, name: '明|宣德窯|青花描紅龍紋碗',zize: 10}, ....  ]
有了資料，我們就來分析這些資料，為視覺化做好準備。

一條資料使用多個欄位描述資訊。
{year: 1000, name: '南宋|龍泉窯|青瓷蓮瓣碗', size: 20}
上面的程式碼提供了三個欄位 year、name 和 size ，描述了“產於公元1000年的南宋|龍泉窯|青瓷蓮瓣碗，半徑大小約是 20 cm”。

資料是有型別的，指的就是資料欄位的型別，比如 year 的資料型別。按照傳統的劃分方式，資料型別分為下面幾種。

這是一種大家都很熟悉的方式，這就是我們身邊萬物的分類方式。

• 名詞：常見的名詞，不關心順序，比如國家的名稱，瓷器的名稱
• 有序：有序的分類，例如警報資訊，從低到高分為黃色警告、橙色警告和紅色警告
• 間隔：有間隔的數字，0 不代表沒有。例如溫度，0度不代表沒有溫度
• 比例：表示欄位之間存在比例關係，0必須有意義，瓷器的大小就是一個比例值。

另一種劃分方式更加簡單，是按照資料是否連續進行型別的劃分。

● 分類：每個值都是一個離散的個體，例如瓷器的名稱，可以細分為有序的分類和無序的分類。
● 連續：連續不間斷的數值，時間也是一種連續的資料型別，瓷器的生產日期就是一個連續值

下面再以另一份溫度的資料為例。

[ {"month":"一月","temperature":7,"city":"tokyo"}, {"month":"二月","temperature":6.9,"city":"newYork"}, {"month":"三月","temperature":9.5,"city":"tokyo"}, {"month":"四月","temperature":14.5,"city":"tokyo"}, {"month":"五月","temperature":18.2,"city":"berlin"} ]

上面的物件中，month 代表月份，temperature 代表溫度，city 代表城市。

• month 和 city 都是分類資料，但是又有所差異。month 是有序的分類型別，而 city 是無序的分類型別。
• temperature 是連續的數字

三、圖形元素

上一章我們瞭解了資料，資料視覺化是將資料展示成圖形，那麼什麼是圖形？

常見的圖形是點、線和麵。

使用圖形表示資料，需要建立圖形和資料之間的對映。

這種對映是通過圖形屬性表示資料欄位建立起來的。

圖形屬性又怎麼理解？

• 三角形、圓型和菱形分別表示不同形狀的點；
• 折線、曲線和點線也是線的不同樣式；
• 瓷器的顏色、大小都可以來區分不同的瓷器。

這些都是圖形屬性。

圖形屬性也叫視覺通道，是通過視覺來區分不同圖形，例如：位置、顏色、形狀、大小等都可以對圖形進行區分。正如一條資料可以有多個欄位，一個圖形也有多個屬性，下面是一些常見的圖形屬性。

為了同資料欄位進行對應，我們也可以將圖形屬性（視覺通道）分成兩大類：

• 定性（分類）的圖形屬性，如形狀、顏色的色調、空間位置
• 定量（連續、有序）的圖形屬性，如直線的長度、區域的面積、空間的體積、斜度、角度、顏色的飽和度和亮度等

看到這裡，大家會懷疑這一切跟上面的圖表有什麼關係，跟瓷器有什麼樣的關聯。其實本章最前面的圖表就是用幾何圖形的位置、大小、顏色來區分不同的圖形（瓷器），這個過程就是圖形對映。

四、圖形對映

圖形對映（也叫視覺對映、視覺化對映）是資料視覺化的核心，是將圖形屬性進行編碼、同資料關聯起來的工具。這個概念（工具）在後面的章節裡面會反覆出現。

我們先來看一下，圖形屬性在表現資料時的能力上的差異。

1.圖形屬性的表現力

進行圖形對映時，我們需要考慮不同圖形屬性的表現力和有效性，主要體現在下面幾個方面。

• 準確性：是否能夠準確地表達視覺資料之間的變化。
• 可辨認性：同一個視覺通道能夠編碼的分類個數，即可辨識的分類個數上限。
• 可分離性：不同視覺通道的編碼物件放置到一起，是否容易分辨。
• 視覺突出：重要的資訊，是否用更加突出的圖形屬性進行編碼。

不同的圖形屬性，表達資料的能力有差異。

上圖中，分類資料裡面，表達能力最好的是位置，其次是顏色、形狀，最差是紋理。連續資料裡面，表達能力最好的是座標，其次是長度和角度，最差的是亮度/飽和度。

2.圖形對映規則

圖形對映中，我們來看一下各個圖形屬性可以對映的資料型別。

• 位置：平面位置有兩個維度（x方向、y方向），因此可以對映到兩個資料欄位。
• 顏色：顏色有色調、亮度和飽和度，色調一般用於區分不同的分類，亮度和飽和度用於對映連續的欄位。
• 形狀：形狀本身是一種分類（離散量），所以一般用於表示分類的資料欄位。
• 大小：大小是一種連續量，很自然的用於對映連續的欄位。

看到這裡，我們就可以思考瓷器資料如今進行圖形對映。

• year (年份) 這個連續欄位，對映到位置上
• name (名稱) 這個分類欄位，對映到形狀和顏色上
• size (大小) 這個連續欄位，對映到大小上

PS：在本章一開始的圖片上，由於瓷器的數量有些多，所以我們使用了更加抽象的形象來表示瓷器，更加有藝術氣息。

五、圖形對映的例項

我們以瓷器資料為例，展示從資料到圖形的對映過程。

我們先從最簡單的資料開始，以兩條資料開始進行圖形的對映。

{year: 1000, name: '南宋|龍泉窯|青瓷蓮瓣碗', size: 20}, {year: 1400, name: '明|宣德窯|青花描紅龍紋碗',zize: 10}

1.位置

對映規則。

• 點表示瓷器，每張瓷器圖片代表一個點
• year 生產日期對映到位置的 x 座標（y 座標固定）

生成下面的圖表。

2.大小

增加一條對映規則。
size 點的大小，表示瓷器的大小。

3.顏色

幾何形狀代替瓷器的圖片，同時增加顏色對映規則。

• 圓點代表瓷器
• 顏色表示不同的瓷器

4.形狀

增加形狀的對映規則。

• 根據瓷器有幾個顏色，構成對映到不同的形狀

5.更多的資料，更多型的形狀

由於不同瓷器的生產日期比較相近，所以會互相重疊，對瓷器的位置進行調整，同時增加同具體日期的連線，則生成了最終的圖表（50個瓷器資料樣本）。

六、總結

瞧瞧，看似非常複雜的圖表，通過一步步分解使我們輕鬆的理解了視覺化的實現思路。

下一章，我們將圖形對映轉換語法，以一種更加自然易操作的形式來實現本章的圖表，同時提供了千變萬化、自由組合的能力，快去 Look 一下吧！