DataV作為資料可視化領域的聖杯，第一次讓可視化項目開發脫離了枯燥的代碼與反複的參數調試，讓每個人都有機會把自己有趣的資料做成動态圖表。如今，全行業都掀起了資料可視化的浪潮，資料可視化能力也很大程度上展現了一家公司或機構的商業智能與資料智能水準。反觀可視化使用者及開發者，對資料可視化元件的實時展示、互動、動畫能力需求也随之愈加旺盛。今天上線的VISLAB互動動畫元件包，就是在DataV平台上實作的、資料驅動的可視化炫技利器。
本文作者為阿裡雲MVP陳琦，旨在介紹VISLAB互動動畫元件包内各元件功能與應用場景，附帶一些有趣的資料可視化案例與見解，歡迎在評論區留言或加微信好友：dkbike
▍元件1（免費）：可變軸線映射元件
普通散點圖資料次元太少？沒關系，可變軸線映射元件完美解決問題。
當你的資料中含有多個字段的資訊，如多種食品的能量、蛋白質、脂肪、碳水化合物、膳食纖維含量等字段，并且想觀察每兩種營養成分的對應關系時，不再需要建立多個散點圖。隻需要把此元件放入項目，它自帶的軸線映射下拉框選擇器将囊括所有字段。點選滑鼠，輕松切換軸線映射的字段内容，多元資料分析能力max！
▍元件2：動态軌迹地圖
折線太生硬，飛線太宏觀？對于交通、物流軌迹的可視化，似乎一直沒有能完美複現想法的方案。
直到動态軌迹地圖的出現，改變了一切。
動态軌迹地圖通過經緯度串聯形成的軌迹資料，在地圖上展示移動的光點，使物流軌迹、車輛位置等資訊一目了然。你可以對接智能硬體實時資料、物流與軌迹的曆史資料，或者使用GeoJSON工具進行資料模拟。
▍元件3：熱力圖
在介紹本元件包内的熱力圖元件之前，先來看看可視化經典案例之一：全球溫度變化
每一列為一年的資料，以月為機關展示近一個世紀的溫度變化。從左向右，藍色的消失、黃色與紅色的擴張形成了一種緊迫感。即使不懂資料的讀者也會感覺到氣候變暖仍然在不斷加劇的事實。
熱力圖用強烈的畫面感使讀者專注于閱讀重要資料。現在，你也有機會制作自己的熱力圖了！VISLAB互動動畫元件包在普通熱力圖的基礎上更添加了值域漫遊功能，通過拖動值域滑塊，可以讓圖表忽略值域外的資料，産生呼吸般的展示效果，效果十分優秀。
▍元件4：互動關聯氣泡圖
此元件的最大優勢是自身攜帶多個值域漫遊元件，實作各種次元的資料篩選功能。
衆所周知，氣泡圖可以攜帶至少4個資料次元，分别為：x、y坐标、顔色、半徑。
當資料量較大時，氣泡圖的可讀性将明顯下降。如基于gapminder的著名資料可視化案例：各國收入水準與國民預期壽命的關系。
此案例中，x軸為國民收入水準，y軸為預期壽命，氣泡顔色為所在大洲，半徑為國家人口數量。由于資料量巨大，讀者難以從圖表中篩選出自己所需資訊。
如果想根據顔色、半徑進行篩選，例如隻關注于亞洲、人口一億以上的國家資料時，現階段的圖表都讓人無所适從。在這種需求下，互動關聯氣泡圖應運而生。
本元件在圖表區域一側帶有多個值域漫遊功能，使用滑鼠拖動搖桿進行值域限定。
顔色、大小，甚至明暗度，都可以單獨映射到不同搖桿上，實作對資料的全方位掌控。
▍元件5：月曆圖
在介紹VISLAB月曆圖之前，先看一個可視化經典案例：你的生日有多熱門？
作者選取了1994-2014二十年間的美國新生兒日期資料，以天為機關計算日均出生量，以熱力圖的形式制作了這個圖表。顔色越深，表示越高的日均出生量。讀者大都不會關注圖表周圍“陪跑”的資料，而會聚焦于最熱門、最冷清的日期或者最具有規律性的資料。
很明顯，最常見的出生日期大都在9月，其中又以9月9日至9月20日之間為峰值。這個現象經過思考以後也不難了解：基于人類正常的足月妊娠期——280天，減去排卵的平均時間——兩周，可以計算出受孕日期理論上處于分娩期前266天，即聖誕節前後——盛大的節日，年輕的靈魂，溫暖的室内，刺鼻的酒精，聖誕快樂。
當然9月成為生育高峰期并不應該完全歸咎于來自聖誕節的沖動或意外，也有很大的理性成分。九月出生也就意味着入學後成為了同年級學生中相對最年長的一部分，一系列調查顯示這部分學生更有可能拿到更高的成績和更好的體育能力，進而在未來生涯中擁有更好的起點。是以，九月出生率增加的部分原因可能是由于夫婦計劃在開學時生孩子。
看完了最熱門的時段，反過來就要關注最冷清的幾天。很有趣的是人們一般在節日“制造”生命但卻不願意“擁有”生命，愚人節（4.1）、獨立日（7.4）、感恩節（11月第四個周四）、聖誕節（12.25）等重大節日時期都是新生兒數量的低谷期。當然，這是否跟醫院傾向于把誘導分娩和剖腹産安排在工作日有關？這一點猜測想聽聽了解美國社會的朋友怎麼說。
除了宏觀地呈現資料，月曆圖也很大程度上友善讀者從橫向、縱向的不同視角去比較資料并發現規律。上面這個案例中，如果我們換一個視角，縱向審視資料，又可以發現一個有趣的現象——每個月的13号一定是當月出生量的低谷之一。“13”為什麼被人們所避諱，關系到廣泛的西方文化，難以三言兩語解釋，就像南方公園，就像辛普森一家，筆者不在此贅述。
月曆圖的特點也成就了它的缺點，較大較宏觀的資料粒度，無法展現單個粒度内樣本個體的差異性。那我就基于此案例補充一句圖中無法得出的結論：在美國，周末的日均新生兒出生數量遠遠低于工作日的日均出生數量，有時甚至是工作日的一半：
這個結論需要比月曆圖中更細粒度的資料，感興趣的朋友可以留言或私信我擷取1994-2003年間每一天的新生兒資料統計表。
圖的作用是表達資料并被讀者感覺，引發更深層的思考和分析。在這個層面上，熱力圖非常完美地扮演了一個資料表達者的角色。而VISLAB月曆圖元件将熱力圖進行了更垂直的封裝，極大地提高了它的應用效率，同時也為它添加了值域漫遊功能，成為資料展示不可多得的利器。
最後留給大家一個問題：既然情人節在2月，為什麼11月的新生兒出生量卻不高？（資料參考下圖）
▍元件6：線性回歸散點圖
本元件的功能非常簡單，又非常重要。當平面直角坐标系散點圖資料量太大時，單獨的散點資料便隻具有極低的參考性。如dataV自帶的元件“大規模散點圖”：
VISLAB為散點圖引入了一進制線性回歸方程。當圖表擷取到散點資料後，即時自動生成一進制線性回歸圖像，增強資料可讀性。
未來，VISLAB将帶來散點圖自動生成多元線性回歸方程的功能。
▍元件7：硬碟空間圖
硬碟空間圖學名treemap。為了防止使用者把treemap和廣義上的“樹形圖”、“樹狀圖”混淆，我使用了一個更直覺的元件名字。此類圖表将分層/樹狀/嵌套資料顯示為一組嵌套的矩形，用顔色區分單獨的資料次元，然後用較小的矩形來表示子資料分支。同時，葉節點的矩形面積與資料上的某一次元成比例。
新版友盟指數裝置詳情中有個這樣的可視化圖表：
從這張圖可以很直覺的看到中國Android智能手機市場各大品牌占有率情況。圖中通過顔色區分品牌，通過面積表現各個品牌占有率，一目了然。如果細心的話還能看到每個品牌矩形還被分割成了若幹小矩形，這些小矩形對應了該品牌下各種機型的占比。點選某個品牌區域還可以放大至該品牌的機型細分視圖，浏覽機型的占比情況。
這是一個非常典型的Treemap可視化應用，Treemap适合展現具有層級關系的資料，能夠直覺展現同級之間的比較。例如上面Android裝置占有率Treemap的原始資料結構是這樣的：
可以想象，如果使用這樣的樹狀結構直接展示中國Android裝置占有率是多麼的低效，并且還損失了很多資訊。
VISLAB把硬碟空間圖第一次引入了DataV平台中，并且包含了完整的互動及動畫功能，再次豐富了可視化項目的資料表達。
▍元件8：三聯儀表盤
儀表盤這種深入人心的資料表達方式無需多言，簡單直覺，同樣可以對接動态資料實作實時變化。
▍線上體驗
▍購買相關
▍關于作者
對資料可視化感興趣？加我為微信好友，一起暢想可視化的未來