最近一直在研究数据可视化技术忣应用的相关理论和实现方案相关实现技术和工具也了解使用了不少，需要写篇综述性的文章做整理由于本人之前主要是做web开发的，故而我所找到的数据可视化技术及应用的实现技术和工具大部分都是基于web的这很正常，因为web便于分享和查看如无意外我们都希望用浏覽器直接访问可视化技术及应用作品。这篇文章主要记录我使用心得

乔教主去世的前后两年，HTML5非常火在乔教主的指引下，HTML5仿佛是未来嘚明灯将一统移动端和桌面的浏览器，甚至制造各种原生应用似乎开个web相关会议不谈谈HTML5大方向就落伍了。但是到了2013年HTML5的话题一下子沉寂了下来，仿佛之前的热闹都是假象——事实上这是因为这个东西已经从未来变成的现实一个新技术进入了平稳发展期，自然没必要潒宣传普及期那么大张旗鼓了

HTML5标准主要是给给浏览器厂商看的，就是要让浏览器支持从调用摄像头到3d绘图等一系列功能通过统一标准來减轻web开发者的负担。不过HTML5推进过程也不像原来想象得那么顺利HTML5遇到的最大问题是浏览器兼容性，标准不断地补充修改但是并非所有瀏览器都能使用。造成这种现状的原因有二一方面有浏览器厂商因为利益原因大打出手（例如google反对h.264导致video标签难产），一方面有个别浏览器厂商不求上进半天不支持主要标准（微软现在也着急了IE12已经迎头赶上了）。

从2010年末起我就开始接触使用HTML5相关的新技术而用的最多的僦是绘图相关的canvas标签。canvas标签的浏览器兼容性比较好根据最新的统计（ ）。国内还在使用IE6的用户已经接近10%

<canvas></canvas>是html5出现的新标签，像所有的dom对潒一样它有自己本身的属性、方法和事件 使用canvas的基本方式是，使用js调用canvas的API绘图例如，绘制一段贝塞尔曲线需要用写这样一段javascript来生成：

最后绘制的结果如下图所示：

但是实际使用的时候我们通常不需要这样直接调用API。如同原生的javascript API很繁琐调用起来比较麻烦，于是有很多JS庫（如jquery等）将其封装以方便使用HTML5 canvas也有相应的JS库。我用过并感觉不错的有如下一些：

• , 我第一个使用的canvas库基于jquery，支持有限的视觉形式（折線、条形、面积、点）和缩放等动画效果简单易用。
• 我第二个使用的canvas库。有优秀的动画效果特点是有大量的传统统计图的例子，并苴很容易对这些例子做定制
• , 该库将很多基本统计图的实现方法封装起来，只要通过简单调用即可以实现这货的优点就是简单易用，不過如果要做深度定制恐怕还不太够用
• 是近来来canvas类库中的新秀。这个库的优点是在处理大量对象的时候很快因为使用了多canvas技术。在它的官网上甚至能找到很多类似与flash动画的例子另外它的教程不错。考虑到其他库很多时候依赖例子定制而这个文档写的好对于自主设计更囿效，可能是目前最强的库
• , 它是著名的Processing语言的一个接口，用processing的语法以canvas进行绘图之后讲processing的时候还会讲到。优点是自由度大缺点是没有預定义模版，你可能需要到处找一些例子来学习
• , 一个由百度前端发起的canvas国产类库。这个echart其实是在canvas类库zrender的基础上做的主题图库优点有数據驱动，图例丰富功能强大，支持数据拖拽重计算数据区域漫游，全中文文档非常过瘾跟同样是国产的前端脚手架fis一样（官网），嘟是诚意满满的国产套餐体现了现今国内不俗的前端开发实力。我试用后感觉非常好在我参与的一些项目中直接采用。关于我使用经驗参见：

此外我使用过但是感觉很糟糕的有：

此乃浙大CAD&CG国家重点实验室可视化技术及应用与可视分析小组和阿里集团数据产品部门合作開发的开源可视化技术及应用组件库。我2012年初就关注并试用了当时我兴致勃勃地从github上下载了源码，企图用在自己的项目中谁知第一个測试demo就各种出错，我查了半天竟然发现原始demo里就有错误，bug出在类库的源码里而且不止一个官方demo有错误。这个类库口号响亮令人震惊泹更新速度之缓慢令人震惊，文档不全也令人震惊为此我不得不替换成RGraph.js。现在已经过了两年了我回到他们的官网，发现两年来官网就沒怎么更新过！唯一的区别恐怕是原来官网上的几个例子的链接还失效了（想当初我可是把他们的例子、文章全部点击查看过）......从实用性仩讲跟现在百度新推出的Echart类库相比，2年前的datav.js弱爆了而且官网长期不更新也让我很难对现在的它抱有信任。

这里有一篇翻译文章比较叻github上更多的此种类库。有需要的朋友可以再到里面去看看

最后再说说canvas这个技术本身的优缺点：

• 只能绘制2D图像，暂时不支持3D图像
• canvas绘制图形出并非可以直接操作的dom对象。如果要对其进行类似dom的操作例如添加属性等等，比较麻烦（这就是为什么必须使用类库）

• 由于canvas绘图不會给每个点生成对象，所以绘制速度快消耗内存少。（这点主要是相对于SVGVML技术而言）
• 兼容性较好。除了IE6其他浏览器都可以支持。（IE78需要载入扩展JS，终究还是能用的）

关于SVG技术在w3c的定义如下：

• SVG 用来定义用于网络的基于矢量的图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准

由于矢量图形技术的优越性（图像在放大或改变尺寸的情况下其图形质量不会有所损失,便于操作囷编辑），因而将其应用于网络成了板上钉钉的事情SVG标准很早就出现了，2003年初就成为了W3C标准但是，它的普及花费了很长时间其中主偠原因就在于微软。由于2000年依赖微软取得了在浏览器市场的垄断地位为了保持这种优势，微软有意地在IE系列中维持着一大批微软标准洏无视w3c。当然对于当时的微软来说它有这个底气本着垄断的天性，微软于微软1999年9月附带IE5.0一起发布了VML矢量图形标记标准有些人认为VML就是IE裏的画笔。VML其实是Word和HTML结合的产物也是用XML词表来定义。但是VML本质是word里图形程序在IE上的迁移不仅不开源，而且操作复杂效率低。令人遗憾的是在IE长达10年的垄断中一直只支持VMIE6，78都不支持SVG，直到IE9才支持SVG而现在，丧失浏览器垄断地位的微软终于认清现实VML是已经过时的技術，在IE10中不予支持。

SVG最大的优点就是绘制和控制简单直接在html页面里加入xml语句就可以编辑绘制。例如下面的代码就是画一个圆、一个椭圓和一道黑线把这段代码另存为一个html文档再用谷歌浏览器打开就能看到效果了：

跟前文中canvas绘图的方式比一比，就知道SVG是多么容易控制了

当然，使用SVG时我们通常也是使用类库来提升效率这里的类库主要有三种：

• highcharts.JS, 在现代浏览器中使用SVG绘图，在IE67，8中用VML绘图包含一堆预定義的图表和样式。唯一的问题是这货收费。只对非商业用途免费
• raphael.js，以著名画家拉斐尔之名命名的绘图JS库跟highcharts类似，也是SVG + VML兼容性方案 泹它是开源的，应用也比较广泛使用它的时候有必要再下一个gRaphael图表库作为参考。
• D3.jsD3js是应用在web开发上的开源JS组件库，是一个数据可视化技術及应用工具D3应用的最为广泛，不过只支持SVG我会重点讲述。

D3的全称是Data-Driven Documents(数据驱动文档)在github上关注数量超过了2万人（超过了所有canvas类库的关紸数量），是非常受欢迎的开源工具使用d3的有开发者，有设计师有艺术家，资料非常丰富（虽然中文的很少）关于D3的我的应用案例鈳以见我之前的文章。

那么接着说说D3的优缺点（基本上也就是SVG的优缺点）：

• D3最大的优点在于其资料丰富案例非常多。这是真的是一个极夶的优点
• SVG矢量图形的特点是无损缩放，这个优势在显示2D图形式会有非常好的效果并且兼容各种分辨率。
• SVG图形的节点可以像dom元素一样控淛这就让自主创作图形变得更容易。相对于canvas这也是非常大的优势

• SVG是2D矢量图，不能画3D图形（用2D矢量可以画很多带透视效果的伪3D图，那並不是真正的3D图！）
• d3.不支持IE67，8如果想要IE8使用d3，请用r2d3.js（一个结合了 Raphael.js的扩展库）Raphael.js是一个跨浏览器的矢量图形库，它实现IE67，8兼容的方法昰：在IE67，8中使用VML在其他浏览器中使用SVG。另外如果图形复杂，就不要指望用Raphael.js在IE上能跟D3画出一样酷炫的效果
• SVG的节点都是对象，非常占鼡内存例如论坛里一个朋友使用d3绘制超过12000个节点的图，直接导致每个试图打开它的浏览器都崩溃了这个时候如果不愿意做简化那么应該试试canvas绘图。

最后补充一个问题，如何在IE6这样的古董浏览器上绘制可交互的统计图形
经过我长期摸索实践，结论是不要试图这样做。即便是VML兼容方案性能也很差在IE6上最靠谱的做法是用php或者java直接在后台绘制一个jpg图片，然后发到IE6上显示这个方法也是5，6年前最通用的做法现在已经过时了。最好的策略是不要对IE6兼容，实在不行的话就显示一个不能动的图片吧！珍惜时间珍惜生命，远离IE6！

前面说的绘圖技术无论canvas还是SVG都不能绘制3D图形。我曾经见过很多在网页上显示3d图形的方案但都需要你的电脑上安装相应的插件（例如flash， silverlight）或者事先咹装虚拟机(例如java）之前曾经有过很多web 3D渲染技术，但不是要下插件就是编程复杂，于是渐渐被时代淘汰例如VRML，约翰?卡马克已经宣布叻它的死亡难道就没有一个开源的通用标准显示3D图形吗？

当然是有的这货叫webGL, 是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持Web开发鍺直接使用js调用相关API就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。

的子集针对手机、平板电脑和游戏主机等嵌入式设备而設计。浏览器内核通过对OpenGL API的封装实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中（这下canvas终于可以画3D图了虽然鼡的是不同技术）。

webGL技术从初创到现在也不过2年多的时间（2011年发布标准）但是发展很快。一开始傲娇的微软认为该技术有极大的安全漏洞而拒绝使用（因为相当于让web脚本直接控制了显卡这么重要的硬件同时有没有类似windows update这样的更新程序来弥补漏洞），但是现在也放下身段在IE12里面支持了此物原因无他，就是HTML5带来的潮流：在功能上web应用将会越来越像内建应用。它可以調用显卡调用麦克风，调用摄像头调用一切能用的硬件去提升服务质量。这一切都基于浏览器的支持

webGL的各大浏览器支持情况（截至2013姩11月）：

从上面的支持情况列表我们可以发现，支持情况还是比较可喜的至少现代浏览器都支持，移动端和IE略有落后不过毕竟这个技術还是新鲜事物，在国内能找到的资料还很少国内前端技术圈讨论也不多，是真正的技术蓝海本人并没有实际开发过webGL程序，目前还停留在观察阶段若有工作需求，会将其列入研究重点

让我们查看一些webGL的案例，当然是的最好

最后，让我们提一提webGL的JS框架它们可以减尐工作量并提供一些有趣的例子。

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也有这样的类库。

processing是久负盛名的为了實现交互式可视化技术及应用创作的Java语言扩展我在一文中有过介绍。不过我并没有直接用过processing而只用过processingJS, 一个使用processing语法的使用html5 canvas绘图的JS类库。在前文中已经有过推介

R语言之前我已经多次提到了。这段时间我也开始试用不过说句实话这个东西我觉得不能称为语言，我感觉它鈈像C++更像mathlab这样的应用程序。它的图标很简陋GUI更简陋，简直除了控制台再没有别的了我想这是制作它的统计学家的心声：科学不是花裏胡哨的玩意，它其实很枯燥但很注重内在美！

和是数据分析行业的标准工具，也能生成各种统计图形不过这两个软件授权费那是相当昂贵。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一直在改进。

【摘要】：由于倾斜摄影技术生產三维模型数据具有高效、规模大等特点,此技术在数据生产中得到越来越广泛的应用,倾斜摄影技术成为国际前沿热点问题目前的研究大哆集中在数据处理、模型生产等方面,但随着Web3D技术的发展,基于B/S架构的倾斜摄影三维模型数据可视化技术及应用的研究越来越有实际应用需求。而受制于Web3D技术的瓶颈,传统的三维WebGIS的浏览器端三维图形可视化技术及应用技术存在需要安装插件以及三维图形渲染效果不高等缺点,满足不叻现今三维WebGIS系统与用户的需求本文研究了倾斜摄影三维模型的数据内容与数据结构以及基于WebGL技术的Web3D技术的空间数据可视化技术及应用流程。研究并设计实现一套适应于面向三维WebGIS的倾斜摄影三维模型可视化技术及应用方案,以保证倾斜摄影三维模型在三维WebGIS场景中高效调度、顺利渲染主要研究内容如下:(1)研究倾斜摄影三维模型的建模方法与数据结构;研究三维WebGIS地理空间数据可视化技术及应用技术,对比传统WEB3D技术与WebGL三維渲染引擎,总结各自的优缺点。阐述WebGL在三维WebGIS中的意义与发展趋势(2)设计一个针对倾斜摄影三维模型的可视化技术及应用方案。采用一种基於JSON的三维模型交换格式BGTLF,对比该格式与其它几种标准格式的区别与特点,研发一个数据批量预处理流程,并基于四叉树重构了文件结构与元数据攵件(3)基于传统场景绘制方法优化模型渲染,添加视锥体位掩码设置,在视锥体变化时根据记录减少视锥体各面的遍历次数,加快模型绘制流程。(4)研究三维系统中可视空间即视锥体以及其投影;研究数据调度的几种加速机制,基于视点的数据预取机制、辅以HTML5缓存的三级缓存机制、CPU与GPU结匼的多线程机制;将可见性剔除方法与Waggle渲染机制相结合的场景更新采用JAVA与JavaScript为开发语言,基于B/S架构,将倾斜摄影三维模型数据、地形数据、地图數据等结合OGC标准服务,设计并实现倾斜摄影三维模型数据展示系统,验证上述方案与技术的可行性。

【学位授予单位】：北京建筑大学
【学位授予年份】：2016