Web前端与可视化有什么区别？_用python制作可视化面板和web前端制作有什么区别-程序员宅基地

首先是技术栈的不同。Web 开发主要以 HTML 来描述结构，以 CSS 来描述表现，以JavaScript 来描述行为。而可视化则较少涉及 HTML 和 CSS，它更多地要同浏览器的Canvas、SVG、WebGL 等其他图形 API 打交道。这是因为，Web 开发以呈现块状内容为主，所以 HTML 是更合适的技术。而可视化开发因为需要呈现各种各样的形状、结构，所以，形状更丰富的 SVG 以及更底层的 Canvas2D 和 WebGL 就是更合适的技术了。

其次，Web 开发着重于处理普通的文本和多媒体信息，渲染普通的、易于阅读的文本和多媒体内容，而可视化开发则着重于处理结构化数据，渲染各种相对复杂的图表和图形元素。两者针对的信息特征和对图形渲染的要求有所不同，所以，在细节处理上也有比较大的差异。

这么说比较抽象，我来举个例子。我们在使用 ECharts 这样现成的图标库开发图表的时候，往往会遇到一些产品需求不能很好被满足的情况。比如，如果想要把图表的默认布局方式从 absolute 改变成其他方式、把坐标轴指示线的样式换成虚线、把配色换成线性渐变，或者想要修改地图中某个点的点击范围。虽然有的问题，通过修改参数配置（ECharts 的每种图表可能有数十种不同的配置项）确实能解决，但还是有一些问题必须要修改库的源码才能解决。因此，像 ECharts 等现成的图表库，尽管功能强大、配置复杂，但是在样式细节控制上，仍然无法做到如 CSS 那般灵活。

除此之外，可视化要处理更多偏视觉方面的细节信息，尤其是在要呈现的数据细节比较丰富的时候，可能要精确地呈现大小、距离、角度、高度、光线、阴影等等。这些细节的处理，都需要我们对图形绘制有更加精确的控制。因此，我们需要较深入地掌握图形学理论知识，了解并熟悉专业的图形库和绘图的工具。简而言之，就是 Web 开发的前端主要还是关注内容和样式，图形的渲染和绘制是由浏览器底层来完成的，而可视化前端则可能要深入底层渲染层，去真正地控制图形的绘制和细节的呈现。

前端开发的同学想要学习可视化，门槛并不高，主要原因有三点：

其一，可视化与 Web 前端一样，最终都是以图像呈现在浏览器上，因此有许多通用的方法论。比如，两者都要涉及 DOM、都要处理浏览器事件、都采用同样的颜色表达方式和同样的资源请求方法等等。

其二，二者都使用 JavaScript，而且都是浏览器端的 JavaScript。所以，就 JavaScript的应用而言，这一块差别并不大。不过，可视化应用面对的数据和渲染的图形元素都比传统的 Web 应用更复杂一些，所以也就更加依赖 JavaScript 一些。

其三，Web 前端领域有许多成熟的工具，包括响应式框架（比如，三大框架 Vue、React、Angular）、设计系统（比如 Ant Design、ElementUI）、函数库（比如，Underscore、Lodash）等等。与 Web 前端一样，可视化领域也有丰富的 JavaScript 工具和活跃的生态，通常这些“开箱即用”的工具，就能够帮助我们完成可视化开发。

因此，只要善于使用这些成熟的可视化工具，我们就能高效率地完成手头的工作。所以，这些工具对可视化的学习和应用来说非常重要。那接下来，我就带你了解一下，可视化领域中都有哪些常用的工具。

可视化领域的工具

可视化领域经过多年的发展，有非常多丰富的工具。我们可以把这些工具大体上分为四类，分别是：专业呈现各种类型图表的图表库；专业处理地图、地理位置的可视化地理库；专业处理视觉呈现的渲染库；以及处理数据的数据驱动框架。

下面，分别来介绍一下这些重要的库：

首先是图表库。可视化应用通常需要绘制大量的图表，比如，柱状图、折线图、饼图，还有一些简单的平面地图等等。图表库能够帮助我们快速把它们绘制出来。社区中有许多优秀的开源图表库，比如我们前面说的 ECharts，或者类似的chartlist、chart.js等等，它们都属于图表库。

如果要绘制更加复杂的地图，比如，一座城市的交通线路和建筑物三维模型，或者一个园区的立体建筑模型等等，我们可能要依赖专业的 GIS 地图库。社区中比较成熟的 GIS 库也不少，比较常见的像Mapbox、Leaflet、Deck.gl、CesiumJS等等。

如果要绘制其他更灵活的图形、图像或者物理模型，我们常用的一些图表库就不一定能完成了。这个时候，我们可以用ThreesJS、SpriteJS这样比较通用的渲染库（实际上图表库或 GIS 地图库本身底层渲染也基于这些渲染库）。我们可以选择通用的图形库，比如，2D 渲染可以选择 SpriteJS，3D 渲染可以选择 ThreeJS、BabylonJS 以及 SpriteJS3D 扩展等等。

除了这些库之外，还有一类比较特殊的库，比如D3.js，它属于数据驱动框架。那什么是数据驱动框架呢？这是一种特殊的库，它们更专注于处理数据的组织形式，而将数据呈现交给更底层的图形系统（DOM、SVG、Canvas）或通用图形库（SpriteJS、ThreeJS）去完成。

D3.js 与图表库一样，都能完成可视化项目中的各种图表展现，但是它们之间也有区别。下面，我来说说它们各自的优势和劣势。

ECharts 等大部分图表库会提供封装好的图表类型，我们只需要简单配置一下参数就可以使用。但正因为如此，图表能够表现的形式也会被预设的图表类型和封装好的参数所固定了。如果我们想做一些非常个性化的视觉呈现形式，用图表库来做，相对就比较困难。而 D3.js因为只关注数据的组织形式，将具体的渲染交给底层去做，所以更加灵活，扩展起来也很方便。但相对地，就不像其他的图表库一样，拥有完整的封装了，使用的门槛也就相对高一些。

D3.js 是可视化领域一个很重要的库，关于它的具体运作机制比较复杂，我们会在数据篇里详细来讲。

要点总结

这一节课，我们重点讲了 Web 前端和可视化的区别和共同之处。

区别主要有两方面，首先是技术栈的不同。Web 开发主要会用到 HTML 和 CSS，而可视化则较少涉及 HTML 和 CSS，它更多地要同浏览器的 Canvas、SVG、WebGL 等其他图形API 打交道。其次，Web 开发着重于处理普通的文本和多媒体信息，渲染普通的、易于阅读的文本和多媒体内容，而可视化开发则着重于处理结构化数据，有时需要深入渲染引擎层，从而控制细节，让浏览器渲染出各种相对复杂的图表和图形元素。

不过，如果你原本负责前端开发，想要学习可视化门槛并不高，因为它们之间有很多共通的方法论，而且都依赖于 JavaScript。并且，可视化也有很多成熟的工具和库可以供我们使用。

本文链接：https://blog.csdn.net/sunnyjingqi/article/details/119108870

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

JAR包详解_jar包解析结构-程序员宅基地

文章浏览阅读9.2k次，点赞2次，收藏13次。一、什么是JAR包JAR包就是 Java Archive File，顾名思义，它的应用是与 Java 息息相关的，是 Java 的一种文档格式，是一种与平台无关的文件格式，可将多个文件合成一个文件。jar 包与 zip 包非常相似——准确地说，它就是 zip 包，所以叫它文件包。jar 与 zip 唯一的区别就是在 jar 文件的内容中，包含了一个 META-INF/MANIFEST.MF 文件，该文件是在生成 jar 文件的时候自动创建的，作为jar里面的"详情单"，包含了该Jar包的版本、创建人和类搜_jar包解析结构

LLM权重量化_llm模型量化-程序员宅基地

文章浏览阅读921次，点赞13次，收藏19次。我们可以计算尺度是255/(3.2+3.0) = 41.13，zero point为 -round(41.13•-3.0)-128 = 123- 128 = -5，因此我们之前的0.1权重将被量化为round（41.13 * 0.1 - 5）= -1。然而，它们的局限性，特别是在处理异常值时，导致了LLM.int8()，这种技术也保留了模型的性能。通常，模型的大小是通过将**参数的数量(大小)乘以这些值的精度(数据类型)**来计算的。现在我们的模型已经被量化了，我们想要检查这个过程的影响。_llm模型量化

【C语言】排序算法（冒泡排序，选择排序，插入排序，归并排序，快速排序）_选择排序、插入排序、冒泡排序以及快速排序和归并排序的c语言实现设计程序-程序员宅基地

文章浏览阅读1.4k次。_选择排序、插入排序、冒泡排序以及快速排序和归并排序的c语言实现设计程序

GNU ARM Toolchain 初学者入门指南-程序员宅基地

文章浏览阅读6.2k次，点赞19次，收藏62次。什么是交叉编译？交叉编译过程！如何理解代码编译过程!arm-none-eabi-gccarm-none-eabi-asarm-none-eabi-ldarm-none-eabi-objcopy_arm toolchain

html页面上有一个id值为s1的,达内java第3次周考题黄色背景为正确答案.doc-程序员宅基地

文章浏览阅读2.5k次。达内java第3次周考题黄色背景为正确答案.doc1 选择题40 题,每题 2 分 1、在 CSS 中，关于 BOX 的 margin 属性的叙述正确的是( )单选 A、边距 margin 只能取一个值 B、 margin 属性的参数有 margin-left、margin-right、margin-top、 margin-bottom C、 margin 属性的值不可为 auto D、 ma..._html 页面上有一个 id 值为 s1 的元素,现需要使用 javascript 代码

linux嵌入式串口与zigbee,zigbee的串口与STM32通信-程序员宅基地

文章浏览阅读1.2k次。在TI 的CC2530中，使用的是协议栈Z-Stack2007，现在想通过串口与STM32通信，当STM32给zigbee发送数据时，zigbee接收，只是接收的这部分代码TI给封装起来了，只知道在配置里头是这样的：/* @ZL 串口初始化 */halUARTCfg_t uartConfig;/* UART Configuration */uartConfig.configured ..._linux zigbee stack

随便推点

盘点在pyinstaller打包的时候遇到的一些坑_torchscript requires source access in order to car-程序员宅基地

文章浏览阅读2w次，点赞4次，收藏21次。盘点在pyinstaller打包的时候遇到的一些坑1、当遇到编码问题的时候要怎么解决[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dWbl6IDm-1606805468621)(https://cdn.jsdelivr.net/gh/13060923171/images@main/img/image-20201201090248717.png)]在cmd窗口输入chcp 65001然后回车这时编码问题就可以全部解决了2、python maximum recursi_torchscript requires source access in order to carray out complilation

关于新的NDK编译Openssl时候，遇到gcc文件不存在的问题处理_为什么下载的 ndk 编译包里没有gcc 和g++-程序员宅基地

文章浏览阅读2.1k次。自从NDK的r19开始，由于gcc兼容clang的编译方式有问题，该版本已经移除了相关gcc文件，所以用老方法交叉编译Openssl的时候，会提示找不到gcc文件。实际现在是直接使用clang编译即可，具体方法如下：1.下载NDKhttps://developer.android.com/ndk/downloads/index.html2.下载opensslhttps://www.ope..._为什么下载的 ndk 编译包里没有gcc 和g++

操作系统常见的40道面试题_window os面试题-程序员宅基地

文章浏览阅读5.2k次，点赞2次，收藏47次。1). 死锁的概念在两个或者多个并发进程中，如果每个进程持有某种资源而又等待其它进程释放它或它们现在保持着的资源，在未改变这种状态之前都不能向前推进，称这一组进程产生了死锁。通俗的讲，就是两个或多个进程无限期的阻塞、相互等待的一种状态。2). 死锁产生的四个必要条件互斥：至少有一个资源必须属于非共享模式，即一次只能被一个进程使用；若其他申请使用该资源，那么申请进程必须等到该资源被释放为止；占有并等待：一个进程必须占有至少一个资源，并等待另一个资源，而该资源为其他进程所占有；_window os面试题