这是我参与「第五届青训营 」伴学笔记创作活动的第16天
本节课的主要内容
- 了解数据可视化的概念和基本原则
- 能够识别出不好的，甚至是有误导性的可视化呈现
- 了解一下面向前端的数据可视化工具
什么是数据可视化
- 数据可视化是指将数据通过图表的方式传递出来，让用户能够快速、准确地理解所要表达的信息，从而提高沟通效率。
数据可视化的分类
- 科学科学化
- 科学实验数据的直观展示
- 信息可视化
- 对抽象数据的直观展示
- 可视分析
- 对分析结果的直观展示，及互相式反馈，是一个跨领域的方向
为什么要数据可视化
- 记录信息
- 分析推理
- 证实假设
- 交流思想
可视化的原则
- 能够正确地表达数据中的信息而不产生偏差与歧义
常见的错误可视化
- 透视失真
- 图形设计&数据尺度
- 数据上下文
透视失真
- 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比
- 使用清晰、详细的彻底的标签，以避免图形失真和含糊不清
图形设计&数据尺度
- 图形的每一部分都会产生对其的视觉预期(visual expectation)
- 这些预期往往决定了眼睛实际看到的东西
- 错误的数据洞察，产生于在图形的某个地方的不正确的视觉预期推断
- 一个典型的例子：轴刻度，我们期望它从始至终能够保持连贯且一致
可视化原则
- 一个出色的可视化设计可在最短的时间内，使用最少的空间、用最少的笔墨为观众提供最多的信息内涵
认知过程
- 认知心理学将认知过程看成由信息的获取、分析、归纳、解码、存储、概念形成、提取和使用等一系列阶段组成的按一定程序进行的信息加工系统
- 科学领域中，认知是包含注意力、记忆、产生和理解语言、解决问题，以及进行决策的心里过程的组合
格式塔理论
就近原则(Proximity)
- 当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组
- 将数据元素放在靠近的位置，可以突出他们之间的关联性
相似原则(Similarity)
- 形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体
连续性原则(Continuation)
- 人们在观察事物的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体
闭合原则(Closure)
- 有些图形可能本身是不完整或者不闭合的，但主体有一种使其闭合的倾向，人们就会很容易地感知整个物体而忽略未闭合的特征
共势原则(Common movement)
- 如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体
对称性原则(Symmeetry)
- 对称的元素被视为同一组的一部分
图形与背景关系原则(Figure-ground)
- 大脑通常认为构图中最小的物体的图形，而更大的物体则是背景
- 跟凹面元素相比，凸面元素与图形相关联更多些
视觉编码
可视化符号
- 当表示元素时Mark包括：点、线、、面
- 当表示关系时Mark包括：闭包、连线
视觉通道(Channel)
基于数据属性，控制可视化的符号展开样式，例如，点根据其所代表的数据属性的不同可有不同的形状与颜色
视觉通道有两种类型
- 数据通道(Magnitude Channel)
- 基于显示数据的数值属性(定量/定序)
- 包括：位置、长度、角度、面积、深度、色温、饱和度、曲率、体积
- 标识通道(ldentity Channel)
- 用于显示数据的分类属性(是什么/在哪里)
- 包括：空间区域、色向、动向、形状
面向前端的可视化工具
D3
- D3.js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一
Vega
- Vega是一种可视化语法。通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成视图
G2
- 一套面向常规统计图标，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，你可以无需关注图表各种繁琐的实现细节，一条语句可以使用Canvas或SVG构建出各种各样可交互的统计图标
ECharts
- ECharts，一个使用JavaScript实现开源的可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender,提供直观，交互丰富，可高度个性化定制的数据可视化图标
