数据可视化|青训营笔记

215 阅读6分钟

这是我参与「第四届青训营笔记」创作活动的第二天。今天学习了数据可视化,数据可视化就是将数据转换为可视化对象,我的理解是数据可视化就是将数据转换为图表等形式来更好地呈现信息,比如如果要了解一组数据的变化规律,可以先将这组数据绘制成折线图,看看这组数据是否存在线性规律。

1 数据可视化分类

  • 科学可视化:科学实验数据的直观展示。
  • 信息可视化:对抽象数据的直观展示。
  • 可视分析:对分析结果的直观展现,及交互式反馈,是一个跨领域的方向。包含人机交互(机器学习)、数据分析(信息抽取、信息挖掘)、可视化(信息可视化、科学可视化)。

2 为什么要数据可视化

根据数据可视化可以帮助人们更直观学习东西、获取知识。数据可视化可以记录信息、分析推理、证实假设、交流思想。

3 可视化设计原则和方法

可视化原则:能正确表达数据中的信息而不产生偏差与歧义。

3.1常见的可视化错误

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

(2)图形设计&数据尺度:图形的每一部分都会产生对其的视觉预期:

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

(3)数据上下文:展示的时候最好把完整的可视化信息展示,不能只展示一部分,不然可能会导致误判。

需要控制图形中的谎言因子【Lie Factor,LF,衡量可视化中表达的数据量与数据之间的夸张程度的度量方法。谎言因子=数据所对应的图形元素的相对变化量/数据的真实变化量】在合适范围。

  • 当LF=1,认为图表没有对数据进行扭曲,是一个可信的可视化设计。
  • 在实际当中,应当确保各部分图形元素的LF在[0.95,1.05]范围内,否则,所产生的图表认为已经丧失了基本可信度。

3.2 可视化原则

(1)准确地展示数据(最重要) (2)节省空间 (3)消除不必要的“无价值”图形 (4)在最短时间内传达最多的信息 (5)节省笔墨 合理范围内最大化数据墨水比:

  • 可视化图形由墨水和空白区域构成
  • 数据墨水:可视化图形当中不可擦除的核心部分被称为“数据墨水”。数据墨水可以用来绘制散点和对应标签。非数据墨水值得是不能描绘有价值信息的墨水,并非所有的非数据墨水都没有用,它可用于绘制坐标轴和刻度线。
  • 擦除数据墨水将减少图形所传达的信息量
  • 数据墨水占比:可视化图形中用于展示核心数据的“墨水”在整体可视化所使用的墨水中的比例

两个数据擦除的原则:擦除非数据墨水、擦除冗余的数据墨水(重复显示信息的数据墨水)。

4 视觉感知

视觉感知就是客观事物通过人的视觉在人脑中形成的直接反映。 格式塔理论:较为系统地对人类如何发现图形元素之间的相关性进行了全面总结。

  • 就近原则:当视觉元素在空间距离上相距较近时,人们通常倾向与将他们归为一组。将数据元素放在靠近的位置,可以突出它们之间的关联性。
  • 相似原则:形状、大小、颜色、强度等属性方面比较相似时,这些物体就容易被看作一个整体。
  • 连续性原则:人们在观察事物的时候很自然地沿着物体的边界,将不连续的物体视为连续的整体。
  • 闭合原则:有些图形可能本身是不完整或者不闭合的,但主体有一种时期闭合的倾向,人们就会很容易地感知整个物体而忽略未闭合的特征。
  • 对称性原则:对称的元素被视为同一组的一部分。
  • 图形与背景关系原则:大脑通常认为构图中最小的物体是图形,而更大的物体则是背景。跟凹面元素相比,凸面元素与图形相关联更多些。

5 视觉编码

视觉编码是已汇总将数据信息(属性+值)映射成可视化元素(可视化符号+视觉通道)的技术。

可视化符号:在可视化中表现数据元素(点、线、面)或元素之间的关联(闭包、连线)。

视觉通道:基于数据属性,控制可视化的符号展现样式,例如,点可以根据代表的数据属性不同有不同的形状和颜色。 视觉通道有数量通道(像素数据的数字属性:位置,长度,角度、面积、体积、饱和度等,比如饼图)、标识通道(显示数据的分类属性,包括空间区域,动向、形状等)。

视觉编码优先级:

  • 利用数量通道编码表示数值属性:位置通道是最精确的,其次是长度、角度、面积、深度、色温、饱和度、曲率,之后是体积。
  • 利用标识通道表示分类属性时:划分空间区域最为有效,其后依次是色向、动向、形状。

6 前端可视化库

  • D3:D3.js是用于数据可视化的开源的JavaScript函数库,被认为是最好的JavaScript可视化框架之一。上手一定门槛。
  • Vega:一种可视化语法。通过其声明式语言,可以用JSON格式描述可视化的视觉外观和交互行为,并使用Canvas或SVG生成视图。Vega更推荐使用。
  • G2:一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用G2,可以无需关注图表各种的繁琐的实现细节,一条语句即可使用Canvas或SVG构建出各种各样的可交互统计图表。
  • ECharts:使用JavaScript实现的开源可视化库,可以运行在PC和移动端,兼容大部分浏览器。提供直观,交互丰富,可高度个性化定制的数据可视化图表。

7 相关学习资料

www.woshipm.com/data-analys… www.zhihu.com/question/23…

  • 《Fundamentals of Data Visualization》
  • 《The Grammar of Graphics》
  • 《Interactive Data Visualization for the Web》
  • 《Making Maps: A Visual Guide to Map Design for GIS》
  • 《信息可视化交互设计》
  • 《Visualization Analysis & Design》
  • 《The Visual Display of Quantitative Information》

工具: