掌握这些知识以后你将能：

  1. 阐述人类感知的基本原理，以及这些原理是如何应用到数据可视化或其他信息展示中的；
  2. 思考经典的和最近的数据可视化文献；
  3. 使用不同的方法将数据集可视化；
  4. 设计有效的交互式的信息展示；
  5. 通过不同的维度来评估不同的信息展示。

视觉感知

可视化的基础：编码方式（encoding）

我们如何将数据对应到某种视觉结构？
有很多种方式，比如长度、角度、色相、饱和度、阴影……

如何选择某种编码方式？
不同影响因素：

  • 感知精确度（perception accuracy）
  • 喻体&文化含义（metaphors & cultural significance）
  • 情绪&可记忆性（emotion & memorability）


标记&通道（marks & channels）**
Munzner & Maguire, chapter 5

  • 标记（mark）：图片中的基本视觉元素
  • 通道（channel）：控制标记的外观的一种方法
  • 区分强度（magnitude）和身份（identity）通道

image.png
通道“有效程度”的排名
基于：

  • 精确度 accuracy
  • 可区分度 discriminability
  • 可分性 separability
  • 提供视觉强调的能力 ability to provide visual pop-out
  • 提供感知分组的能力 ability to provide perceptual groupings

**
尽可能选择排名高的编码方式。

黄金法则（Munzner & Maguire, chapter 6）

  • 所见胜过所记 eyes beat memory
  • 清晰度优先于沉浸感 resolution over immersion
  • 先是总览，拉近再进一步筛选，有需求则显示细节 overview first, zoom and filter, detail on demand
  • 响应度是必要的 responsiveness is required
  • 在黑白显示中也要让它能被正确理解 get it right in black and white
  • 首先是功能，其次是形式 function first, form next
  • 避免不必要的3D效果
    • 平面的力量
    • 深度的差异
    • 遮挡会隐藏信息
    • 视角扭曲的危险
    • 倾斜的文本不易读
  • 避免不必要的2D效果


视觉装饰（embellishment）**
视觉装饰可以帮助记忆，但让搜索更慢（视觉装饰的位置有所作用）
视觉装饰只在某些情况中有助于概念理解

总结
视觉映射的选择应当结合应用要求和情境
我们是否需要……
精确度？
可记忆性？
理解的低难度？

评估

文献：信息可视化的实证研究：七个场景（Lam et al., ‘12）
4种关注于可视化过程的场景
3种关注于可视化本身的场景
关注过程：

  • 理解环境和工作的实操 understanding environments and work practices
  • 评估视觉数据分析和推理 evaluating visual data analysis and reasoning
  • 评估通过可视化传达的信息 evaluating communication through visualisation
  • 评估合作式的数据分析 evaluating collaborative data analysis

关注可视化：

  • 评估用户表现 evaluating user performance
  • 评估用户体验 evaluating user experience
  • 评估可视化算法 evaluating visualisation algorithms (no users!)

评估的阶段范围

  1. 设计前 pre-design，例如理解潜在用户的工作环境和工作流程。
  2. 设计 design，例如基于人类感知认知的情况，查清楚视觉编码和交互设计的空间。
  3. 原型 prototype，例如查看一种可视化是否达成了它的设计目标，查看某种原型和当今最先进的系统或技术的比较。
  4. 部署 deployment，例如查看某种可视化是如何影响工作流程和它支持的过程，以检验可视化的有效性和在该种领域种的使用。
  5. 重设计 redesign，例如通过识别可用性问题来改进当前的设计。

数据种类

时间序列 time-serial data

image.png
image.png
柱状图
柱状堆叠图
散点图
折线图

image.png
曲线拟合

image.png
地平线图
Mirroring does not hamper graphical perception
Layered bands are beneficial as chart size decreases
Estimation error stayed stable at larger chart sizes, but smaller sizes led to faster estimations.

多个时间序列的展示
image.png
评估多个事件序列的因素：

  • 空间管理 space management
  • 每个序列的空间 space per series
  • 身份 identity
  • 基准线 baseline
  • 视觉杂物 visual clutter

Results

  • Shared-space techniques (SG and BG) were faster than split-space techniques for the local Maximum task
  • Split-space techniques (SM and HG) were faster than shared-space techniques for the dispersed discrimination task
  • The slope task, with dispersed visual span, was special — SM and SG were fastest
  • Higher numbers of concurrent time series caused decreased correctness and increased completion time

image.png

缩放总览
Stack Zoom, TimeNotes, ChronoLenses

一些思考
对于评估方法的思考：
可以设置更细节的任务，例如搜索局部极值、斜率比较等等
对于编码方式的思考：
关注分辨率，考虑在有限空间内的展示效果

类别范畴

饼状图（通过角度判断，可能不太精确）
柱状图
环形图（通过弧长判断）
树图treemaps（层级数据 hierarchical data）
image.png

时间+类别：面积图（area chart）
image.png

表达定量数据
样例：散点图（scatter plots）
匹配到x,y位置的值
image.png

表格式数据：两种定量数据属性

分隔，顺序和对齐：
类别区域
列表：单键值
矩阵：双键值
体积方格：三键值
递归细分（recursive subdivision）：多个键值（例如n*m）

单键值
柱状图，堆叠柱状图
image.png
点和线图

双键值
群集热点图 cluster heatmap
image.png
散点图矩阵 scatterplot matrix
image.png
空间坐标轴方向

  • 直线布局 rectilinear layouts (最常见)
  • 平行分布 parallel layouts
  • 放射状分布 radial layouts

平行分布：平行坐标（parallel coordinates）
image.png

放射状分布：
放射柱状图(radial bar charts)
image.png

饼状图&极坐标区域图
image.png

空间分布密度 spatial layout density
稠密/稀疏 dense/sparse
空间填充 space filling

稠密的软件总览
image.png

空间填充
树图 treemaps
同心圆 concentric circles
网状圆 nested circes
image.png
image.png

*关于标签云 tag clouds
使用形容词-名词词对，而非简单的“出现频率最高”的词

一些思考：

  • 编码时可进行分组；可能会有替代方案，或细调后的多个变种。
  • 柱状图的顺序会影响搜索时间（增序或字母顺序）
  • 评估时：实地评估，可能不是很有用（真实使用环境下的非真实体验）

空间

为什么使用地图？
空间关系，熟悉程度，情感因素……
为什么不使用地图？
信息量，精确度，空间限制……

点，线
区域或“泡泡”图（area or ‘bubble’ charts）
分级统计图（choropleth map）
image.png

多个小图排列表现变化趋势
image.png

标量域 scalar fields
数据在空间中连续
例如：海拔
与分级统计地图相比-每个区域只有一个数据点

等量线 isocontours
等值面 isosurfaces
直接体绘制 direct volume rendering
向量域 vector fields （多值）

色板推荐
Light & Bartlein example recommended colour schemes
image.png
Munzner书籍第10章的颜色推荐
image.png

网络

图的可视化相关任务分类
与图（graph）相关的关键术语和定义：
节点&边 nodes & edges
路径 paths
子图 subgraphs
连通区域 connected components
集群 clusters

树是一种特殊的、更简单的图 - 无向（undirected），非周期性（acyclical）

图的可视化&布局
一个复杂的问题，有很多方法
image.png
最常见的编码方式：节点-连接（node-link diagrams）

image.pngimage.png

拥有大量节点的树：节点-连接水平矩形布局（rectangular horizontal node-link layout）；节点-连接气泡树布局（bubble tree node-link layout）
image.png

力导向摆置 force-directed placement (FDP)
image.pngimage.png

Scalable Force-Directed Placement (SFDP)

image.png

矩阵视图
相邻矩阵 adjacency matrix view
image.png

Containment: Hierarchy Marks
treemaps
grouseFlocks

网络可视化的选择
何时使用节点-连接？ 更直观；容易看到集群和规律；数据种类（可见地与树或者网络相似）；熟悉程度；对网络地情感反应？ 不应该使用的时候：当比较的精确度有要求时。当需要搜索某个对象时。当数据量非常庞大时。算法可能造成随机的效果，数据的尺度可能发生变化，无法提前预知外形。

何时使用矩阵？ ……何时两者都不采用？……

关系与差异

可视化数据之间的关系
散点图中的相关关系 Correlations on scatter plots
image.png

加上拟合曲线的散点图 plus fitted curve
image.png

2个以上维度的散点图矩阵 for more than 2 dimensions
image.png

高维度的散点图矩阵 higher dimensional
image.png

直方图 （以及多个直方图的组合）Histograms
image.png

概率密度函数 Probability density functions
image.png

发现差异 Spotting Differences
热点图 heatmaps
每行一个项目
每列一个特征
image.png

星形图 star charts
image.png
星形图变种
image.png

南丁格尔图 Nightingale charts（比较面积）
image.png

平行坐标图 Parallel coordinate plots
image.png

操纵视图
改变视觉编码
改变对齐方式（如在多维柱状图中）
选择区域数据 brushing
概览和细节

总览表格
image.png

减少项目和属性 Reduce Items and Attributes （Munzner书籍13章）

  • 减少需要可视化的数据：
    • 过滤或聚合（比如求平均）
    • 以上均可以应用到项目中或属性中
  • 这个过程经常是交互式的，所以实际上这可以是“减少”或“增加”

过滤项目：隐藏一些项（比如根据数值）
通过“scented widgets”过滤元素，来获得整体范围或分布的理解
image.png

过滤特征（而不是元素）

直方图和箱型图（box plots）是聚合的例子
箱型图的延展：瓶型图 vase plots
image.png

维度减少：处理数据，投影至低维度空间
主成分分析 principal component analysis

视觉之外

上下文中的可视化 视觉表示之外

一些例子：
超市购物车上的评价系统
How to nudge in Situ; Kalnikaite et al 2011

image.png

街道路面上的调研问卷
“Everyone is talking about it!” Koeman et al
image.png

交互式桌面，让小组成员更直接地了解自己的参与程度。当参与者对发言平衡问题比较敏感时，桌子能够有效地平衡谈话。An Interactive Table […]; Bachour, et al, 2010
speaker-based, topic-based.
image.png

视觉障碍者，感受到你所听到的 Feeling what you hear; Wall & Brewster, 2006
触觉增强
image.png

Clutching at straws; McGookin et al, 2010
使用可触的交互，提供对图像的非视觉的接触方法
image.png

一些想法：
评估可视化的方法可以有：
访谈
观察
任务完成时间/错误率
情境研究 in situ study (2 conditions)
实地部署 field or in situ trial/deployment
实验室研究 lab study