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。并且，可视化也有很多成熟的工具和库可以供我们使用。