衡石可視化：從 ECharts 到 namjagbarwa

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

這是一張表現歷史朝代變遷的示意圖，可以說是數據可視化比較好的例子。

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

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

這個是一個某公司按地區劃分的銷售額數據

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

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

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

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

從視覺的角度，可視面積是最能體現一個數據的重量，我們知道扇形的面積公式是

S = (1/2)θR²

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

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

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

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

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

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

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

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

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

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

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

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

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

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

橫向的

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

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

玩數據，衡石是認真的

數據可視化，衡石 FE 是認真的

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