前言

我大概在2017年年底接触的可视化，至今一直在从事相关的产品开发和研究，主要是可视化分析方向。在这三年的时间里，产生了大量的疑惑和思考。趁着这次机会，总结一下。也希望通过自己的心得体会，能给一些有兴趣未入门的web开发人员一些帮助吧。

我会尽量涉及到作为前端开发人员所需要涉及到的知识链。有时也会涉及到一些基础知识，所以内容会比较多，但是希望能够静下心来慢慢的看下去，思考下去。

本文并不注重实践和实际的技术细节，而是提供可视化与web前端之间的一些思考。因为作者水平有限，如有知识遗漏或表达方式有误，欢迎大家在评论区处指正，谢谢大家🙏。

可视化的基础知识

主要是可视化的基础知识，让新来的同学了解一下可视化的大概框架，不涉及过多的细节。

可视化的定义

要做可视化，肯定得先了解什么是可视化。

可视化有多种定义，我们在这里只说在计算机学科中的可视化定义：利用人眼感知能力对数据进行的可视表达以增加认知的技术，叫做可视化技术。听起来比较绕，人的眼睛是一个高带宽处理器，可视化的作用是用来增强人对数据的认知的，而可视表达(如图像)则能够携带更多的数据，通过眼睛传入到我们的大脑，在里面得到可感知的结果。

也可以简单的理解为：运用计算机图形学或图像处理技术，将数据转化为图像，达到更容易理解数据的技术。

可视化的作用

为什么需要可视化？

为了让数据理解起来更容易、更直观。
发现数据背后有价值的信息。
提升各种效率，最终还是映射到业务的效率上。
....

下面放一个经典的图来帮助大家理解。

这个是一个表格，内容为I,II,III,IV四列数据，每列数据的每一项都有x，y两个属性，下面问这四组数据的特征，是不是连数据看起来都很费劲，更别说看数据背后的特征了。但是我们通过可视化的方法画出上面的数据。

我们很轻松的就看出了它们各自的规律和一些附加信息。这也是可视化的魅力所在。

可视化的分支领域

可视化主要有以下分支领域

1、科学可视化（SciVis）

科学可视化是可视化中出现最早的，也是发展最为完备的一个分支领域。主要是描绘自然界中的真实存在的数据，应用在物理、化学、气象、航空、医学等领域。例如我们常见的气象图，星云图，洋流图等。

科学可视化处理的数据都有天然的几何结构，如磁感线。

2、信息可视化（infoVis）

在有限的空间里，图像化大量的数据，以直观的方式展示出所含有的抽象信息。我们日常生活中常见的可视化大部分都属于信息可视化的领域。例如地铁交通图。它有一个特点，没有复杂的交互，趋向于静态的。

3、可视分析（VAST）

可视化分析是一个较为新的分支，被定义为以可视化界面为基础的分析推理科学。结合图像学、数据分析、人机交互等技术，以可视交互为通道，将人的感知力融入到数据处理过程，形成人脑智能和机器智能优势互补和相互提升，建立螺旋式信息交流与知识提炼途径，完成有效的分析推理和决策。

这个定义让人望而生畏，简单的理解就是通过可视图表组合，通过主动性质的人为交互，来分析数据，得到一些隐藏的数据信息，从而帮助制定决策。

以上就是目前较为公认的是可视化的三个领域，三者之间的交界也比较模糊。

可视化的历史

可视化简史这篇文章介绍的就挺好，我就不做过多的累述了，历史上有几张图挺有名的，拿破仑东征图，1854年英国宽街霍乱图。

如何去做一个可视化

可视化的步骤其实多种多样，但是大同小异，之间的差别都是一些微不足道的地方，中心思想是一致的。我下面说一下我一直用的一个步骤。同样，也是蜻蜓点水，一掠而过。

1、明确需求

再干一件事之前，你得知道你要干什么？你想要了解什么？需求是做可视化设计的第一步骤。这个需求必须得是一个具体的问题，你要把它能够写出来，讲清楚，才算是一个需求。例如某公司今年汽车的销售额受什么因素影响。

2、数据

限于篇幅，直接把数据收集和处理等步骤统一写成数据了。根据需求，从各种数据源拿到原始数据。原始数据是大部分情况一个大杂汇。我们需要做数据清洗，例如整理为统一格式，删除不需要的数据维度，去掉重复信息等。

经数据清洗后，我们就得到了一份比较规范可用的数据库了。接下来就需要在应用层面上业务化数据。根据第一步提出的需求，将数据进行进一步的处理，如根据不同的维度聚合、分割数据等。

3、可视化

根据我们提出的需求，和数据的结构来选择可视化的展示方式。在这里我们要了解一些常见图的特点和适用数据结构。

我下面列举几个图的特征。后面会给大家贴一些帮助大家选图的网站。

自己当然也可以创建图。在这里有一个小建议，创建新的图，尽量从基础图延伸，这样的图既有创新性，用户的学习成本低，接受度较高。例如把柱状图分块，变成柱状推叠图。再加上个轴做对比，变成了双轴柱状堆叠图。

关于图的优化，放在下一步。

4、做决定

上面三个步骤后，就得到了一个初步的图表。这时候需要对照需求，看看是否能够满足我们提出的需求。如果不满足，要思考出现问题的步骤。

需求的不合理？例如想知道小猫生娃的数量和全球汽车的销量（这个说不定真有关系，我随意说的）。
数据获取的不对？例如在做图的时候，发现数据缺失一些关键信息，那么我们就解决数据问题。
图选的不对？重新思考数据结构和需求，再选图。

如果满足到了需求，那么接下来就是要做优化。

其实设计图这一个步骤真的是一个很大的学问。一个好的可视化作品要有良好的故事性、完善的图表要素、人机交互、感知认知（例如格式塔）等等。后面也会贴一些相关知识的链接。看经典要比听我逼逼强的多。

什么是好的可视化作品？

在这里提一个准则，是香港科技大学的屈华民教授讲的可视化的信、达、雅。也可以对照自己的作品做优化。

1、信

可视化作品不能带有偏见，不能误导用户。要如实的传达数据的真实面貌。

有一个可视化案例，是美国汽车换购汽车的选择。数据分析发现90%的用户第一选择都是A牌子的厂家。数据仅仅告诉了我们选择A牌子的用户多。我们并不能因此确定A牌子的汽车就是质量好，受欢迎程度高，因为可能有太多数据集之外的因素影响了数据结果，例如国家政策，厂家优惠等。我们只需要将原始数据带给我们的信息表达出来即可。

这个信也就是第一步准则，重中之重。

2、达

可视化的根本用途不是为了美观，也不是为了简洁。而是要解决你第一步提出的那个需求，要“达到”那个需求。才是一个高效的可视化。当然，如果你的需求就是要酷，要美观，那也可以。

3、雅

可视化设计美观和优雅。在达到上面两个准则后，我们则可以考虑在作品里添加一些艺术成分。有本书就是《Beautiful Visualization》，讲的就是可视化之美。

可视化应用

可视化的应用非常广泛，简单来说需要成像的、有数据产生并且有分析需求的行业，都少不了可视化的参与，并且能带去很大的价值。例如军工行业的作战地图、作战设备(枪械性能、战斗机状况)等，网络安全行业的流量分析、攻击图等，医疗行业的CT影像。媒体行业的讲述故事（例如澎湃实验室）等等无穷无尽的应用场景。这次新冠肺炎的防控战役中，就涌现出了大量优秀的可视化作品，并且提供了极大的助力。例如丁香医生。

当数据成图后，往往还能带来一些意外的收获。引用一个屈教授之前讲的一个有趣的事例，他的团队之前参与过一个视频在线学习的项目。然后网站记录了一些用户的交互操作，例如看视频时的快进、后退的操作。

将这些数据分析可视化之后，就得到了一个视频中用户的交互反馈可视化。然后就发现了对于一个视频中，哪些时间片是用户反复去看的，讲师则去看一下这些时间片是不是比较难，或者讲的不是很透彻。还有一些时间片大都跳过的、加速的。那么确认一下是不是不是重点却占用了很多时间。从而达到提高课程质量的能力。

另一个有意思的现象则是，有类用户在大家都觉得难的地方，也不怎么停留操作。还有一类用户在大家反复停留的地方看的飞快，在大家快进的地方却反复的看。这两类用户的考试成绩的区别大家可以估计出来吧😁。

总的来说，可视化大有作为。关于可视化的基础知识就讲这么多，感兴趣的人多的话，后期会单独写一系列。

可视化与web前端

为什么要做可视化（对于我个人）

1、有兴趣。

兴趣是第一生产力，我就喜欢炫酷的东西。如果终日都在实现各种后台管理系统，我会丧失对前端的激情，而当作是一个糊口的工作。人一生如果能够从事自己喜欢的职业，是一件及其幸运的事情。我毕业后选择前端岗位而不是本专业的Java和嵌入式。就是因为前端的可见性高。

2、自由度高

牵扯到设计和交互，自由度就提升起来了。例如一个球体，可以上下转，可以左右转，还可以离子化。可以尽情的发挥你的想象力和创作力。

3、成就感强

熟知的“页面仔”称呼，总被“鄙视”🐶🐶🐶(狗头保命)。可视化则是能够打破梏桎，进入到一个新的领域。等你做一个宇宙大爆炸产生星系的效果出来后，大家只能喊666了👏👏👏。

4、市场环境好

赶上了大数据时代，市场的需求量是毋庸置疑的。随着硬件的升级，AR/VR的普及。以及webassembly的发展，可视化的需求会越来越大，技术氛围也会越来越好。

5、职业接入性好

运行环境是浏览器，天然带有优势，快来入坑哦😊😊😊。

可视化如何入门

入门阶段

知识储备

看相关的可视化书籍，积累可视化基础知识，例如常见图表用法，常见可视化方法等。
基础掌握Web开发语言，svg、canvas、openGL等。
学习基础数据分析知识。例如数据获取、清洗等。
会用常见的库，例如D3.js、Three.js。
科学上网（这个可以说是最重要的😂😂😂）。
会这么多，就足以应对简单的设计了和常见的可视化开发了。
一点小建议哈，不要过多的使用封装的太好的Chart库。

注重方面

注重实现。先不要考虑过多的语言原理和可视化设计方法。先把技术练好了。
开始有意识的搭建自己的可视化知识体系。
接触可视化的氛围，多参会，多交流。你过了一段时间后，就会发现自己的朋友圈、公众号关注开始逐渐都是可视化相关的内容了，然后促进更加的深入。

前期最重要的就是大量的练习。如果公司有相应的业务，那么直接可以在业务上学习。如果没有的话，就自己找数据，自己提需求。还可以用一些可视化大会的考题。例如ChinaVis、IEEE VAST Challenge，每年的挑战赛基本都提供数据和问题，优秀的作品有些也提供下载等。大家也可以报名参赛。

具体的技术的实现呢，会在接下来的拆分系列文章里，逐一的详细讲解。

进阶方向

知识储备

OpenGl
游戏引擎
可视分析
可视化设计(认知感知，人机交互，用户心理学)
计算机图形学，计算机视觉
图论、图算法
数理统计

不要看这么多词汇就吓到了，了解的程度看你个人就行，毕竟是工业应用，不是搞研究的。学习别人总结好的东西，如果自己再来一点小灵感就再好不过了。想要了解的更深当然最好，毕竟等你走到后期的时候，限制你发展的往往就是你最短板的地方。

注重方面

最好选一个方向。多看该方向的论文等文献之类的。
实现能力毋庸置疑。
专注可视化能产生的价值。
精通可视化设计能力。
延长自己的短板。

疑惑和解答

Q：在初始做可视化的时候，我总是在想什么才算是可视化工程师。是注重开发还是设计？

A：如果你是刚入门的话，不要想那么多，一定要把开发技术搞好，一般的设计都有专门的人来做。首先就得完美的实现他们的合理设计才行。等你把技术都融会贯通了，设计自然就是你下一步的方向了。

Q：做可视化是不是就不用在学习React等市面上流行的UI库了？

A：不仅要用，而且要用的更好，你的前端基础知识要更加的扎实才行。因为大部分的可视化都是集成在产品里面的，并且包含更多的数据和交互。如果你对现有框架了解的不够的话，有时会产生性能或其他问题。

Q：为什么我做的可视化不够好？

A：大部分情况是没有按照可视化的流程去走。每一步都要稳，不要急于去实现。多思考。

篇幅有限，都是我个人的思考，可能不适用于大家，就不多写了。接下来你提Q，我来A。

推荐的一些资源

推荐资源我只列举一小部分。本文不是资源帖，另外选择多了，容易失去焦点。下面的资源每一方面都涉及到。

可视化书籍

《数据可视化》（陈为教授）五星推荐
《数据可视化之美》翻译的一言难尽，尽量看英文的吧

《Information Visualization Perception for Design》(科林瓦雷)

网上课程

北大暑期学校、浙大暑期学校（有条件的同学如果还举办的话，可以参加一下）
GAMES101 我男神，讲的特别好，五星推荐
网易云课堂时长感人

有图学性质的网站

大会和组织

ChinaVis
IEEE VIS
北大可视分析小组、浙大可视分析小组

期刊

图学学报
计算机辅助设计与图形学学报
网络信息安全学报
Visual Informatics
多看看领域内的期刊，看看别人整天都在研究什么，也好找自己的方向。

公众号

一些可视化自媒体，做的很不错

宽视善知
帝都绘
上观数据
DT财经
湃客工坊（有数）
澎湃新闻

综上

本次我们团队也参加了ChinaVis挑战赛，拿到了不错的成绩，本来想在这里写一下思路，帮一些朋友练习一下的，但是由于种种原因吧，下次一定。

好几天没睡午觉，写了这一篇文章，如果能够帮助到您，请您点个赞再走，让我账号快点升级。将是我最大的荣幸。谢谢各位了哈。

最后如果本文内您有什么疑惑，或者侵犯到您的个人权益，请联系我修改。关于资料的话，如果想要更多的，或者指定领域的资源，可以私信我，或者加我微信wang_xlv。

🏆 技术专题第三期 | 数据可视化的那些事......