一、背景
各行各业随着数据，算法等逐渐增长，再加上5G 时代，势必会引发 VR，AR 等行业的兴起，网速加快，流量加快，将会产生大量的数据，前端可视化将会扮演越来越重要的角色。
可视化相对来说是一个相对独立的理论的理论学科，同时也可以说是一个跨学科的体系，不止是前端，其实我们所使用的桌面系统，GUI 都属于可视化的一部分，包括算法，数据分析其实都是依靠图形化界面，也就是可视化的。这样来看可视化是非常庞大的。
前端可视化只是可视化方向的一个技术分支，环境加上浏览器的兼容，以及有 canvas 和对 webgl 的友好支持，基本涵盖了 2D 和 3D 图形化成像。
二、目前现状
前端可视化是一个比较大的方向，主要基于两种方式去实现，一种是html5新出的canvas，另一种是svg。(不考虑纯div+css实现的可视化)
canvas：通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，会重新进行绘制。
Svg: 一种使用XML描述的2D图形的语言；SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。svg标签可以添加dom事件, 而canvas与页面元素交互效果并不好，没有dom元素，需要测量canvas的坐标的一定范围确定位置，所以需要复杂的封装才可以交互。但是目前来说canvas更火一点。
svg和canvas的基本框架：canvas基本上都会采用echarts，大多数前端工作者或多或少都会接触到echarts，包含了一些基本的可视化内容，图表、柱状图、折线图、热力图、地图等，能满足一般可视化的需求；而svg基本的框架则是d3.js，被称为可视化方向的jQuery，相比echarts，它的可配置性更高，更灵活。
canvas库
- EaselJS 是一个封装了 HTML5 画布(Canvas) 元素的 JavaScript 库。
- jCanvaScript面向HTML5画布（canvas）的Javascript类库，它提供了许多方法用于简化处理HTML5画布（canvas）元素的内容，只要支持canvas和javascript的浏览器都可以使用它，包括iPhone、iPad和android等平台。
- Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下，可以实现程序图像、动画和互动的应用。Processing.js是轻量，易于了解掌握的理想工具，可用于可视化的数据，创建用户界面和开发基于Web的游戏。
- FABRIC.JS是一款简单而强大的JavaScript Canvas 库，提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。
- oCanvas是一个JavaScript框架，用于简化HTML5 Canvas标签的使用，可以利用对象来代替像素。 oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象，并且创建这些对象的动画。
- jCanvas 就是一个 jQuery 的绘图插件，它封装了一些绘制图形的方法，只需编写几行代码即可生成图形。
- RGraph是一个使用HTML5 Canvas标签实现的图表制作Library。利用该Library生成的Chart具有可交互性，当鼠标点击或移过时会显示相应的信息，可以动态加载Chart或对特殊点进行缩放。
- Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合：SVG，Canvas 和 WebGL，旨在使平面形状和动画的创建更方便，更简洁。
Svg库：
- Vivus 是一个能动画js类库，它能够给SVG图像显示出被画出来的过程。
- Bonsai 是一个功能丰富的 JS 类库，你能够用它来画和 animate 动态内容在网站上。
- RaphaelJS 也通常是用来在网页上画SVG图和动画的。
- SnapSVG 是另一个知名 JS 类库，它是由 Dmitry Baranovskiy 开发的（Raphael 同样也是）。
- SVG.js 是一个轻量级的操作和动画 SVG 类库。你能够操作变化方向、位置和颜色。
三、3d可视化
- 在前端实现3d可视化依赖html5的Canvas标签和WebGL 3D绘图协议，但多是利用three.js等上文中提到的WebGL之上封装的库来实现相关的需求。
- 能力需求：
- 绘图的基础技术 canvas、svg、webgl
- 绘图引擎的开发技能： 2D 绘图、3D绘图
- 可视化知识：数据处理、动画、交互、布局算法、地理映射、可视化映射、GIS 相关的理论和技术
- 美感或设计能力
