这是我参与「第四届青训营 」笔记创作活动的第3天
格式塔理论
"格式塔"在德语中意为"统一的整体"。第一个格式塔原理是由德国心理学家Max Wertheimer,Kurt Koffka和Wolfgang Kohler在1920年代设计的,他们旨在了解人类通常如何从周围的混乱刺激中获得有意义的感知。格式塔的原则有许多,今天主要学习了其中七种。
- 就近原则
- 相似原则
- 连续性原则
- 闭合原则
- 共势原则
- 对称性原则
- 图形与背景关系原则
面向前端的可视化工具
D3
D3 支持将任意数据绑定到DOM,然后将数据驱动的转换应用于文档。例如,可以通过D3用数字数组生成HTML表。或者,使用相同的数据创建具有平滑过渡和交互的交互式SVG条形图。 D3不是一个试图提供所有可能的功能的单一框架。相反,D3解决了问题的症结:基于数据有效操作文档。这提高了灵活性,公开了HTML,SVG和CSS等Web标准的全部功能。D3消耗极小,速度极快,支持大型数据集以及交互和动画的动态行为。
Vega
Vega 为各种可视化设计提供了基本的构建块:数据加载和转换,比例,地图投影,轴,图例和图形标记,如矩形,线,绘图符号等。可以使用反应信号来指定交互技术,这些信号动态修改可视化以响应输入事件流。
G6
G6是一个简单、易用、完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
ECharts
ECharts是使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
什么是数据可视化
Anything that converts data into a visual representation(like charts, graphs, maps, sometimes even just tables) 任何一种数据转化成为可视化形式的展现(比如关系图表、地图、词云或能够展示图表的表格,类型及其丰富)
数据可视化分类
- 科学可视化:科学实验数据的直观展示
- 信息可视化:对抽象数据的直观展示
- 可视化分析:对分析结果的直观展示, 交互式反馈, 通常是一个跨领域的方向
数据可视化目的
- 记录信息
- 分析推理
- 证实假设
- 交流思想
- 可视化的图应该紧密联系上下文,避免图不对文的数据可视化。
可视化设计原则和方法
能够正确地表达数据中的信息而不产生偏差与歧义
一个出色的可视化设计可在最短的时间内,使用最少的空间、用最少的笔墨为观众提供最多的信息内涵 —— Edward
常见的错误可视化
- 透视失真
如果数字是由视觉元素表示的,那么它们应该与视觉元素的感知程度成正比
使用清晰、详细和彻底的标签,以避免图形失真和含糊不清 - 图形设计 & 数据尺度
图形的每一部分都会产生对其的视觉预期,这些预期往往决定了眼睛实际看到的东西
错误的数据洞察,产生于在图形的某个地方发生的不正确的视觉预期推断
一个典型的例子:轴刻度,我们期望它们从始至终都能保持连贯且一致 - 数据上下文
可视化的图应该紧密联系上下文,避免图不对文的数据可视化。
数据可视化的原则
- 准确地展示数据
- 节省笔墨
- 节省空间
- 消除不必要的“无价值”图形
- 在最短的事件内传达最多的信息
视觉感知
视觉感知时客观事物通过人的视觉在人脑中形成的直接反映。可视化致力于外部认知,也就是说,怎样利用大脑以外的资源来增强大脑本身的认知能力。人类视觉系统观察的是变化,而不是绝对值,并且容易被边界吸引。在可视化设计中,设计者需要充分考虑到人类感知系统的这些现象,以使得设计的可视化结果不会存在阻碍或舞蹈用户的可视化元素。
视觉编码
视觉编码是一种将数据信息映射成可视化元素(可视化元素+视觉通道)的技术。
可视化符号
- 表示元素时的符号包括点、线、面。
- 表示关系时的符号包括闭包、连线。
视觉通道
视觉通道有两种类型
- 数量通道:用于显示数据的数值属性。
- 标识通道:用于显示数据的分类属性。