大数据的兴起，浏览器性能的提升，数据可视化成为一个趋势。在做过一些互联网公司web前端数据可视化相关的产品后，有必要对数据可视化做个学习总结。
前端与数据可视化：
- 数据可视化的web前端，其实从广义来讲，跟传统的网页开发没什么区别。都是数据+模板，其中的组件化和模块化其实类似, 只是渲染从html到canvas或者svg。
- 前后端分离也与传统网页开发没什么两样。主要是现在node作为中间层做分离方案的比较多（天猫的wornhole，淘宝的midway），数据处理交给java或者go，node用来做密集IO和模板展现；
- 前端常说的视觉可视化大部分是基于浏览器canvas、svg、webGL等画图模块，借助曲线图表等展示形式把一些相关数据更直接、形象、生动、具体的展示在web页面上。
数据可视化实现配合：
要做一个好的数据产品是需要 产品经理–>设计师–>前端–>后端–>用户整个链路紧密配合密切合作并且协调的。
- 产品需要懂数据可视化的理论基础，哪些数据可以可视化，哪些数据是用户最想要的，一个好的可视化产品绝对不是为了可视化而可视化。
- 设计师包括视觉、交互、配色等，需要理清楚数据怎么展示最合理，曲线，柱状图，饼状图，都有哪些优缺点，不能仅仅为了美观设计了一个好看的图形，而不顾实际数据情况，展示出来就很奇怪。
- 前端其实在里面是最紧密的一环，数据怎么获取，什么格式对前后端最友好，采用什么技术方案，是svg的库，还是canvas的库，是自己撸还是用现成的库。实现成本有多高，性能、扩展性怎么样都是需要考虑的问题。
- 后端需要考虑的就是数据的拉取，需要考虑数据格式以及能获取哪些数据。
数据可视化最重要的不是好看，而是让人一目了然的明白这个图表传达出来的意思。
其实这方面是有相关的信息图形学的相关知识储备的话就不会犯这些错误了。支付宝有个G2 里面有两个相关的图表学基础知识介绍，个人认为这是G2 比echart更进一步，更规范化的点之一。
可视化基础-图表使用建议 https://antv.alipay.com/vis/
可视化基础-图表设计指引规范：https://antv.alipay.com/vis/
经典文献：
《数据可视化》
《The Grammarof Graphics》
《深入浅出统计学》
《计算机图形学几何工具算法详解》
《Visualization Analysis and Design》
《ggplot2：数据分析与图形艺术》
可视化技术选型
首先需要明白一个观点：技术选型没有一劳永逸，永远是根据项目实际情况以及个人团队偏好和技术基础来做的选择。
常见的图标库和三方件及相关技术：
- echarts (主canvas, 配置型，百度) ：
echarts算是国产的图表库里最好的了。EFE团队也是国内技术实力最雄厚的可视化团队.采用canvas作为渲染容器。底层一些实现比如鼠标事件等用的自己开发的zrender框架。
echart2.0对应不同的组件比如坐标轴图例是用不同的canvas来渲染的，echart3之后都合并到一个canvas里面了，猜测应该是底层的框架升级了。
被人诟病的主要有：1） 配置参数很凌乱，有时花时间调试配置还不如自己撸一个；2）配置型比较死板，门槛低灵活性低。必须按照配置来，而且Echart有很多bug没有及时修改，对开发者还是不太友好，相对而言G2和d3图形语法型就有比较好的扩展。
博客： http://efe.baidu.com/，
http://echarts.baidu.com/blog。
- highcharts (svg, 商业使用需授权)
这个框架用的人也不少，主打就是IE6支持程度高。。。然并卵微软都不支持IE6了。淘宝连ie8都不支持了。。。。收费的库，底层用的SVG。私以为他的API使用起来没有Echart友好。
- G2 (语法型，支付宝)
蚂蚁金服的产品，图表容器为canvas，玉伯的团队开发的。怎么说呢。。这个东西看着还不错，不过实际使用的时候大部分人还是会不由自主的去选择前面两个，大阿里系的开源东西就是这么个鬼情况。东西是不错，就怕搞着搞着团队没了。而且他们官网那些示例最开始貌似是那个嫩蓝色（or嫩绿色？）看起来让人觉得整个产品很轻浮，不像echarts 墨黑色，一种商务稳重风。现在貌似也慢慢像稳重风格靠拢了。继续下去感觉还是不错的。
- d3.js
d3也算是资历比较老的一个产品了，采用svg作为图表容器。刚开始出来的时候各种动画比较惊艳图表类型也很丰富，感觉echarts一开始也参照它的图表类型新增了好几个图表示例。
d3的优点是各种示例demo比较完善适合拿来就用，缺点就是demo不适合二次开发，熟悉api的话也可以直接自己画，他的api是对svg的dom的一种整理和兼容，类比于jquery对应html的dom。
还有一个就是jq式DOM修改，与主流的react，vue，ng框架数据驱动思想有一定的冲突。
vis.js
比较轻量，这是笔者使用的第一款可视化类库（比较早，当时选型没有考虑国内，d3又太重）故使用vis，里面的拓扑关系图做得比较好用，交互也还行。three.js (webGL 3D视图)
kcharts (阿里)
移动端图表库，echarts和G2应该都可以。pc端就看个人喜好了。报表类型的项目看设计师画的效果稿吧，echarts可定制性最高，G2没用过，highcharts文档不健全。
监控类型的项目需要频繁更新数据的优选选择canvas的性能应该更好。
数据可视化的一般应用场景：
报表类，监控类，动效pr稿类，地图类，数据可视化系统等。
报表类
报表类使用场景最多，使用的图表也最简单一般echarts里面的示例图表就能满足了，
监控类
监控类稍微复杂点，一般涉及到实时性和稳健性，开发的时候需要考虑后端的接口性能，以及页面图表渲染的性能问题，数据量大了之后对前后端都很有挑战性。做起来也比较有意思，和业务场景结合起来能做一整套的数据可视化的产品系统。
动效PR稿类
这种类型的项目一般都有一个特点：急，炫，累。项目周期很急，动画效果要很炫，干起活来很累。偶尔做做还行，一直搞，就感觉路走的有点偏，而且一般很少能找到现成的库和框架，前期需要大量的技术调研和技术储备。相关的库一般需要canvas的效果库，webGL的库，比如:http://www.pixijs.com/ ，threejs，要求更高的可能需要一些游戏库来帮忙了比如：https://www.egret.com/ ，http://www.createjs.com/等等。
地图类
这类的数据可视化单独拿出来是因为现在越来越多的数据可视化场景里需要用到地图。这也是数据可视化最麻烦的一直，一般我们借助echart的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库http://mapv.baidu.com/ ，展示效果没有echart好。。。。需要定制开发的同学其实可以直接拿百度地图之类的然后在地图上蒙一层覆盖类，然后在这个覆盖类里填充一个canvas做一些自己的扩展参见百度地图的demo；背后的地图。。可以用css隐藏掉。。。。。
数据可视化系统
这个范畴比较大，还是需要看业务场景，某些业务场景就特别适合做一堆相关联的数据可视化系统。做好了成就感还是满满的。
参考文献：