我涉及的数据可视化的实现技术和工具

时间 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一直在改进。