18 | 千言万语不及一幅画：谈谈数据可视化

四火



该思维导图由 AI 生成，仅供参考

你好，我是四火。
随着大数据和数据分析趋势的流行，数据可视化变得越来越重要，而许多全栈的学习材料并没有跟上节奏，去介绍这方面的技术。这一讲中，我们将介绍数据可视化的基本概念和原理，以及几个常用的 JavaScript 用来实现数据可视化的库。
数据可视化，即 Data Visualization，是指使用具备视觉表现力的图形和表格等工具，向用户传达数据信息的方式。在我工作过的每个大型团队中，数据可视化技术都有着其不可替代的用武之地。
在大数据分析团队，数据库可视化技术被用来分析数据变化，验证机器学习算法的效果；在高可用服务团队，数据可视化技术被用来了解和监视服务的运行状况，了解系统的压力和负载；在分布式平台团队，数据可视化技术用来俯瞰一个个异步任务的执行情况，以获知任务执行的健康状况……事实上，只要有工程的地方，数据可视化就扮演着举足轻重的角色。
Web 绘图标准在前端绘图，是数据可视化里面很常见的一个需求，我们常见的有位图和矢量图这样两种。
通常我们谈论的图片，绝大多数都是位图。位图又叫栅格图像，无论位图采用何种压缩算法，它本质就是点阵，它对于图像本身更具备普适性，无论图像的形状如何，都可以很容易分解为一个二维的点阵，更大的图，或者更高的分辨率，只是需要更密集的点阵而已。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文介绍了数据可视化在大数据分析、高可用服务和分布式平台团队中的重要角色，以及数据可视化的基本概念、原理和常用的 JavaScript 库。文章重点介绍了 SVG 和 Canvas 两种绘图方式的优劣，以及介绍了 D3.js 这个基于数据操作文档的 JavaScript 库的特点和使用方法。通过详细的代码示例和图表展示，读者可以深入了解数据可视化的技术原理和实际应用。文章还提出了一些思考问题，引导读者思考在实际项目中如何应用数据可视化技术以及在地图应用中选择 SVG 还是 Canvas 的实现方式。整体而言，本文内容丰富，涵盖了数据可视化的基础知识和相关技术，适合对数据可视化感兴趣的读者阅读学习。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《全栈工程师修炼指南》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(9)

最新
精选

丁丁历险记
写过vml 的路过，当时做一个魔方导航。怀念那个有大把时间做闲着蛋疼的东西的事。
作者回复: 👍，用过 VML 的程序员可不多
2019-10-22

5
Dream.
#1思考一下你经历过的比较大的项目，你是否在项目中使用过数据可视化技术，如果给你一个机会，你觉得该怎样使用呢？数据可视化，关键是将用户关注，并且值得分析的数据展示给用户。比如业务系统的业务量，运维系统的监控状态等等。相信你用过 Google 地图或 Baidu 地图吧，那么，你觉得地图应用应该是用 SVG 还是 Canvas 来实现呢，为什么？地图最好还是采用svg来实现，svg可以很好的支撑地图缩放功能，保证缩放时地图保持原样。如果换成Canvas，放大了会模糊，缩太小了会因为点阵过于密集而造成图像扭曲
作者回复: Google 地图使用的是 Canvas，而不是 SVG，这里最主要的原因还是和性能有关的，使用 SVG 的话你会看到大量的 DOM 节点，这些会拖慢地图性能的。你可以看一下这两个方案性能的比较：https://www.flickr.com/photos/martin-kliehm/3669738142
2019-10-21

5
林子恒#Ralegh
老师您好，对于文中有一句话我有点疑问：图像的生成可能需要显著的资源消耗，放到前端可以减轻服务器压力。这里的消耗既包括 CPU、内存等物理资源消耗，还有用户的等待时间消耗，在前端可以更好地给用户提供渲染过程的反馈。正常服务器配置和性能会比客户端要好很多，对于资源消耗比较多的操作放在服务端会更合适吧？请老师聊聊您的看法，谢谢
作者回复: 服务器的性能往往比客户端更高，你说的没错。但是如果用户量很大，服务端需要处理成千上万的图像生成呢？这就对服务端是显著的资源消耗了，而客户端来处理的话，服务端的压力就小很多。
2019-10-24

1
阿阳
老师好，正弦曲线绘制，为啥要放大100，除以100，没太明白。能再详细解释一下么？
作者回复: 这些操作都是为了绘图显示友好的图示用的，你完全可以套用其它的公式
2022-08-12归属地：美国


paperen
1. 都是直接用百度的echarts，不太明白问题什么意思？产品层面如何使用还是开发层面上？ 2. 一开始以为都是SVG 看了精选留言才知道谷歌是canvas，怎么看出是用的SVG还是canvas？百度是SVG的话使用时没感觉会很卡是说百度优化得很好吗
作者回复: 关于#1，是泛指怎样使用，询问你的理解，没有限定产品还是开发层面。关于#2，我解释一下，百度也好，Google也好，它们用的都是Cavas。你可以使用浏览器上的开发者工具，查看DOM树。
2020-07-01


💢 星星💢
老师百度echarts算不算？我用过它的api，做数据可视化呈现？在绘制地图这一块，它使用的是canvas吧。
作者回复: 抱歉我对echarts不了解
2020-03-11


学习学个屁
百度的echarts多好用
2020-04-11

3
小寞子。(≥3≤)
后端多年，第一次接触前端是angular的typescript。这文章的lambda表达式还好。我同事的各种join map, Ajax,语法。看的头疼。
2019-12-16


靠人品去赢
1用过一点数据可视化，画个饼图什么的，python画直方图。给个机会的话我觉得我会考虑两个JS库，因为里面很多例子多种展示方式给用户，可以说体验上更直观，最起码截图做个PPT也不错。 2用svg不失真，可以不断地放大，但是直接用JS画canvas图还是挺方便的。
2019-10-22
1


收起评论