

BBD技术控 | WEB-可视化在大数据领域的应用技巧

BBD Data

2019-12-31

导读：随着5G时代的到来，3D数据可视化也会成为市场刚需。

文 | 董涛

董涛，BBD前端部门经理，腾讯课堂&慕课网特邀讲师，多起大型技术分享会嘉宾，在数据可视化和WEB前端交互领域有着丰富的经验和技术积累，代表作品H5DS、MTUI、BBD-CHARTS。

前言

随着时代的进步，大数据在各个行业和领域中的应用可谓光彩绽放，未来应该是移动互联网+大数据并存的时代，未来企业之间的竞争也是数据的竞争。而大数据的展示也尤为重要，2D图形已经远远不能满足我们的需求，3D技术的成熟为大数据可视化提供了无限的可能，在可预见的未来，数据可视化不仅仅是一门技术，还是一门学科。

01.

数据可视化分类

基于视觉分类

1、2D图形：一般用于平面2维数据展示，比如常见的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘等等。

2、3D图形：用于3D的3维数据展示，如3D GIS应用展示、3D图表展示等，当然也可能是因为需要一种更直观的视觉体验去做3D数据可视化方面的展示。

基于图型类型分类

1、图表：折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图...

2、GIS：用于地理数据可视化的地图、热力图、飞线图...

3、关系：力导向图，树形图，拓扑图...

02.

WEB可视化技术分析

无论使用何种框架去做数据可视化，基于web的可视化底层技术只有4类：

1、VML，可兼容低版本IE浏览器，如果项目需要兼容一些低版本的浏览器，一般会采用VML技术进行图表的绘制。

2、SVG，可兼容到IE9浏览器，交互性强，但是不利于展示大量数据，一般会用于数据少，图形大的数据展示。

3、CANVAS ，可兼容到IE9浏览器，性能好，可用于数据量大，但是图形比较小的数据展示，目前比较主流的数据展示都采用canvas技术。

4、WEBGL，兼容到IE11，渲染性能卓越，未来主流的数据可视化展示技术，目前常用于3D数据可视化的展示。

03.

数据展示技巧

CRAP原则

1、对比(Contrast)：避免页面上的元素过于相似。如果元素(字体、颜色、大小、线宽、形状、空间等) 不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，读者查看页面时首先关注到的就是对比。

2、重复(Repetition)：让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。

3、对齐(Alignment)：任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

4、亲密性(Proximity)：彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

CSSP设计法则

1、颜色(Color)：类型相同，但是存在差异的元素可以利用颜色做区分，比如采用红色和蓝色区分性别。

2、形状(Shape)：不同类型的数据可以使用不同的形状所代替，便于区别。

3、大小(Size)：数据的大小可以直接反馈到图形的大小比例上面，有助于用户快速区分。

4、位置(Position)：对数据进行归类，划分区域位置。

04.

3D数据可视化

3D可视化案例展示

3D可视化除了酷炫之外，还能多维度地展示数据，交互性与直观性都远远优于2D可视化，以下是一些3D可视化在实战项目中的使用案例：

图源站酷，zcool.com.cn

上面几个案例中可以看到，3D可视化被广泛应用到医疗领域、智慧城市、交通领域等领域，3D数据展示技术的积累和落地已是每个大数据公司的必修课。

3D可视化技术分析

基于web的3D可视化技术以WEBGL为主，常用的框架有threejs，cesiumjs，只有这些框架是远远不够的，UI设计师酷炫的界面设计，3D酷炫的模式需要使用3D MAX或者MAYA、C4D进行3D建模，三维交互能力需要前端工程师进行编程和精细的算法处理。任何一个优秀的3D数据可视化项目都是大家协同工作完成。