技术15期：4种常用的可视化技术【web前端】

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

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 -

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

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

技术15期：4种常用的可视化技术【web前端】相关推荐

groupby python_【实战案例】用Python做出5 种非传统的可视化技术，超炫酷的动态图...
数据可以帮助我们描述这个世界.阐释自己的想法和展示自己的成果,但如果只有单调乏味的文本和数字,我们却往往能难抓住观众的眼球.而很多时候,一张漂亮的可视化图表就足以胜过千言万语.本文将介绍 5 种基于 ...
计算机网络王道考研2021 第三章：数据链路层 -- 局域网基本概念和体系结构、以太网（一种常用的局域网技术）、无线局域网、跨省短信通知原因、MAC
文章目录 1. 局域网基本概念和体系结构 1.1 局域网 1.2 局域网拓扑结构 1.3 局域网传输介质 1.4 局域网介质访问控制方法 1.5 局域网的分类 1.6 IEEE802标准 1.7 MA ...
介绍几个常用的免费的Web前端开发工具
几个常用的免费的Web前端开发工具一.Grid Guide 特点:快速生成栅格二.Foundation 特点:一款类似Bootstrap的框架,有为栅格.排版.按钮和其它动态元素的预定义CSS类. ...
聚类技术---复杂网络社团检测_数据挖掘的技术有很多种，常用的数据挖掘技术就这13种...
数据挖掘就是从大量的.不完全的.有噪声的.模糊的.随机的数据中,提取隐含在其中的.人们事先不知道的但又是潜在有用的信息和知识的过程.数据挖掘的任务是从数据集中发现模式,可以发现的模式有很多种,按功能可 ...
k均值例子数据挖掘_数据挖掘的技术有很多种，常用的数据挖掘技术就这13种...
数据挖掘就是从大量的.不完全的.有噪声的.模糊的.随机的数据中,提取隐含在其中的.人们事先不知道的但又是潜在有用的信息和知识的过程.数据挖掘的任务是从数据集中发现模式,可以发现的模式有很多种,按功能可 ...
7 种常用的数据挖掘技术分享
有人说:一个人从1岁活到80岁很平凡,但如果从80岁倒着活,那么一半以上的人都可能不凡. 生活没有捷径,我们踩过的坑都成为了生活的经验,这些经验越早知道,你要走的弯路就会越少. 摘要: 随着信息领域的 ...
一文帮你捋清MIMO和分集、复用的关系，顺便介绍几种常用的分集技术
MIMO大规模多输入输出(multiple-in multiple-out),它利用多径效应来改善通信质量,收发双方使用多副同时工作的天线进行通信,采用复杂的信号处理技术来增强可靠性.传输范围和吞吐量 ...
java 反射技术实例,什么是反射技术？Java中最常用的反射技术实例
什么是反射技术? 动态获取指定类以及类中的内容(成员),并运行其内容.应用程序已经运行,无法在其中进行new对象的建立,就无法使用对象.这时可以根据配置文件的类全名去找对应的字节码文件,并加载进内存, ...
几款常用的高质量Web前端框架！
近年来,Web前端技术的发展速度快得让人窒息,特别是最近几年一代又一代的变革一次又一次的创造.各大巨头又纷纷把技术转向HTML5和CSS3,各种企业级框架如雨后春笋般涌现. 那么今天就给大家介绍几个在 ...

技术15期：4种常用的可视化技术【web前端】

技术15期：4种常用的可视化技术【web前端】相关推荐

最新文章

热门文章