大数跨境
0
0

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

BBD技术控 | WEB-可视化在大数据领域的应用技巧 BBD Data
2019-12-31
1
导读:随着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数据可视化项目都是大家协同工作完成。
  • 3D可视化技术资源配备
UI设计师:平面图设计,风格设计,通常风格以科技感的风格为主,因此考验的更多是我们设计师的想象力、对于科技产品的表达能力。
建模工程师:使用3D MAX或者MAYA、C4D进行3D建模,当然部分模型可以由WEB工程师直接使用代码生成,比如3D地图模型。
3D可视化工程师:处理交互,绘制动画,绑定数据等工作,在3D可视化工程师的处理下,让数据通过3D模型栩栩如生。
结语
随着5G时代的到来,大数据在城市建设中会起到至关重要的作用,3D数据可视化也会成为市场刚需,对于研发工程师而言,我们已经积累了很多成熟3D数据可视化的解决方案,希望能在历史的河流中留下一粒砂砾。
END / 
点击图片,查看往期精彩
【声明】内容源于网络
0
0
BBD Data
大数观天下,微言解疑难
内容 748
粉丝 0
BBD Data 大数观天下,微言解疑难
总阅读693
粉丝0
内容748