Summermickey

这一节主要讲地图。

1.面量图 (Choropleth Maps)

用不同颜色、亮度来表示在明确地理单元上的数量，是不连续的、可区分为面的数据，而不是个别点上的数据。常用的热度图(Heat Map)就是一种。

例: UFO目击分布 (摘自 Allen Hynek Center for UFO Studies, www.scifi.com)

2.比例符号图 (Proportional Symbol Maps)

用相同符号，不同大小来表示明确地理单元上的数量。这种地图看上去很有动感:)

例：2004总统竞选支持率 (摘自Matthew Ericson, NY Times)

3.等值线地图 (Isopleth Maps)

相同值处用线连起来。地理书上的表示平原盆地的地形图就是这样，气压图也是一个例子。

例：等磁线-第一幅等值线地图 (摘自dmond Halley, 1701)

4. 统计地图 (Cartogram)

以地理信息为基础，显示统计信息，通常以夸张或变形的手法表现。

例：世界人口分布 (摘自Mark Newman, Univ. Michigan)

5. 流向图 (Flow Maps)

流向图表简单，前几篇举过的拿破仑出兵就是一个例子。

6. 实时地图 (Time-Varying Maps)

例如Google显示交通状况的地图。

7. 主题地图 (Thematic Maps)

例：网络世界地图 (摘自XKCD)

这一节主要讲统计图

1. 比较

• 柱状图

例一: 表示方向

例二: 表示正负

例三: 交代背景很重要

(下图摘自课件)

例四: 不要3D!

2. 比例

• 饼图

例一: 太多slice不好阅读

例二: 不一定比柱状图有效

例三: 计算一定要正确!

例四: 不容易对比

表格和柱状图表示变化更明显 - 人对面积和角度的变化不太敏感。(下图摘自VizWiz Blog)

例五: 不要3D!

利用3D和抓人眼球的亮绿色使Apple的市场份额看起来比实际大。

转化成柱状图后

• 叠加图的反思

叠加图一个最大的问题是不能直观地读出数值。

例一:

3. 分布

• 直方图

直方图是常用的统计图。比较重要的一个参数是区间宽度，区间宽度会影响直方图分布。(下图摘自课件)

• 密度图

(下图摘自课件)

• 盒须图

(下图摘自课件)

4. 关联

• 散点图

散点图是朴实又必要的表达。我们常用的统计指标几乎都是概括性的，但散点图能直接告诉我们数据长什么样子。(下图摘自课件)

但是画散点图时我们也要注意散点过于密集的问题。(下图摘自课件)

• 拟合曲线

(下图摘自课件)

5. 趋势

柱状图，折线图都能用来表示趋势。

这一节主要讲颜色

1. 模拟视觉缺陷者的世界

推荐www.vischeck.com，只要输入目标网站地址，再选择视觉缺陷的种类，就能模拟该患者眼中的网站。

2. 色彩空间 (这里太深奥了)

(1) RGB

• 加色法 (将红光、绿光、蓝光混合)

• 使用于电脑屏幕

• 感知上不尽相同

(2) HSL

• Hue: 人们认为的颜色；Saturation: 灰度；Luminance: 亮暗

• 感知上不尽相同

(3) CIE LAB/LUV

• 感知上相同

• L: 亮暗；AB/UV: 趋近R/G和Y/B相对的色彩通道

• LAB: 印刷效果最好；LUV: 显示屏效果最好

3. 为数据上色

名义变量，表示不同种类: Colin Ware在Information Visualization里建议可以使用

• 红，绿，黄，蓝，黑，白

• 粉，青，灰，橙，棕，紫

序数变量，表示顺序：不同的色调很难排序，所以用同一色调但亮暗或饱和度不同来表示顺序更有效

例：地图上色

在不同地区涂上不同颜色来表示某变量的地理分布是很受欢迎的一种手法，我经常在选择颜色上花费很多时间，虽然不是总能找到那个看起来非常"slick"的组合，但也有一些小心得，在这里分享一下，欢迎大家积极试验探讨～

• 州，省等分界线用白色或者浅灰色会比较好

• 在没有把握的情况下，尽量不要选择大热的颜色，比如亮红，亮黄，当然也不要选择大多数人都不能接受的橄榄色

• 数据区间不要超过5个(我老板比较喜欢4个)，每个区间的的染色要容易区分。如果数据是表示顺序的话，一般使用同一色调，同时亮暗或饱和度的差距要拉开。

• 很多时候比起其他颜色，灰色可能是最好的

• 彩虹色地图和3D效果几乎一样糟糕。大家可以参考文章Dear NASA: No More Rainbow Color Scales, Please

• 推荐一个自动生成地图颜色的小网站 Color Brewer用户可以选择数据类型、色调、区间数量，还可以选择适合色盲色弱或适合打印等等，当然还可以自己选择颜色～是个好工具

最后引用Tufte的话来结束

…avoid catastrophe becomes the first principle in bringing color to information: Above all, do no harm." -- E.R. Tufte

附上这节的推荐阅读和豆瓣链接

• A Field Guide to Digital Color by Maureen Stone
• Color for the Sciences by Jan J. Koenderink

这一节主要讲感知 (Perception)

1. 视觉通道 (Visual Channel): 形状、颜色、运动等等

视觉通道有时被分离，有时被整合。

• 分离: 我们能独立地判断两个不同的视觉通道。

• 整合: 两个相同的视觉通道会被当作一个整体来看待。

例一: 左边的小柱子由颜色和长度两个不同的视觉通道构成，可以清晰地分辨出两个纬度上的变化，而右边的小柱子都是由长度构成，所以人们更倾向于将它们合并成面积而描述它们“变大了。”

例二: 下面的地图很多人认为是一个不太成功的作品，包括给我上这堂课的Hanspeter Pfister 教授。这组地图用美国人口普查数据来研究美国是否最富有的人享受了最好的教育。最左边的三幅小地图分别显示了:

• 红色: 阅读成绩的分布，颜色越深的地区成绩越好

• 黄色: 写作成绩的分布，颜色越深的地区成绩越好

• 蓝色: 收入分布，颜色越深的地区收入越高

接下来，把这三副地区重叠在一起，我们能得出一个直观的结论: 颜色深的地方一定是收入和成绩都好的地区，颜色浅的地方收入比较低成绩也不太好。作者用了同一个视觉通道－－颜色的变化来描述三个变量，最终读者只能把三个变量当作一个整体来判断，而对于变量之间的相互影响却很难察觉。当然对色彩知识有深入了解的同学也许可以得出深刻的结论：红黄蓝三种颜色各自从深到浅为4层，排列组合有4X4X4=64种结果，那么你绝对需要另一张表格来解释这64种颜色分别代表了什么意思，还不算这64种颜色中大部分是极为相近的。所以无辜的观众第一眼看上去只可能以为是屏幕分辨率出了问题。

2.如何突显重要的事物

并不是每一个视觉通道都能突显重要的事物。下面的例子就告诉我们颜色比形状更容易区别。

3.视觉变量理论 - Jacques Bertin

Bertin是法国制图和符号学的专家，在1967年提出了视觉变量理论，要点见下图。我的理解如下 (欢迎讨论):

• 三种符号: (顶端横轴从左至右)点、线、面

• 视觉通道: (左端纵轴从上至下)位置、长度、亮暗、纹理、颜色、角度、形状。其中，除了位置是由x和y两个维度确定的，其余都属于第三维度

• 这样一个3X7矩阵向我们展示了这三种基本符号如何随着不同的视觉通道而变化，因此也能帮助找到对于不同的符号，哪一种视觉通道是最有效的

4.数据类型和视觉通道

基本数据类型有四种: 名义变量(categorical，比如男女)、序数变量(ordinal，比如大中小)、等距变量(interval，比如5摄氏度、1982年)和比率变量(ratio，一般的数字度量比如2米、5千克)。

1967年，Bertin给出了他关于不同数据类型在不同视觉通道中有效性的意见(见下图)。注: 等距变量如果基点确定的话和比率变量很相似，所以两者归并为数量变量(Quantitative)来论。

	名义变量	序数变量	数量变量
位置	√	√	√
长度	√	√	√
亮暗	√	√	~
纹理	√	~	x
颜色	√	~	x
角度	√	x	x
形状	√	x	x

√ = Good, ~ = Ok, x = Bad

这里我们可以看出，对于我们经常接触的数量变量，比较有效的呈现方式是位置和长度，人对位置和长度变化的估计比其他方式更准确。1984年Cleveland和McGill的一项实验就向我们证明了我们平时大量使用的饼图(pie chart)，其实并不比柱状图(Bar Graph)更有效。

5."看"和"看见"

人的注意力都是有选择性的。由于视觉产生的生理机制，观察也许从不会“客观”。个体大部分视觉信息是观察的总结，往往缺乏细节，而处理某一特征的注意力通常抑制处理其他特征，所以这更要求我们一定要突出重要的信息。

Bryan Connor在The Why Axis中有一篇批评路透社关于希腊政党选举数据图的文章。我截来图供大家吐槽，原文链接在这里。图一是路透社的设计，图二是重新设计，高下立断。

这节的最后还是附上扩展阅读和其豆瓣链接

• Visual Thinking for Design by Colin Ware

• Vision and Art: the Biology of Seeing by Colin Ware

• Semiology of Graphics by Jacques Bertin

• The Grammar of Graphics by Leland Wilkinson

与Tufte的极简风格相对，Standford的Pat Hanrahan认为数据视觉化也需要引入主观纬度，它们包括

• 美感: 有吸引力的东西看上去比没有吸引力的东西有价值

• 风格: 帮助呈现幕后统一的品牌，过程和设计师

• 趣味: 鼓励人们进行实践和探索

• 生动: 让设计作品更容易被记住

另外美国女作家Robin Patricia Williams提出了CRAP原则:D，具体说来是

• Contrast (对比): 如果两个物体是不同的，那就在设计上突出这一点，使它们非常不一样

• Repetition (重复): 在整体上，重复重要的设计元素

• Alignment (对齐): 不要随意在页面上堆放物体，每个物体都要和其他物体产生视觉关联

• Promixity (接近): 把相关物体放在一起，视觉上的接近暗含了一种内在联系

CRAP原则在设计名片时用到得最多[so make sure your business card is CRAP!]，下面给个例子:

最后提一下Gestalt Principles [Gestalt原来是德语，意思是form]，中文有翻译成格式塔原则或完形原则。应用在视觉设计上主要是说视觉整体的印象会超过每个单一个体产生的视觉刺激。典型的例子就是下图的三角形，但是组成这个三角形的元素没有一个是三角形。更详细的解释度娘中有，见百度百科格式塔。

附上这节的扩展阅读和豆瓣链接啦

• Stephen Few: Show Me the Numbers

• Stephen Few: Information Dashboard Design

• Stephen Few: Now You See It

• Garr Reynolds: Presentationzen

• Garr Reynolds: Presentationzen Design

再附上Stephen Few设计的Graphic Design IQ Test，小常识，测试下吧～