今天和大家聊聊數(shù)據(jù)可視化，數(shù)據(jù)可視化是用可視化的元素來描述數(shù)據(jù)，目的是能夠清晰直觀的展示數(shù)據(jù)。數(shù)據(jù)是根本，可視化是邏輯，數(shù)據(jù)決定了最終的可視化效果。這里的可視化元素常見的有形狀、大小、顏色、位置等。

這是一張表現(xiàn)歷史朝代變遷的示意圖，可以說是數(shù)據(jù)可視化比較好的例子。

縱向是時間，橫向是疆土，顏色是不同的朝代。從圖中可以清晰的看出：三家分晉；秦滅六國實現(xiàn)大一統(tǒng)；東漢末年群雄割據(jù)到三國再到南北朝持續(xù)了幾百年的動蕩；五代十國更是短短幾十年里各種政權更迭；蒙古鐵蹄雖然強大統(tǒng)治時間卻是個大朝代中時間最短的等等；一張圖把從夏到清的朝代更迭表現(xiàn)得淋漓盡致。

接下來，我們舉幾個實際的例子。

這個是一個某公司按地區(qū)劃分的銷售額數(shù)據(jù)

我們先做一個普通的柱狀圖

可以看到每一個柱子代表了一行數(shù)據(jù)，柱子的位置由地區(qū)描述，柱子的高度由銷售額描述，柱子的顏色是由銷售額描述。同理，柱子可以換成折線、散點、區(qū)域，它們都是在直角坐標系下，由數(shù)據(jù)的兩個維度來描述數(shù)據(jù)點位置從而進行可視化的。同時，柱子相比于其他幾種方式還多了一個寬度可以用來描述數(shù)據(jù)。

 下面換另一種常見的方式來描述，為了節(jié)省空間，三種類型的餅圖放到了一起

這三個餅圖都是用扇形來描述數(shù)據(jù)，地區(qū)描述了顏色。第一種傳統(tǒng)的餅圖，銷售額描述了扇形弧度，他們的半徑都是一致的；第二種南丁格爾圖，又叫玫瑰圖，基于傳統(tǒng)的餅圖，銷售額還描述了半徑；第三種也是南丁格爾圖，銷售額描述半徑，弧度是一致的，可以把它看著極坐標下的柱狀圖，但是又有區(qū)別。

從視覺的角度，可視面積是最能體現(xiàn)一個數(shù)據(jù)的重量，我們知道扇形的面積公式是

S = (1/2)θR²

在第一種餅圖中，R 是一致的，θ 是銷售額，這是比較直觀而且公平的，餅圖還有一個總的概念，每一個地區(qū)大概占總銷售額的幾層也是比較清晰的；第二種餅圖R和θ都是銷售額，意味著最終的面積是銷售額的三次方，從這個角度說對西北、西南地區(qū)的銷售是不公平的，頭部區(qū)域業(yè)績被放大，尾部被弱化；同理第三種圖的面積是銷售額的二次方，這里依然是不公平的，因為柱子的面積是 S=w*h，這也就是不能直接當做柱狀圖的地方。綜上，這組數(shù)據(jù)最合理的可視化方案是選擇第一種餅圖。其他兩種圖在需要強調(diào)頭部數(shù)據(jù)時，或者數(shù)據(jù)的本身就應該有次方關系時會比較合適。

繼續(xù)延展一下，不同的圖形是有不同的特點的，比如上面說的柱子是 S=w*h，扇形是 S=(1/2)θR²，對于這里的w、h、θ、R 其實都是可以用來描述數(shù)據(jù)的。如下圖，增加了某公司的地區(qū)的利潤數(shù)據(jù)：

在最初的柱狀圖上，我們增加利潤去描述柱子的寬度，就會等到下面這個圖：

這樣就能清晰的看出華東、中南、華北的利潤是最高的。

當然了，我們通常不太習慣用柱子的粗細去描述一個指標，這里的例子是為了后面的進一步探索服務說明，所以大家先不要急。

同理，我們使用銷售額去描述扇形的弧度，使用利潤去描述扇形的半徑，可視化的效果如下：

同樣的，如果是考慮到習慣，針對這組數(shù)據(jù)，我們通常會用分簇柱狀圖來展示。

同一個圖中加入了兩個柱狀圖，用顏色來描述屬于哪個度量。能夠更清晰的比較數(shù)據(jù)各個地區(qū)間銷售額的大小關系和利潤的大小關系。針對與同一個地區(qū)，兩個柱子間沒有直接關系，因為坐標系不同，但是因為坐標系是從0開始且線性增長（即它們的高度公式是 h = α * V；這里的h是高度，α 是比例，這個是可視化邏輯中的常量，V 是具體的數(shù)據(jù)值），所以我們能夠大致間接的看出利潤率的高低，其中中南、華北較高，東北、西南較低。

接下來到復雜一點的場景，讓我們再來看下面這組數(shù)據(jù)，某公司的銷售數(shù)據(jù)增加了細分維度，如下圖：

這個時候，如果我們繼續(xù)使用分簇柱狀圖來做可視化，效果會是這樣的

因為顏色描述了細分，所以我們甚至不能用顏色來區(qū)分兩個度量的數(shù)據(jù)，只能通過位置來區(qū)分，左側柱子和左側y軸是銷售額，右側柱子和右側y軸是利潤，他們都是用高度來描述數(shù)據(jù)的大小。

但是事實上，針對這個場景，我們可以用更簡潔的方式，這時可以看到柱子的粗細從可視化角度來說，竟然是比較方便的，能夠直觀傳遞出多維多指標的數(shù)值的對比信息。

我們使用地區(qū)來描述X軸，銷售額來描述y軸也就是柱子的高度，利潤來描述柱子的寬度，細分來描述顏色并作為一個子維度對柱子進行切分。就會得到下面的可視化效果：

考慮到垂直的柱狀圖通常視覺習慣關注高度，為了抵消一些不適應感，橫向的會自然一些。可以看出，不同地區(qū)針對不同細分下的客戶帶來的利潤和銷售額的關系是不同的，每個地區(qū)的客戶的收入比例也是不同。

橫向的

上面的案例也許是一個不常見的情況，并不是鼓勵大家越抽象越好，畢竟數(shù)據(jù)可視化首先是要達到清晰傳播信息的目的。但是這里表現(xiàn)出來的可視化高度靈活的自定義能力，是我們能夠自由創(chuàng)作的基礎條件，我們賦予了專業(yè)人員更加底層的操作空間，這是筆者想要表達的初衷。

回顧衡石可視化的歷史，最初2016年當時不到20歲的小同學用d3開發(fā)了40多種 chart，內(nèi)部代號 makalu；隨著業(yè)務的發(fā)展，需要支持 chart 的各種元素配置，當時三個人的團隊，基于 Echarts 實現(xiàn)了這40多種 chart，這是最初的 namjagbarwa；之后我們在 namjagbarwa 中進一步抽線，實現(xiàn)了一套基于圖元描述的可視化邏輯，向可視化的業(yè)界翹楚 Tableau VizQL 致敬，我們封裝為衡石的可視化語言 HVL。正如上面所說，通過定義數(shù)據(jù)描述圖元的位置、顏色、大小等來抽象數(shù)據(jù)可視化邏輯。這個方向可以做的還很多，我們也正在努力著。

玩數(shù)據(jù)，衡石是認真的

數(shù)據(jù)可視化，衡石 FE 是認真的

作者:楊驥，畢業(yè)于哈爾濱工業(yè)大學，豐富的移動端、IM 數(shù)據(jù)可視化工作經(jīng)驗；曾為百度的開源項目ECharts 創(chuàng)始團隊核心工程師；2018年加入衡石帶領前端工程團隊。