数据可视化 | 青训营笔记

60 阅读2分钟

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

可视化设计原则和方法

原则

能够正确地表达数据中的信息而不产生偏差与歧义。(准确地展示数据)

节省笔墨

节省空间

消除不必要的“无价值”图形

在最短时间内传达最多的信息

错误的可视化

1.透视失真 数字应与视觉元素的感知程度成正比,使用清晰、详细和彻底的标签。

2.图像设计&数据尺度 视觉预期可能会导致错误的视觉洞察,要保持连贯。

3.数据上下文 上下文要补充全面。

最大化数据墨水占比

数据墨水:可视化图形中不可擦出的核心部分。

数据水占比:可视化图形中用于展示核心数据的“墨水”在整体可视化所使用的墨水中的比例。

非数据墨水并不是都没用的。

方法

1.最重要的是展现数据

2.合理范围内最大化数据墨水占比

  • 擦除非数据墨水
  • 擦除冗余的数据墨水

格式塔学派

理论核心:整体决定部分的性质,部分依从于整体。

格式塔理论

  • 就近原则
  • 相似原则
  • 连续性原则
  • 闭合原则(IBM的logo)
  • 共势原则(一个对象中有一部分向共同方向移动,那这一部分就易被感知为一个整体)
  • 对称性原则
  • 图形与背景关系原则

视觉编码

将数据信息(属性+值)映射成可视化元素(可视化符号+视觉通道)的技术

视觉通道:基于数据属性,控制可视化的符号展现样式。

数量通道(数值属性)

  • 位置通道是最为精确的,其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积。

标识通道(分类属性)

  • 划分空间区域最为有效,其后依次是色向、动向、形状。

面向前端的可视化工具

D3——用于数据可视化的开源的JavaScript函数库。

Vega——可视化语法。可以用JSON格式描述可视化的视觉外观和交互行为,并使用Canvas或SVG生成视图。

G2———面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。

ECharts——一个使用JavaScript 实现的开源可视化库。