可视化

什么是可视化

可视化PPT

可视化定义

• 百度百科词条

  可视化（Visualization）是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。

• 个人理解

  可视化的概念是相对数据来说的，也叫数据可视化。通过对数据的收集和分析，过滤出具有客观特征的数据，以一系列的理论和技术，映射成人类视觉感官上容易理解的各种图形和图像，传达出数据背后的意义，就是数据可视化。

数据可视化的目的

数据可视化是为了清晰有效地传达与沟通信息。因为人类的大脑在对视觉信息的处理上，图形或者图像的形式比纯文字或数字要更容易理解。所以，在进行可视化设计的时候，要在视觉和易理解上寻找一个平衡点，切忌单纯为了视觉效果而设计。

---

为什么要学习可视化

三个问题

1. 使用在线脑图，关系图或流程图的时候，有没有好奇是如何实现的？

2. 业务中碰到简单的图可视化开发需求时，却手足无措，不知从何下手？

3. 稍微了解过一点GIS开发，但是看见别人实现的个性化的GIS效果，自己却不清楚脑袋中了解过的几款GIS库能否完成类似的效果？

学习可视化的目的

了解应用场景，助力业务开展

可视化作为前端的旁系技术，拥有广泛的应用场景。比如，电商大屏，指挥调度大屏，视频监控，全球疫情态势，Web GIS。

拓展技术认知，打破技术边界

学习可视化背后的图形学和视觉呈现原理，对于理解CSS的原理和实现其他技术领域的需求有很大的帮助。比如AR试衣，VR看房，3D游戏，数字孪生。

此次培训的目标

• 基本了解可视化

• 遇到可视化需求，可以做合理的技术选型

• 能实现简单的可视化需求

---

前端与可视化

⚠️可视化不一定局限于使用Web技术实现，但是相对来说，全球的Web应用可能最多，后面所述皆属于Web可视化的范畴，但是可视化的理论，方法和技术都是相通的。

传统的Web前端，是用HTML，CSS，JS为用户做内容呈现和动作交互的。而可视化偏结构化数据和视觉细节，注重于将结构化的数据，映射成各式各样的图形。

共同点：

• 都是做视觉呈现和动作交互。所以，有些理论和方法是相通的。
• 在各自的领域，都有对应的一系列技术和工具，但是都离不开JS。

不同点：

• Web前端偏向文本内容和媒体信息；可视化偏向于结构化数据和图形渲染
• 各自领域的技术栈不同；前者主要以HTML，CSS，JS为基础及其上层的技术组成，后者是以SVG，Canvas，WebGL为基础及其上层的技术组成。

---

可视化技术栈

传统技术

• HTML
• CSS
• JS

底层技术

• SVG 矢量图形绘制
• Canvas 2D图形绘制
• WebGL 2D/3D图形绘制

常用渲染库

• SVG.js
• Fabric.js
• ThreeJS
• BabylonJS

数据驱动库

• D3.js

常用图表库

• ECharts
• AntV
• Highcharts
• Chart.js

常用地理库

• Mapbox
• Leaflet
• Deck.gl
• CesiumJS

---

浏览器环境实现可视化的原始方式

四种方式：

• HTML+CSS+JS可以实现简单的可视化图形。

• SVG是矢量图形绘制的标准，可用来绘制矢量图形。

• Canvas2D是浏览器环境提供的2D绘制上下文。

• WebGL是浏览器环境提供的OpenGL ES规范的实现。

HTML + CSS + JS

• 使用场景

  可视化需求简单，图形简单

• 实现思路

  HTML + Flex + Grid + CSS + JS

• 优点

  不必引入第三方库

• 缺点

  • 画不规则图形曲折，麻烦
  • 实现过程曲折，麻烦
  • 元素数量过多时，有性能问题

SVG

• 使用场景

  SVG元素个数少的图形

• 实现思路

  通过SVG提供的各种图形标签，可绘制规则或不规则的矢量图形

• 优点

  • 画规则或不规则的图形有现成的标签，比较直观
  • 矢量，不失真
  • 图形需要的SVG个数少的情况下，性能较好
  • 交互事件的处理非常容易

• 缺点

  元素数量过多时，有性能问题

Canvas

Canvas 的性能受画布尺寸影响更大，而 SVG 的性能受图形元素个数影响更大。

• 使用场景

  画布较小，图形密集型下使用

• 实现思路

  Canvas API 获取2D上下文，使用其提供的相关API绘制

  ⚠️Canvas可以结合SVG使用

• 优点

  Canvas能直接操作绘制上下文，不需要同上述两种方式一样经过解析，计算布局，构建渲染树等一系列操作，所以单从绘制来说，速度要比上述两种方式快的多。

• 缺点

  • Canvas是指令式绘图系统，不同于上述两种声明式绘图系统。所以，需要开发者有较高的抽象思维，对所有需要绘制的图形进行良好的指令组织，以使代码逻辑清晰，方便后续维护。
  • 不易控制内部的图形元素，不好做交互事件的处理。

WebGL

OpenGL ES 规范在浏览器环境的实现，其更偏向底层，比上述的方式都要复杂。

• 使用场景

  • 遇到严重的性能瓶颈，需要使用GPU并行渲染的能力
  • 需要绘制3D图形

• 实现思路

  Canvas API 获取WebGL上下文，使用其提供的相关API绘制

• 优点

  更底层的绘制系统，拥有高性能的绘制能力，能方便绘制3D图形。

• 缺点

  复杂，使用起来门槛相对较高

---

Example

本仓库使用前三种技术实现了简单的图可视化，包括柱状图，线性图，全球疫情态势图。

---

如何深入学习可视化

其实可视化涵盖的内容，不止上面提到的基本的技术。它还包括，数据部分（数据收集，数据分析，数据治理，数据管理，数据挖掘），计算机图形学，图像处理，计算机视觉，视觉设计，计算机辅助设计。但是作为一名技术人员，最基本的是要掌握以下几项：

• 熟悉以上四种基本的可视化实现方式
• 可视化性能优化
• 学习计算机图形学
• 学习开源图表库和D3.js的设计思想

---

可视化的未来

数字孪生，IoT + AI