01. 前端可视化介绍
文章目录
- 概述
- 1. 可视化的类型
- 1.1 科学可视化
- 1.1.1 定义与起源
- 1.1.2 主要应用领域
- 1.1.3 技术特点
- 1.1.4 举例
- 1.2 信息可视化
- 1.2.1 主要应用领域
- 1.2.2 举例
- 1.3 可视分析学
- 1.3.1 定义
- 1.3.2 主要应用领域
- 1.3.3 技术发展趋势
- 1.3.4 举例
- 总结
- 推荐前端库
概述
最近通过公司的人员面试，以及在论坛上的了解。发现很多人对前端可视化这个词只了解最浅的东西。或者根本不知道是个什么东西。
但是对于当前这种大前端的时代，前端可视化是必须要会的东西。前端可视化目前已经深入到了我们的生活中，其实我们随处可见。可视化，是利用图形学、几何学、统计学等等多种学科以及图像处理技术，将数据转换成图像在屏幕上显示出来，在进行交互处理的理论、方法和技术。
简单来说，前端可视化就是用炫酷好看的方式给我们提供大量的数据信息。但其实数据可视化技术包含了很多的内容，其中也有非常多的分类。我一直的理解是，前端可视化要做的是让数据说话。可能这句话听起来有些奇怪。但是其实前端可视化的核心，并不是页面有多炫酷。那些仅仅是加分项。它的核心在于数据。我们需要让用户，一眼就能看明白当前这块数据是哪个模块的，代表了什么内容，包含的大概信息，大概有哪些数据。这些不就是让数据自己去说话吗。
对于前端来说，我们不仅仅是按照设计图去绘制大屏。前端可视化主要的工作在于以下几点：
- 获取数据：通过接口获取数据，对大数据量获取进行优化。
- 分析数据：分析数据结构、大概包含了哪些内容，以及当前这组数据想让用户看到什么
- 确定数据展示类型：当我们分析完数据以后，我们就能大概确认这些数据可视化的分类，以及我们需要用哪种数据展现形式。
- 处理数据: 根据确认的数据展现形式，去处理数据，让数据结构能适配当前的可视化类型。
- 展示数据：这个就是前端的本职工作，这个就不用去描述了，但是还是需要注意，响应式，以及大数据量展示异常等等突发情况。这就是考验基础知识是否扎实的阶段了。
大概流程如下：
1. 可视化的类型
可视化主要可以分为三个分支：科学可视化、信息可视化和可视分析学。
1.1 科学可视化
科学可视化是指利用计算机图形学和图像处理技术，将自然科学计算产生的数据进行建模、操作和处理，以直观的形式展现出来。
自然科学，科学三大领域之一。
自然科学包含的学科：数学、天文学和天文物理学、地球科学和空间科学（地质学、气象学、地理学）、物理学、化学、生物科学等等.
1.1.1 定义与起源
- 科学可视化是可视化领域中最早且目前来说最成熟的分支，早在 1990 年就已经出现。
- 它主要是面向自然科学计算产生的数据，通过一系列可视化的手段帮助科学家们研究和洞察数据之间的关系和模式。同时，它能更好的对数据进行展示和保存。
1.1.2 主要应用领域
- 科学可视化广泛应用在物理学、天文学、生物学、医学成像等等。
- 例如：气象图、地理信息系统（ GIS ）、分子结构图、电磁场分布图等应用实例。
1.1.3 技术特点
- 科学可视化技术需要处理大量复杂的数据，通常这些数据会涉及到体积渲染、线积分卷积、医学影像等等高端技术。
- 这些技术都是希望能将抽象的科学数据转换为更为直观的图像或动画，以便人们的理解和分析。
1.1.4 举例
就以 GIS 举一个例子，大家可能去用过地图导航，在导航中，我们需要找某个地点，可能页面直接跳转到哪个地点了，然后再地图上标点，地图就会给你推荐一条路线展示在地图上。
下面是我用百度地图进行的一次导航。我们会发现这样展示，对于用户来说会非常的方便便捷。容易理解。
如果没有 GIS ，没有可视化。那么会出现什么情况。我进行导航，然后后台返给我一组坐标，我给用户看。
例如：经度165.2446934°，纬度44.1794393° - 经度168.2446934°，纬度44.1794393°
会发现一个问题，别说用户看不懂，我们都看不懂。
1.2 信息可视化
信息化可视化关注将非结构化或半结构化的数据转换为可视化形式，从而帮助用户更好的识别模式、趋势和异常。
1.2.1 主要应用领域
广泛应用与数据展示、报告制作、数据分析等领域、通过图表、树图等视觉元素，使得数据更容易理解。
这个对于前端来说是最常见的，我们平常做的最多的可视化大屏就是数据信息可视化分类。
1.2.2 举例
以下是 CSDN 的一个博客数据页面
我们会发现，上面的部分是比较零散的，如果我们单独去看上面的数据，是没办法分析出来，比如这个月我的访问量是否增加，今天增加的是否比昨天的少了这个趋势，是没办法直观的进行分析，还需要各种数据去进行计算。
但是当我们看到下面这个折线图就不一样，很明显能看到趋势的线，而且把多种数据进行了整合，变得非常直观易懂。
1.3 可视分析学
1.3.1 定义
可视化分析学是一门以可视化交互为基础的分析学科。它综合了图形学、数据挖掘和人机交互等技术，旨在通过可视化的手段将人感知和认知能力融入数据处理过程。可视分析学的目标是建立一个螺旋式的信息交流与知识提炼途径，使人类智能与机器智能能够优势互补和相互提升，从而完成有效的分析推理和决策。
1.3.2 主要应用领域
目前可视分析学已经渗透进各行各业，我们通过分析，可以得出我们下一步的决策、也可以推理出我们流程中的不足。
主要应用领域：人工智能、机器学习、医学影像处理、工程与制造领域、金融与商业决策、城市管理与公共安全、科学研究与教育、新兴交叉领域等
对于前端来说，我们常见的知识图谱、流程图等等均属于可视分析学。
1.3.3 技术发展趋势
- 智能化融合：AI驱动的自动模式识别（如自动标注异常数据点）。
- 实时交互增强：5G网络支持下毫秒级数据刷新（如自动驾驶的实时环境感知）。
- 多模态整合：融合文本、音频、传感器的混合可视化方案（如智慧工厂的AR巡检系统）。
1.3.4 举例
比如当我们需要分析红楼梦中林如海和王夫人的关系，如果按照我们正常逻辑来说我们需要先以一个人为起点，一层层的往上找，直到找到两个人的交叉点，然后再往下找，最后确定关系。
但是有了知识图谱就不一样了。下图引用了百度百科中红楼梦的关系图，能看到很直观的就可以分析出两个人之间的关系。
总结
根据以上的分析和了解，我们能够发现，前端可视化是包含了很多分支和分类的，并不只是我们理解的可视化大屏和图表。
并且前端可视化是一直一直在发展的，也是一直在变化的。前些年刚刚兴起时，还只是可视化大屏里面有许多的图表。
但是这些年，很多冷门的可视化技术开始兴起，比如知识图谱，这个东西在很早以前我就做过。但是当时很冷门，客户看到以后和我说了一句，这个东西乱七八糟的给我删掉😭。但是到了现在呢，会发现，因为人工智能的兴起，知识图谱变得越来越热门。LLM 后台搭建知识库的结构，就是知识图谱，所以知识图谱展示这些知识库内容会很简单明确。
我想对各位说的就是前端可视化，是一门非常有意思非常有趣的分支。是值得我们去深入研究的。并且他是一直在更新迭代。后续也会出现很多很多的内容。不用怕没有路可走。相反目前没路走的正是哪些不去深入，只会做图表的那些人。
推荐前端库
推荐一些比较常见的可视化前端库，排名不分先后哦。
Echart：https://echarts.apache.org/zh/index.html
D3.js: https://d3js.org/
思绪思维导图：https://wanglin2.github.io/mind-map-docs/
vue-flow:https://vueflow.dev/
relation-graph: https://relation-graph.com/#/index
antV 全家桶: https://antv-2018.alipay.com/zh-cn/index.html
highcharts：https://highcharts.com.cn/
cesium：https://cesium.com/
openlayers：https://openlayers.org/
leftLet：https://leafletjs.cn/
wl-gantt：https://gitee.com/friends/wl-gantt
LogicFlow：https://site.logic-flow.cn/
