这是我参与「第五届青训营 」笔记创作活动的第15天
课程重点:
- 了解数据可视化的概念和基本原则
- 能够识别出不好的,甚至是有误导性的可视化呈现。
- 了解一些面向前端的数据可视化工具
数据可视化的概念和基本原则
什么是数据可视化
统计图表、地图。。。
任何一种将数据转换成可视化呈现的东西。
科学可视化(科学实验数据)、信息可视化(抽象数据)、可视分析。
为什么要数据可视化
- 记录信息
- 分析推理
- 证实假设
- 交流思想
可视化的设计原则和具体方法
原则:能正确的表达数据中的信息而不产生偏差和歧义。
一个出色的可视化设计可以在最短的时间内,使用最少的空间、用最少的笔墨为观众提供最多的信息内涵。
透视失真
如果数字是由视觉元素表示的,那么他们应该与视觉元素的感知程度成正比。
使用清晰、详尽的标签标注数值。
图形设计&数据尺度
图形的每一部分都会产生对其的视觉预期。
例子:轴刻度,我们期望它从始至终保持连续和一致。
数据上下文
最大化数据墨水占比(Data-Ink Ratio)
数据墨水:可视化图形中不可擦除的核心部分被称为数据墨水。
擦除数据墨水将减少图形所传达的信息量。
数据墨水占比:可视化图形中用于展示核心数据的墨水在整体可视化所使用的墨水中的比例。
能够识别出不好的,甚至是有误导性的可视化呈现
视觉感知
可视化致力于外部认知,也就是说,怎样利用大脑以外的资源来增强大脑本身的认知能力。
- 人类视觉系统观察的是变化,而不是绝对值,并且容易被边界吸引。
- 在可视化设计中,设计者需要充分考虑到人类感知系统的这些现象,以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素
- 格式塔学派的理论核心是整体决定部分的性质,部分依从于整体。结构比元素重要,视觉形象首先作为统一的整体被认知。感知的事物大于眼睛见到的事物。
- 格式塔理论 (Gestalt Laws) 较为系统的对人类如何发现图形元素之间的相关性进行了全面总结被广泛的应用在了视觉设计当中。
就近原则
- 当视觉元素在空间距离上相距较近时,人们通常倾向于将他们归为一组。
- 将数据元素放在靠近的位置可以突出它们之间的关联性。
相似原则
- 形状、大小、颜色、强度等属性方面比较相似时,这些物体就容易被看作一个整体。
连续性原则
- 人们在观察事物的时候会很自然地沿着物体的边界,将不连续的物体视为连续的整体。
闭合原则
- 有些图形可能本身是不完整或者不闭合的,但主体有一种使其闭合的倾向,人们就会很容易地感知整个物体而忽略未闭合的特征。
共势原则
- 如果一个对象中的一部分都向共同的方向去运动,那这些共同移动的部分就易被感知为一个整体。
对称性原则
- 对称的元素被视为同一组的一部分。
图形与背景关系原则
- 大脑通常认为构图中最小的物体是图形,而更大的物体则是背景。
- 跟凹面元素相比,凸面元素与图形相关联更多些
视觉编码
视觉编码是一种: 将数据信息映射成可视化元素的技术。
可视化符号
用于在可视化当中表现数据元素或元素之间的关联
- 视觉通道(Channel)
基于数据属性,控制可视化的符号展现样式,例如点根据其所代表的数据属性的不同可有不同的形状与颜色 - 视觉通道有两种类型
数量通道 (Magnitude Channel)用于显示数据的数值属性 (定量/定序)包括: 位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。
标识通道 (ldentity Channel)用于显示数据的分类属性 (是什么/在哪里)包括: 空间区域、色向、动向、形状
当利用数量通道编码表示数值属性时:位置通道是最为精确的,其次是长度角度、面积、深度、色温、饱和度、曲率最后是体积。
当利用标识通道表示分类属性时:划分空间区域最为有效,其后依次是 色向动向、形状。
可视化工具介绍
D3.js是用于数据可视化的开源的JavaScript函数库。
Vega是一种可视化语法。通过其声明式语言,用JSON格式描述可视化,通过canvas或者svg描述效果。
G2是一套面向常规统计图表,以数据驱动的高交互可视化图表。
ECharts