这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
重点内容:🍈数据可视化🍈
🍉前言🍉
生活在大数据的时代，前端工作已经不限于前端本身，呈现数据的价值显得尤为重要。今天，我们就来看一看数据可视化的相关内容吧！
🍊什么是数据可视化🍊
Anything that converts data into a visual representation (like charts, graphs, maps, sometimes even just tables)
任何将数据转化成可以呈现的形式都称作数据可视化。比如表格，图表，地图，词云，表格等等。
🍋数据可视化分类🍋
- 科学可视化：科学实验数据的直观展示，比如各种分子模型，序列数据，各种组合框架等等，常用于生命科学，物理化学等领域。
- 信息可视化：对抽象数据直观展示，包括像文本、层次结构内容、地图等等。更关注抽象和更高维度的数据。
- 可视化分析：对分析结果进行直观展示，及交互反馈，是一个跨领域的方向。可视化的目的就是为了进行分析！
🍍可视化设计原则🍍
能够正确地表达数据中的信息而不产生偏差与歧义！！！
An excellent visualization design givesto the viewer the greatest number ofideas in the shortest time with the leastink in the smallest space.
一个出色的可视化设计可在最短的时间内，使用最少的空间、用最少的笔墨为观众提供最多的信息内涵。
——Edward R. Tufte
透视失真
这是乔布斯在苹果发布会上的一张PPT，观察这张图，你是否会感觉绿色的占比很大？但是显示数值绿色仅占19.5％，而紫色拥有着21.2％的占比，由于图3D的，根据透视空间中近大远小原则，于是它所呈现的视觉效果就是比紫色的要大一些，而绿色正是代表了苹果公司，这样一来便达到了宣传的目的！
- 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比。
- 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。
图形设计 & 数据尺度
试想一下，如果抹掉仪表板上的数字，是否能立刻看出当前指针所指向的数据元素？如果按照左边显示的方式，就可以立刻看到当前时速而不需要去做出反应。
图形的每一部分都会产生对其的视觉预期 (visual expectation)
这些预期往往决定了眼睛实际看到的东西
错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断。
一个典型的例子:轴刻度，我们期望它从始至终能够保持连贯且一致。
数据上下文
制作的过程中，要添加必要的描述信息，否则做出来的图，不能够被一眼看出。业界有一种十分巧妙的说法：
如果受众不能够在5s之内读懂你的可视化产品，那他就不是一个好的可视化产品。
🍎Data——ink Ratio🍎
最大化数据墨水占比(Data-lnk Ratio）
- 可视化图形由墨水和空白区域构成
- 数据墨水:可视化图形当中不可擦除的核心部分被称之为“数据墨水
- 擦除数据墨水将减少图形所传达的信息量
- 数据墨水占比:可视化图形中用于展示核心数据的“墨水”在整体可视化所使用的墨水中的比例
举个例子：
这张图就是一个比较优秀的可视化作品。数据墨水包括散点图绘制的散点和标签内容以及说明等信息。给人的感受很直观，很清晰。
- 绝大多数墨水都是数据墨水
- 用于绘制散点和对应标签
- 10%-20%的墨水是非数据墨水
- 用于绘制坐标轴和刻度线
- 并非所有的非数据墨水都没有用(例如坐标轴信息)
🍏视觉感知🍏
可视化致力于外部认知，也就是说，怎样利用大脑以外的资源来增强大脑本身的认知能力。
什么是视觉感知？
认知心理学中，将 认知过程 看成由信息的获取、分析、归纳、解码、储存概念形成、提取和使用等一系列阶段组成的按一定程序进行的信息加工系统。
科学领域中，认知是包含注意力记忆、产生和理解语言、解决问题以及进行决策的心理过程的组合。
小结
- 人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引。
- 在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素。
格式塔理论
上述图片一眼看上去，总会先看出是一个人脸，随后才会慢慢意识到是一个其他选择的组合。
- 格式塔学派的理论核心是整体决定部分的性质，部分依从于整体。结构比元素重要，视觉形象首先作为统一的整体被认知。感知的事物大于眼睛见到的事物。
- 格式塔理论(Gestalt Laws) 较为系统的对人类如何发现图形元素之间的相关性进行了全面总结被广泛的应用在了视觉设计当中。
🍒总结🍒
数据可视化的设计是一门重要的学问，涵盖的学科交叉很强。做好一个可视化产品并不容易，只有秉承着基本原理，不断实践多学习多观察，才能够设计出优秀的可视化作品！
