我涉及的數據可視化的實現技術和工具

時間 2019-11-18

標籤涉及數據可視化實現技術工具简体版

原文原文鏈接

最近一直在研究數據可視化的相關理論和實現方案，相關實現技術和工具也瞭解使用了很多，須要寫篇綜述性的文章作整理。因爲本人以前主要是作web開發的，故而我所找到的數據可視化的實現技術和工具大部分都是基於web的。這很正常，由於web便於分享和查看，如無心外咱們都但願用瀏覽器直接訪問可視化做品。這篇文章主要記錄我使用心得。javascript

1. HTML5 canvas

喬教主去世的先後兩年，HTML5很是火，在喬教主的指引下，HTML5彷彿是將來的明燈，將一統移動端和桌面的瀏覽器，甚至製造各類原生應用，彷佛開個web相關會議不談談HTML5大方向就落伍了。可是到了2013年，HTML5的話題一會兒沉寂了下來，彷彿以前的熱鬧都是假象——事實上這是由於這個東西已經從將來變成的現實，一個新技術進入了平穩發展期，天然不必像宣傳普及期那麼大張旗鼓了。php

HTML5標準主要是給給瀏覽器廠商看的，就是要讓瀏覽器支持從調用攝像頭到3d繪圖等一系列功能，經過統一標準來減輕web開發者的負擔。不過HTML5推動過程也不像原來想象得那麼順利。HTML5遇到的最大問題是瀏覽器兼容性，標準不斷地補充修改，可是並不是全部瀏覽器都能使用。形成這種現狀的緣由有二，一方面有瀏覽器廠商由於利益緣由大打出手（例如google反對h.264致使video標籤難產），一方面有個別瀏覽器廠商不求上進半天不支持主要標準（微軟如今也着急了，IE12已經迎頭遇上了）。html

從2010年底起我就開始接觸使用HTML5相關的新技術。而用的最多的就是繪圖相關的canvas標籤。canvas標籤的瀏覽器兼容性比較好。根據最新的統計（百度統計|流量研究院）。國內還在使用IE6的用戶已經接近10%。前端

<canvas></canvas>是html5出現的新標籤，像全部的dom對象同樣它有本身自己的屬性、方法和事件。使用canvas的基本方式是，使用js調用canvas的API繪圖。例如，繪製一段貝塞爾曲線，須要用寫這樣一段javascript來生成：html5

function draw24(id) {
    var canvas = document.getElementById(id);
    if (canvas == null) {
        return false;
    }
    var context = canvas.getContext("2d"); //獲取convas 2d對象，其中封裝了不少繪圖方法（如今canvas只有2D對象能夠調用）

    context.moveTo(50, 50); //移動繪圖中心點
    context.bezierCurveTo(50, 50,150, 50, 150, 150); //繪製貝塞爾曲線
    context.stroke(); //繪製邊框
    context.quadraticCurveTo(150, 250, 250, 250); //繪製2次樣條曲線
    context.stroke(); //繪製邊框
}

最後繪製的結果以下圖所示：java

: 繪製曲線，這個例子摘自《玩轉html5 canvas畫圖》

可是實際使用的時候咱們一般不須要這樣直接調用API。如同原生的javascript API很繁瑣，調用起來比較麻煩，因而有不少JS庫（如jquery等）將其封裝以方便使用，HTML5 canvas也有相應的JS庫。我用過並感受不錯的有以下一些：python

flot, 我第一個使用的canvas庫。基於jquery，支持有限的視覺形式（折線、條形、面積、點）和縮放等動畫效果，簡單易用。
RGraph，我第二個使用的canvas庫。有優秀的動畫效果，特色是有大量的傳通通計圖的例子，而且很容易對這些例子作定製。
chartJS, 該庫將不少基本統計圖的實現方法封裝起來，只要經過簡單調用便可以實現。這貨的優勢就是簡單易用，不過若是要作深度定製恐怕還不太夠用。
kineticJS, 是近來來canvas類庫中的新秀。這個庫的優勢是在處理大量對象的時候很快，由於使用了多canvas技術。在它的官網上甚至能找到不少相似與flash動畫的例子。另外它的教程不錯。考慮到其餘庫不少時候依賴例子定製，而這個文檔寫的好對於自主設計更有效，多是目前最強的庫。
porcessingJS, 它是著名的Processing語言的一個接口，用processing的語法以canvas進行繪圖，以後講processing的時候還會講到。優勢是自由度大，缺點是沒有預約義模版，你可能須要處處找一些例子來學習。
Echart, 一個由百度前端發起的canvas國產類庫。這個echart實際上是在canvas類庫zrender的基礎上作的主題圖庫，優勢有數據驅動，圖例豐富，功能強大，支持數據拖拽重計算，數據區域漫遊，全中文文檔很是過癮。跟一樣是國產的前端腳手架fis同樣（官網http://fis.baidu.com/），都是誠意滿滿的國產套餐，體現了現今國內不俗的前端開發實力。我試用後感受很是好，在我參與的一些項目中直接採用。關於我使用經驗參見：百度數據可視化圖表套件echart實戰

此外，我使用過可是感受很糟糕的有：jquery

dataV.js, 此乃浙大CAD&CG國家重點實驗室可視化與可視分析小組和阿里集團數據產品部門合做開發的開源可視化組件庫。我2012年初就關注並試用了。當時我興致勃勃地從github上下載了源碼，企圖用在本身的項目中。誰知第一個測試demo就各類出錯，我查了半天，居然發現原始demo裏就有錯誤，bug出在類庫的源碼裏，並且不止一個官方demo有錯誤。這個類庫口號響亮使人震驚，但更新速度之緩慢使人震驚，文檔不全也使人震驚。爲此我不得不替換成RGraph.js。如今已通過了兩年了，我回到他們的官網http://datavlab.org/，發現兩年來官網就沒怎麼更新過！惟一的區別恐怕是原來官網上的幾個例子的連接還失效了（想當初我但是把他們的例子、文章所有點擊查看過）......從實用性上講，跟如今百度新推出的Echart類庫相比，2年前的datav.js弱爆了。並且官網長期不更新也讓我很難對如今的它抱有信任。android

這裏有一篇翻譯文章《知名html5 canvas庫對比》，比較了github上更多的此種類庫。有須要的朋友能夠再到裏面去看看。git

最後再說說canvas這個技術自己的優缺點：

缺點：

只能繪製2D圖像，暫時不支持3D圖像。
canvas繪製圖形出並不是能夠直接操做的dom對象。若是要對其進行相似dom的操做，例如添加屬性等等，比較麻煩（這就是爲何必須使用類庫）。

優勢：

因爲canvas繪圖不會給每一個點生成對象，因此繪製速度快，消耗內存少。（這點主要是相對於SVG，VML技術而言）
兼容性較好。除了IE6，其餘瀏覽器均可以支持。（IE7，8須要載入擴展JS，終究仍是能用的）

2. SVG

關於SVG技術，在w3c的定義以下：

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

因爲矢量圖形技術的優越性（圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失,便於操做和編輯），於是將其應用於網絡成了板上釘釘的事情。SVG標準很早就出現了，2003年初就成爲了W3C標準。可是，它的普及花費了很長時間，其中主要緣由就在於微軟。因爲2000年依賴微軟取得了在瀏覽器市場的壟斷地位，爲了保持這種優點，微軟有意地在IE系列中維持着一大批微軟標準，而無視w3c。固然對於當時的微軟來講它有這個底氣。本着壟斷的天性，微軟於微軟1999年9月附帶IE5.0一塊兒發佈了VML矢量圖形標記標準，有些人認爲VML就是IE裏的畫筆。VML實際上是Word和HTML結合的產物，也是用XML詞表來定義。可是VML本質是word裏圖形程序在IE上的遷移，不只不開源，並且操做複雜，效率低。使人遺憾的是在IE長達10年的壟斷中一直只支持VM。IE6，7，8都不支持SVG，直到IE9才支持SVG。而如今，喪失瀏覽器壟斷地位的微軟終於認清現實，VML是已通過時的技術，在IE10中不予支持。詳見微軟的申明。

SVG最大的優勢就是繪製和控制簡單。直接在html頁面里加入xml語句就能夠編輯繪製。例以下面的代碼就是畫一個圓、一個橢圓和一道黑線，把這段代碼另存爲一個html文檔再用谷歌瀏覽器打開就能看到效果了：

<html>
<svg>
	<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2" />
	<ellipse cx="250" cy="250" rx="100" ry="200" fill="yellow"/>
	<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
</svg>
</html>

跟前文中canvas繪圖的方式比一比，就知道SVG是多麼容易控制了。

固然，使用SVG時咱們一般也是使用類庫來提高效率。這裏的類庫主要有三種：

highcharts.JS, 在現代瀏覽器中使用SVG繪圖，在IE6，7，8中用VML繪圖。包含一堆預約義的圖表和樣式。惟一的問題是，這貨收費。只對非商業用途免費。
raphael.js，以著名畫家拉斐爾之名命名的繪圖JS庫，跟highcharts相似，也是SVG + VML兼容性方案。但它是開源的，應用也比較普遍。使用它的時候有必要再下一個gRaphael圖表庫做爲參考。
D3.js，D3js是應用在web開發上的開源JS組件庫，是一個數據可視化工具。D3應用的最爲普遍，不過只支持SVG，我會重點講述。

D3的全稱是Data-Driven Documents(數據驅動文檔)，在github上關注數量超過了2萬人（超過了全部canvas類庫的關注數量），是很是受歡迎的開源工具。使用d3的有開發者，有設計師，有藝術家，資料很是豐富（雖然中文的不多）。關於D3的個人應用案例能夠見我以前的文章《D3js初探及數據可視化案例設計實戰》。

那麼接着說說D3的優缺點（基本上也就是SVG的優缺點）：

優勢：

D3最大的優勢在於其資料豐富，案例很是多。這是真的是一個極大的優勢。
SVG矢量圖形的特色是無損縮放，這個優點在顯示2D圖形式會有很是好的效果，而且兼容各類分辨率。
SVG圖形的節點能夠像dom元素同樣控制，這就讓自主創做圖形變得更容易。相對於canvas這也是很是大的優點。

缺點；

SVG是2D矢量圖，不能畫3D圖形。（用2D矢量能夠畫不少帶透視效果的僞3D圖，那並非真正的3D圖！）
d3.不支持IE6，7，8。若是想要IE8使用d3，請用r2d3.js（一個結合了 Raphael.js的擴展庫）。Raphael.js是一個跨瀏覽器的矢量圖形庫，它實現IE6，7，8兼容的方法是：在IE6，7，8中使用VML，在其餘瀏覽器中使用SVG。另外，若是圖形複雜，就不要期望用Raphael.js在IE上能跟D3畫出同樣酷炫的效果。
SVG的節點都是對象，很是佔用內存。例如論壇裏一個朋友使用d3繪製超過12000個節點的圖，直接致使每一個試圖打開它的瀏覽器都崩潰了。這個時候若是不肯意作簡化那麼應該試試canvas繪圖。

最後，補充一個問題，如何在IE6這樣的古董瀏覽器上繪製可交互的統計圖形？
通過我長期摸索實踐，結論是，不要試圖這樣作。即使是VML兼容方案性能也不好。在IE6上最靠譜的作法是用php或者java直接在後臺繪製一個jpg圖片，而後發到IE6上顯示。這個方法也是5，6年前最通用的作法，如今已通過時了。最好的策略是，不要對IE6兼容，實在不行的話就顯示一個不能動的圖片吧！珍惜時間，珍惜生命，遠離IE6！

3. webGL

前面說的繪圖技術，不管canvas仍是SVG都不能繪製3D圖形。我曾經見過不少在網頁上顯示3d圖形的方案，但都須要你的電腦上安裝相應的插件（例如flash， silverlight）或者事先安裝虛擬機(例如java）。以前曾經有過不少web 3D渲染技術，但不是要下插件，就是編程複雜，因而漸漸被時代淘汰，例如VRML，約翰•卡馬克已經宣佈了它的死亡。難道就沒有一個開源的通用標準顯示3D圖形嗎？

固然是有的。這貨叫webGL, 是一項使用JavaScript實現3D繪圖的技術，瀏覽器無需插件支持，Web開發者直接使用js調用相關API就能借助系統顯卡（GPU）進行編寫代碼從而呈現3D場景和對象。

WebGL標準由科納斯組織（Khronos Group）開發和維護，Google、Mozilla、Opera和Apple 等瀏覽器廠商都是其中的成員，爲這一標準作出了顯著貢獻。從名稱上咱們就能夠知道WebGL跟openGL確定是小弟與大哥的關係。事實上webGL是基於OpenGL ES 2.0開發的，OpenGL ES 是 OpenGL 三維圖形 API 的子集，針對手機、平板電腦和遊戲主機等嵌入式設備而設計。瀏覽器內核經過對OpenGL API的封裝，實現了經過JavaScript調用3D的能力。WebGL 內容做爲 HTML5 中的Canvas標籤的特殊上下文實如今瀏覽器中（這下canvas終於能夠畫3D圖了，雖然用的是不一樣技術）。

: webGL誕生時期放出的經典例子：深海水族館

webGL技術從初創到如今也不過2年多的時間（2011年發佈標準），可是發展很快。一開始傲嬌的微軟認爲該技術有極大的安全漏洞而拒絕使用（由於至關於讓web腳本直接控制了顯卡這麼重要的硬件，同時有沒有相似windows update這樣的更新程序來彌補漏洞），可是如今也放下身段在IE12裏面支持了此物。緣由無他，就是HTML5帶來的潮流：在功能上，web應用將會愈來愈像內建應用。它能夠調用顯卡，調用麥克風，調用攝像頭，調用一切能用的硬件去提高服務質量。這一切都基於瀏覽器的支持。

webGL的各大瀏覽器支持狀況（截至2013年11月）：

桌面瀏覽器

Mozilla Firefox 4+
Google Chrome 8+
Internet Explorer 11+
Safari 5.1+
Opera 12+

移動瀏覽器

Firefox 25+
Google Chrome 31+
Opera Mobile 12+
Android Browser 暫不支持
iOS Safari暫不支持
IE Mobile 暫不支持

從上面的支持狀況列表咱們能夠發現，支持狀況仍是比較可喜的，至少現代瀏覽器都支持，移動端和IE略有落後。不過畢竟這個技術仍是新鮮事物，在國內能找到的資料還不多，國內前端技術圈討論也很少，是真正的技術藍海。本人並無實際開發過webGL程序，目前還停留在觀察階段。如有工做需求，會將其列入研究重點。

讓咱們查看一些webGL的案例，固然是mozilla demostudio的最好。

最後，讓咱們提一提webGL的JS框架，它們能夠減小工做量並提供一些有趣的例子。

philoGL，專一於3D可視化的一個webGL框架。
threee.js, 谷歌團隊Data Arts出品的基於webGL的3D場景庫，它的演示十分有趣。

4.flash & actionscript

flash這個東西我是又愛又恨。愛是說我從初衷起就接觸過這個東西，很喜歡它作的flash動畫，並在大一大二也學過一陣；恨的是flash與web頁面實際上是徹底分離的玩意，不只要用本身的一套actionscript編寫（而且as不如JS好使，我我的感受），加載也要下載插件。在HMTL5+JS+CSS3的時代，愈加以爲flash的大多數功能已被替代。

猶記當年喬教主2010年就怒噴過flash，認爲它是移動端的阻礙，不適合觸摸設備，技術封閉，已通過時。而且宣佈蘋果公司的產品在往後不支持flash。此舉當即獲得了微軟、谷歌的響應。尤爲是在通過HTML5的一番宣傳之後，2010年先後你們都看淡flash的前景而看好HTML5。可是做爲flash的老東家Adobe公司的發言人卻一再表示：flash已經應用的很是廣泛，想把咱們一腳踹開是不可能的。如今到底是鹿死誰手呢？通過3年的折騰，咱們看到flash仍是好端端地活着，固然份額確實減小了些。蘋果仍是立場堅決地拒絕flash支持html5，可是html5發展並不順利；谷歌一面支持html5,一面也支持flash（你看如今的android手機不支持個flash都很差意思出門），同時還在折騰本身的視頻標準害的HMTL5的視頻標準一再難產；微軟則在旁觀，同時養活着flash,html5和自家的silverlight。能夠說HMTL5聯盟曾經試圖聯手杯葛flash, 結果因爲各家心懷鬼胎而失利。HTML5的最終效果也沒有徹底達到flash的水準，雖然在不少領域（例如樣式、繪圖等等）已經基本上差很少了，可是至少在動畫編輯這一塊，HTML5至今也沒有一個像adobe flash cs5 這麼強大易用的編輯工具。

當初flash之因此能實現不少web頁面不能實現的功能，是由於web標準從一開始就被設計地注重安全性，不能操做本地資源（典型的例子，到如今JS都不能操做內存）；而flash是個本地程序，能夠自由地調動本地資源，因此能夠實現不少須要耗費大量本地資源的效果，例如2D動畫、3D動畫。可是隨着計算機功能愈加完善，不少2000年初很耗費資源的功能，如今看起來不值一提。HTML5則是從瀏覽器標準一級，要求瀏覽器能調用這些本地資源。這就是以前所說的HTML5帶來的潮流：在功能上，web應用將會愈來愈像內建應用。因此將來flash終將被淘汰。可是adobe不會所以餓死，由於Adobe也不是用flash來賺錢，而是用flash編輯器來賺錢，現在也在flash編輯器中加入了html5元素，保證就算flash完蛋也能繼續掙錢。

那麼談談用flash構建可視化應用吧。因爲flash在繪圖、動畫效果上長期保持的優點，因此過去有不少人用flash建立可交互的額數據可視化圖表。而且如同那些js canvas類庫同樣，flash也有這樣的類庫。

5.java & processing

processing是久負盛名的爲了實現交互式可視化創做的Java語言擴展，我在《Benjamin Fry的《可視化數據》和processing語言》一文中有過介紹。不過我並無直接用過processing，而只用過processingJS, 一個使用processing語法的使用html5 canvas繪圖的JS類庫。在前文中已經有過推介。

6. R

R語言以前我已經屢次提到了。這段時間我也開始試用，不過說句實話這個東西我以爲不能稱爲語言，我感受它不像C++，更像mathlab這樣的應用程序。它的圖標很簡陋，GUI更簡陋，簡直除了控制檯再沒有別的了。我想這是製做它的統計學家的心聲：科學不是花裏胡哨的玩意，它其實很枯燥，但很注重內在美！

: 我用R軟件繪製了一個最簡單的圖。剛安裝完R所作的測試。

SPSS和SAS是數據分析行業的標準工具，也能生成各類統計圖形。不過這兩個軟件受權費那是至關昂貴。SAS我在高校實驗室蹭過，可是目前手頭上能用的只有R和盜版mathlab。R語言的操做跟mathlab很像，基本上都是本身寫一段程序讓它去運行。這裏要談談R語言跟mathlab的區別。

mathlab是商業軟件，R是開源軟件；mathlab咱們幾乎都在用盜版，R咱們想用就用；因爲是商業軟件，別的程序很難調用mathlab程序；而R就是但願別人調用它，而且它本身也能夠引用其餘高於語言C, java ,python, ruby等寫的代碼。
mathlab是數學家發明的，而R是數學家中的統計學家發明的；
有人說mathlab在某些算法上比R快，不過我還沒感受到；
mathlab的3D圖像要比R豐富；R畫畫2D圖還行，畫3D圖又醜又慢。固然，R一直在改進。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。