说到可视化这个词，可能有的人会一脸懵逼，感觉很陌生，有的人会觉得索然无味，感觉这又是程序员闲暇之余想出的噱头而已。

 

no，no，no，如果这么想你就错了。

 

可视化的应用已经深入我们的生活中，能以非常炫酷的方式给我们提供优质且量多的数据信息，像今年大伙们看的比较多的疫情信息图，还有淘宝双11的可视化数据大屏，都属于可视化技术的应用。

 

什么？

 

你说你想快速了解这个热门、实用的领域，那就接着往下看吧。

 

首先，你得知道可视化的概念是什么。

 

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

 

 

可视化的类型

 

它主要分为以下三个分支：科学可视化、信息可视化、可视分析学。

 

科学可视化是可视化领域最早、最成熟的一个跨学科研究与应用领域。

 

面向的领域主要是自然科学，如物理、化学、气象气候、航空航天、医学、生物学等各个学科，这些学科通常需要对数据和模型进行解释、操作与处理，旨在寻找其中的模式、特点、关系以及异常情况。

 

图1 科学可视化

 

信息可视化处理的对象是抽象数据集合，起源于统计图形学，又与信息图形、视觉设计等现代技术相关。

其表现形式通常在二维空间，因此关键问题是在有限的展现空间中以直观的方式传达大量的抽象信息。

 

图2 信息可视化

 

可视分析学被定义为一门以可视交互为基础的分析推理科学。

它综合了图形学、数据挖掘和人机交互等技术，以可视交互界面为通道，将人感知和认知能力以可视的方式融入数据处理过程，形成人脑智能和机器智能优势互补和相互提升，建立螺旋式信息交流与知识提炼途径，完成有效的分析推理和决策。

 

图3 可视分析学

 

 

如何实现可视化

 

回到生活和工作中，人们最常用的获取信息咨询的方式之一就是浏览器，下面简略的介绍下在浏览器中的web前端页面，有哪些方式可以实现可视化。

 

1. html + css （传统方式）

 

我们在浏览器中所看到的内容，大概80%以上都是用此方式来实现的。简单的说，html就是页面中一个个整齐的文字，图片，视频等元素，我们用搭积木的方式将各种元素拼凑起来，形成我们主要的信息内容。

 

而css则可以控制这些积木的大小、形状、颜色的样式。两者结合即可构成我们日常中看到的网页。

 

2. svg

 

svg是一种图片格式，它作为矢量图，能在各个分辨率下都能呈现良好的图片效果，并能构建出各式各样的形状，使我们的页面更加美观。

 

3. canvas

 

你可以把它想象成一张白纸，它允许你在白纸上自由的绘画，并将画完后的图形呈现在页面上。

 

它还可以用来实现动画和游戏，毕竟这两者的原理就是在固定时间内，迅速按顺序展示多张图片，利用人类的视觉暂留特性来实现的。

 

4. webGL

 

它是一种3D绘图协议，我们在网页中看到的许多3d特效都离不开它。它利用到了电脑中显卡的性能来进行加速渲染，在性能上比前3者都高出了不少。

 

下表为前端中4种可视化技术的区别:

 

 

看了以上“枯燥无味”的文字，下面再用代码来看看它们的区别吧。

 

我们将用上面以上4种技术来绘制一个下面这样简单的三角形。

 

1. html + css

 

 

 

2. svg

 

 

3. canvas

 

 

 

4. webGL

 

 

 

 

 

四种可视化技术的区别

 

HTML+CSS 的优点是方便，不需要第三方依赖，甚至不需要 JavaScript 代码。如果我们要绘制少量常见的图表，可以直接采用 HTML 和 CSS。

 

它的缺点是CSS 属性不能直观体现数据，绘制起来也相对麻烦，图形复杂会导致 HTML 元素多，而消耗性能。

 

SVG 是对 HTML/CSS 的增强，弥补了 HTML 绘制不规则图形的能力。它通过属性设置图形，可以直观地体现数据，使用起来非常方便。但是 SVG 也有和 HTML/CSS 同样的问题，图形复杂时需要的 SVG 元素太多，也非常消耗性能。

 

Canvas2D 是浏览器提供的简便快捷的指令式图形系统，它通过一些简单的指令就能快速绘制出复杂的图形。由于它直接操作绘图上下文，因此没有 HTML/CSS 和 SVG 绘图因为元素多导致消耗性能的问题，性能要比前两者快得多。

 

但是如果要绘制的图形太多，或者处理大量的像素计算时，Canvas2D 依然会遇到性能瓶颈。

 

WebGL是浏览器提供的功能强大的绘图系统，它使用比较复杂，但是功能强大，能够充分利用GPU 并行计算的能力，来快速、精准地操作图像的像素，在同一时间完成数十万或数百万次计算。

 

另外，它还内置了对 3D 物体的投影、深度检测等处理，这让它更适合绘制 3D 场景。

 

综合来看，四种可视化方法各有各的优势和擅长的场景，使用起来还需要根据具体的场景来进行选择。

 

总结：

 

说了这么多，希望你能对前端可视化有一个大致的了解，但在实际的开发中，要想把可视化玩转得很溜，效果实现的很惊艳，还得有丰富的数学和物理知识才能实现。

 

喜欢特效、动画、游戏和挑战的同学请不要错过这个领域，它能让你的工作和生活更加有趣。

- THE END -

想了解更多的干货内容，记得点“关注”噢~

在知乎，搜索”普适极客“，会有惊喜噢~