数据可视化基础 | 青训营笔记

145 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第16天

01.什么是数据可视化

什么是数据可视化

Anything that converts data into a visual representation(like charts, graphs, maps, sometimes even just tables) 任何将数据转换为可视化表示形式的东西(如图表,图形,地图,有时甚至只是表格)

数据可视化分类

image.png

为什么要数据可视化

  • 记录信息
  • 分析推理
  • 证实假设
  • 交流思想

02.可视化设计原则和方法

原则

能够正确地表达数据中的信息而不产生偏差与歧义

常见数据可视化错误

透视失真

  • 如果数字是由视觉元素表示的,那么他们应该与视觉元素的感知程度成正比
  • 使用清晰、详细和彻底的标签,以避免图形失真和含糊不清

image.png

图形设计 & 数据尺度

图形的每一部分都会产生对其的视觉预期(visual expectation):

  • 这些预期往往决定了眼睛实际看到的东西
  • 错误的数据洞察,产生于在图形的某个地方发生的不正确的视觉预期判断 image.png

数据上下文

image.png

谎言因子

image.png

可视化设计原则

image.png

  • 准确地展示数据 Show the data, and tell the truth
  • 节省笔墨 Use the least amount of ink
  • 节省空间 Don't waste space
  • 消除不必要的“无价值”图形 Eliminate non-essentials and redundancies
  • 在最短地时间内传达最多的信息 Give the viewer the greatest number of ideas in the shortest time

最大化数据墨水占比 Data-ink Ratio

  • 可视化图形有墨水和空白区域构成
  • 数据墨水:可视化图形当中不可擦除的核心部分被称之为“数据墨水”
  • 擦除数据墨水将减少图形所传达的信息量
  • 数据墨水占比:可视化图形中用于展示核心数据的"墨水"在整体可视化所使用的墨水中的比例 image.png 例子: image.png

案例:

  • 绝大多数墨水都是数据墨水
    • 用于绘制散点和对应标签
  • 10%-20%为非数据墨水
    • 用于绘制坐标轴和刻度线,
    • 并非所有的非数据墨水都没有用(例如坐标轴信息) image.png

两个擦除原则:

  • 擦除非数据墨水
  • 擦除冗余的数据墨水
  • 非数据墨水是指不能描绘有价值信息的墨水:
    • 有时,非数据墨水会使数据变得混乱不堪
    • 并非所有的非数据墨水都没有用(例如坐标轴信息)
  • 冗余的数据墨水描述了信息,但它重复显示了信息 image.png

可视化设计方法

  • 最重要的是展现数据 Above all show the data
  • 合理范围内,最大化数据墨水占比 Maximize the data-ink ratio,within reason
    • 擦除非数据墨水 Erase non-data-ink,within reason
    • 擦除冗余的数据墨水Erase redundant data-ink

03.视觉感知

可视化致力于外部认知,也就是说,怎样利用大脑以外的资源来增强大脑本身的认知能力

什么是视觉感知

  • 感知
    • 是指客观事物通过人的感觉器官在人脑中形成的直接反映
  • 感觉器官
    • 眼、耳、鼻、神经末梢
  • 那么,视觉感知就是客观事物通过人的视觉在人脑中形成的直接反映

认知过程

image.png

相对判断和视觉假象

image.png

结论

  • 人类视觉系统观察的是变化,而不是绝对值,并且容易被边界吸引。
  • 在可视化设计中,设计者需要充分考虑到人类感知系统的这些现象,以使得设计的可视化结果不会存在阻碍或者误导用户的可视化元素

格式塔学派

image.png

格式塔理论

image.png

image.png

image.png image.png image.png image.png image.png image.png image.png

04.视觉编码

Jacques Bertin

image.png

视觉编码(Visual Encoding)

image.png

image.png

可视化符号(Mark)

image.png

视觉通道

image.png

视觉编码的优先级

image.png

05.基础统计图表

柱状图(Bar)

image.png

饼图(Pie)

image.png

散点图(Scatter)

image.png

折线图

image.png

06.面向前端的可视化工具

D3

简单柱状图示例 image.png

Vega

G2

Echarts