这是我参与「 第四届青训营 」笔记创作活动的第二天。
可视化设计原则和方法
原则
能够正确地表达数据中的信息而不产生偏差与歧义。(准确地展示数据)
节省笔墨
节省空间
消除不必要的“无价值”图形
在最短时间内传达最多的信息
错误的可视化
1.透视失真 数字应与视觉元素的感知程度成正比,使用清晰、详细和彻底的标签。
2.图像设计&数据尺度 视觉预期可能会导致错误的视觉洞察,要保持连贯。
3.数据上下文 上下文要补充全面。
最大化数据墨水占比
数据墨水:可视化图形中不可擦出的核心部分。
数据水占比:可视化图形中用于展示核心数据的“墨水”在整体可视化所使用的墨水中的比例。
非数据墨水并不是都没用的。
方法
1.最重要的是展现数据
2.合理范围内最大化数据墨水占比
- 擦除非数据墨水
- 擦除冗余的数据墨水
格式塔学派
理论核心:整体决定部分的性质,部分依从于整体。
格式塔理论
- 就近原则
- 相似原则
- 连续性原则
- 闭合原则(IBM的logo)
- 共势原则(一个对象中有一部分向共同方向移动,那这一部分就易被感知为一个整体)
- 对称性原则
- 图形与背景关系原则
视觉编码
将数据信息(属性+值)映射成可视化元素(可视化符号+视觉通道)的技术
视觉通道:基于数据属性,控制可视化的符号展现样式。
数量通道(数值属性)
- 位置通道是最为精确的,其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积。
标识通道(分类属性)
- 划分空间区域最为有效,其后依次是色向、动向、形状。
面向前端的可视化工具
D3——用于数据可视化的开源的JavaScript函数库。
Vega——可视化语法。可以用JSON格式描述可视化的视觉外观和交互行为,并使用Canvas或SVG生成视图。
G2———面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。
ECharts——一个使用JavaScript 实现的开源可视化库。