FEBOOK

Appearance

Return to top
On this page

开篇-可视化介绍

大家好，我们是蚂蚁集团体验技术部的可视化团队。今天，我们想和大家一起聊聊数据可视化。

提到数据可视化，大家脑海里面可能会出现下面这些图表。的确，在很多人的印象里，数据可视化就等于制作美丽的图表，但其实数据可视化远不如此：“It's not just about making pretty pictures”。

那么接下来就给大家简单地介绍一下数据可视化这个年轻却又古老的领域，希望大家“宝山一游，不会空手而归”。

数据可视化是什么？

首先我们来通过一个经典的挑战来认识数据可视化：观察下面的表格数据，你能在短时间内判断出每一组数据的关系吗？

相信直接看这些数据，大家内心或多或少都会有点崩溃；如果大家碰巧懂得统计学的一些知识，估计会更加崩溃：它们的单维度均值、最小二乘法回归线方程、误差的平方和、方差的回归和、均方误差的误差和、相关系数等统计属性均相同！

但如果我们将上面的数据分布情况用下面这张图表示的话，相信大家可以迅速的从数据中发现它们不同的模式。

上面这种“将不可见或难以直接显示的数据转化为可感知的图形、符号、颜色、 纹理等，增强数据识别效率，传递有效信息”的手段就是数据可视化。

浙江大学陈为教授的《数据可视化》这部书中是这样定义数据可视化的：利用人眼的感知能力对数据进行交互的可视表达以增强认知的技术 。接下来我们就深入了解一下定义中的“人眼的感知能力”和“增强认知”。

人眼的感知能力

“人眼的感知能力”，也就是我们平常说的视觉。不知道大家会不会和我有相同的疑问：视觉只是我们众多感觉中的一种，是什么让它脱颖而出，可以用来分析数据呢？这里列出两点比较重要的原因。

第一，在几种感官系统中，视觉系统获得信息是最高效的。 因为它可以并行处理视觉信息，比如你可以很迅速地从一片蓝色的点中找到一个红色的点。相比之下，耳朵只能线性地获得信息，而我们也从来没有听说过人的鼻子和嘴巴可以感知大量的复杂信息，对它们的探索还在一个很初始的阶段。

第二，图片可以加速人们查找和识别信息，因为信息会和空间信息相关联。 比如说，如果将有关联的事物放在一起，在不借助任何标签的情况下，我们也能轻易找到和识别这些事物，下面提到的元素周期表就是很好的例子。同时图片也很易于理解，就像很少有人能一眼看出一组数据的模式，但是小孩都能看懂条形图。

增强认知

基于这两个特点，我们可以把数据和视觉元素关联起来，通过视觉去高效获得视觉元素的特点，从而了解对应数据的特点，达到增强认知的效果。

提到增强认知，这里就不得不注意了：不是所有的数据可视化都能到达增强认知的效果。比如下面两张图都是用折线图可视化任天堂游戏销售趋势，但是第一张图给人的感觉是他们的趋势异常稳定，第二张图却反映出在2016年6月左右他们有极高的提升。

出现这个问题的原因就是第一张图的 y 轴的范围设置的远远超过了数据的范围，出现了视觉上的偏差，这种可视化设计就是不好的：不仅仅没有达到增强认知的效果，还给大家带来了错误的认知。

所以到底什么样的数据可视化才是能帮助我们增强认知的呢？更形象一点：什么样的数据可视化才能算的上是美丽的？在《Beautiful Visualization》里面将归纳了美丽的数据可视化的四个特点：新颖，充实，高效和美感。下面我们将用下面伦敦地铁图这个经典的案例来解释这4个特点：

伦敦地铁图的最大改变就是：把地图从准确代表地理特征的束缚释放出来了，线条不再是歪歪扭扭的，只有简单的直线和角度。 从传统歪歪扭扭的线条这种旧的风格，到直线和角度这种新的角度看数据，就是新颖。着重展示地铁站之间相对的逻辑关系，弱化地理关系，让人们弄明白下一步自己怎么走，而不是这条地铁线路到底是如何修的，简介的突出关键信息，这就是充实和高效。 合理利用简单的直线和角度来引导用户，揭示关系，这就是“美感”。

当然上面的原则也不是绝对的。根据上面的高效原则我们需要尽量避免过多的装饰，但是信息图（Infographics) 的出现，让大家意识到装饰能提高用户的参与感，让用户更难忘。

比如在下面展示世界上最高的建筑的信息图中，用建筑的图片替代了本来的条，虽然降低人们获得信息的效率，但是能让大家感到更有意思，印象更加深刻：也许多年以后你在回忆起这本小册子的时候，你啥都忘了，但是这张图还深深的印在你的脑海里！

为什么要学习数据可视化

聊了这么多数据可视化是什么，那么我们为什么要学习数据可视化呢？数据可视化到底对我们的生活，工作和世界的发展到底有什么用？

时代背景

了解任何一个东西的作用都不应该脱离它的时代背景，毕竟俗话说的好：“时势造英雄”，所以我们首先在了解一下我们的时代背景。

随着科技的发展，更多的数据被收集、存储和感知，我们真正进入了大数据时代。而大数据时代最值钱的是什么？当然是数据，更准确地说：应该是数据背后的信息，这些信息进行整理，又会形成知识和经验，从而帮助我们做决策。

这个时候，也许就有人就要问了：在人工智能家喻户晓的时代，直接把数据分析交给机器不就好了吗？为什么还需要人的参与？这是因为在大多数情况下，人们面对数据不知道提出什么样的问题，甚至不能提前知道自己提的问题是否正确。这种时候，统计学和机器学习也无能为力。

因此，在数据分析中，我们首先可以通过可视化提出需要研究的问题。在分析过程中，再用可视化去发现算法的问题以及参数对结果的影响，从而改进算法和任务。最后，我们还可以用可视化去展现分析结果，并且判断根据这个结果做的决策是否正确。

在大数据时代的背景下，针对不同的数据类型和研究目的，数据可视化分为了三个主要分支：科学可视化、信息可视化和可视化分析学。

接下来我们就分别来了解一下它们，看看我们日常生活中主要是在哪个分支上以及每个分支在工作中的主要应用场景，从而了解更多学习数据可视化的理由。

科学可视化

首先我们来看看可视化领域最早、最成熟的一个跨学科研究与应用的领域：科学可视化(scientifc visualization)。

科学可视化主要可视化的是自然科学领域中一些具体的、非抽象的东西，比如医学领域的骨骼等影像数据，气象气候的洋流流动数据等。这些数据主要带有几何和空间信息，比如形状、位置等，重点探索如何有效地呈现其中的几何、拓扑和形状特征。

在日常生活中，我们都接触的比较少，接触它的更多是一些科学家和相关研究人员。

信息可视化

相对于科学可视化面向抽象数据数据，信息可视化(information visualization) 处理的对象是抽象的、非结构化数据。这些数据往往来源我们的日常生活：社交网络数据，疫情数据，销量数据，平常我们接触到的数据可视化几乎都是信息可视化。

工作中信息可视化的具体场景这里提以下三个：移动端可视化，图可视化和地理可视化。

移动端可视化是在手机 APP、H5 或者小程序做数据可视化图表。移动端是大势所趋，几乎所有的线上应用，都有其对应的移动端，如何让用户更好的了解自己的数据或者在使用产品时产生的数据，这个就是移动端可视化需要考虑的问题了。

图可视化主要是对网络数据的可视化，主要分为图分析和图编辑。 图分析用于风控、安全、营销场景中的关系发现，对图的一些基本概念进行业务上解读，环、关键链路、连通量等。图编辑用于图建模（ER图、UML图）、流程图、脑图等，需要用户深入参与关系的创建、编辑和删除的场景。

地理数据可视化主要是对空间数据域的可视化，主要有四大方向：

  • 信息图：主要用于展示位置相关的报表，信息图，路径变化等等。

  • 大屏应用：大屏展示一般以地理数据为载体，如建筑，道路，轨迹等数据可视化。

  • 地理分析应用:这类应用往往是海量地理数据的交互分析，用户基于位置的用户推荐，拉新，促活等业务运营系统，或者选址，风险监控等系统。

  • 移动端地图应用：路径规划，位置导航，一般是需要和PC联动，PC端地图侧重规划指挥，移动侧重作业执行。

可视分析学

由于上面提到的在大数据时代数据分析的重要性，可视分析学(Visual Analytics) 就诞生了：可视化和分析结合的新领域，同时也涉及到图形学、数据挖掘和人机交互等领域。它往往以可视交互界面的形式给用户提供分析和可视化的能力，帮助用户做决策。

而可视分析在工作的运用场景主要有两个：BI 工具和大屏可视化。

所谓的 BI 工具就是商业智能分析工具，是指使用一套方法和技术来准备、呈现和帮助分析数据的工具。比如有名的 PowerPI，Tableau 等等。对于 BI 工具来说，其中85% 以上的需求都是做通用报表的需求。

大屏可视化聚焦于会议展览、业务监控、风险预警、地理信息分析等多种业务的展示，在图形渲染、可视化设计方面都有很高的要求。比较有名的就是双十一时候的可视化大屏。

数据可视化学习的难点

讲到这里，大家应该对学习数据可视化很感兴趣了，但是学习数据可视化却不是一件容易的事情。一个比较完整的数据分析流程主要分为两大部分：设计和实现，每一部分都有对应的挑战。

设计的主要由认识数据，确认任务和设计方案构成。主要是根据数据提出想要探索的问题，并且提出解决方案。这个部分的挑战在于：什么样的数据适合讨论什么样的问题？众多设计方案之中哪一个才是最好的？

实现的主要由数据转换和数据绘制构成。首先需要抽象的数据转换成绘制需要的视觉形式数据，然后将视觉形式的数据绘制到屏幕上。这个部分的挑战在于有太多的工具可以选择，什么样的工具才是真正适合当前设计方案的？

一方面来讲，国内高校传统的数据可视化课程更偏理论，更侧重设计，但是对实现却讲解甚少。这导致某些学生学习完成之后，面对市面上各种各样的数据可视化工具，不知道如何学习和选择。

  • D3，ECharts，G2，Vega，Vega-lite 都可以做可视化，到底选择哪个？
  • D3 学习曲线那么高，怎么入门？
  • ECharts 和 G2 一个是配置式的 API，一个是函数式 API，到底有哪些区别？

另一方面现有的网课对理论的讲解比较薄弱，侧重于讲解实现部分，但也不完整。课程中数据绘制这部分占比较多，比如浏览器的绘制技术，性能优化的方法等。这导致学习完成之后，面对数据和任务也不知道选择什么可视化方法，一些基础概念也不清楚：比例尺，数据映射，分箱操作等等。

比如我们在开发迭代 G2 的过程中，发现了许多用户有许多问题，就是因为对数据可视化中的图形语法不了解所导致的。

  • Quantile，Threshold，Quantize 比例尺有啥区别？
  • 希望生成的坐标刻度是6个，但是为什么却生成了8个？
  • nice 操作到底有什么用？

为了图形语法能够普罗大众，所以我们简化了 API，增加了 G2Plot 项目。但是，从另一方面，我们也希望提升社区同学的可视化的理解广度，这是小册子的初衷。

小册子的优势

针对上面的问题，我们团队设计了这本小册子。为了保证内容能形象生动，不停留在理论，我们设计了一个真实的数据分析任务：可视化苏菲的世界。这个任务的具体细节会在后面讲解，小册子的内容分为三个部分，都围绕着“通过可视化苏菲的世界学习可视化”这个目的展开：

  • 基础篇：首先会了解什么是“苏菲的世界”和数据可视化的流程（确定数据种类，任务等），然后基于此提出我们想要通过数据可视化解决的问题。这之后我们会不借助任何工具，学习如何基于浏览器的 Canvas 和 SVG 绘图技术绘制一个条形图，从而解决上面的其中一个问题。在这个过程中我们会发现开发一个简单的条形图就会很麻烦，于是我们会介绍图形语法以及它如何去简化这个流程。
  • 实战篇： 为了提高我们解决问题的效率，这里会带大家从 0 到 1 不使用任何第三方库开发一个基于图形语法的图表库：Sparrow。从搭建开发环境开始，到一些低层级的可视化模块（比例尺，坐标系等）的开发，最后在它们的基础上完成图形语法图表库。
  • 分析篇：开发完了 Sparrow，我们将用它去解决上面的问题。但是在这个过程中我们会发现 Sparrow 的能力不足，有些问题它没有办法解决。于是这个时候我们就会用 AntV 里面一些成熟的图表库去解决剩余的问题，来看看一个图表库从 1 到 2 有哪些地方需要增强。

除了丰富且完整的内容之外，我们有强大的写作阵容：基础篇和实战篇主要由由逍为和万木完成。两者除了都是 G2 的核心维护者之外，前者还是 AntV 的总架构师，在 BI 开发领域有丰富的开发经验；后者在 Vast Challenge，ChinaVis Challenge 等挑战赛中多次获得不错成绩。分析篇由新茗，福晋和云极完成，三人分别是 G2Plot，Ant Desgin Charts 和 L7Plot 的作者和核心维护者。

学习理论最好的方法就是去动手解决一个实际的问题，了解一个“轮子”的最好方式就是去写一个“轮子”。如果你满足下面任何一点，那么这本小册子将是你最好的选择：

  • 对可视化和数据分析感兴趣，在日常学习或者工作中常常和它们接触，想深入了解。
  • 对前端或者前端工程化感兴趣，想开发一个完整的前端工具来练练手，熟悉其中的主要流程。
  • 想参与 G2 等开源社区的建设，却不知道从哪开始看代码。
  • 想参加 Vast Challenge ，ChinaVis Challenge 等数据分析的挑战赛，但是无从下手。
  • 想加入我们，但是怕通不过面试。

那么，接下来就让我们从认识苏菲的世界和了解数据可视化的基本流程开始，一起加入这段有意思的旅程吧！

参考资料

  • 数据可视化，陈为
  • Visualization Analysis & Design，Tamara Munzner
  • Beautiful.Visualization，Julie Steele/ Noah Iliinsky
  • Data-Driven Guides: Supporting Expressive Design for Information Graphics，Nam Wook Kim, Eston Schweickart, Zhicheng Liu, Mira Dontcheva, Wilmot Li, Jovan Popovic, and Hanspeter Pfister