Version: 2.0

Last Update: 2022-05-06

# 阿里可视化框架 AVA 系列文章

• [x] AntV/AVA 框架浅析-增强分析一些痛点
• [x] AntV/AVA Chart Linter 分析-图表检测与优化
• [ ] AntV/AVA ChartWizard 分析
• [ ] AntV/AVA ChartAdvisor 分析
• [ ] AntV/AVA LiteInsight 分析

# 一、概览

想要使用可视化图表准确传达数据内涵，帮助用户更好地分析和洞察数据，往往需要图表制作者自身具有良好的可视化领域专业知识。然而，实际工作中产生的图表总会有或多或少的问题出现，导致数据背后的信息不能被正确表达，甚至给用户理解数据带来误导。

为了解决这样的问题，AVA Team 和同济大学智能大数据可视化实验室（iDVX Lab），基于先前合作研发的 VizLinter^[1]（纠错案例如下图所示），共同建设了图表优化 ChartLinter 方案。想想平时所使用的 ESLint、TSLint 这样的 Code Lint，它能够根据可视化设计规则，自动识别图表设计中存在的问题，给出恰当的修改方案。^[2]

如上图所示，当一个以城市名称作为维度时，选择条形图往往会导致名称拥挤不堪，应用 Lint 的建议后会有一定程度上的可视化改观，同时，Lint 的规则时可以人为选定的，以满足不同场景的使用效果更。

对于如何使用这里不过多罗列，可以参考官网给出的使用样例 (opens new window)。

# 二、原理分析

简化版流程图如下：

ChartLinter主要由两部分组成，分别是Linter和Fixer，前者是按照 Lint 预定义的规则以及规则权重进行得分排名，后者是修复 Lint 规则的规则。

• Linter
  • Hard以及Soft类型规则组成，前者权重往往高于后者
  • 规则得分（权重得分）
• Fixer
  • Design类型规则组成
  • 规则返回 fix 方案以及文档

NOTE: Hard约束是同济学术方案默认提供的规则，也是学术界当下公认的基本规范（基于 Draco），而我们提供了Soft约束支持用户自定义，支持用户自由扩展。此外，市面上不少图表库已经规避了一些硬约束问题，额外提供软约束，能够更好地满足不同图表库的需要。^[3]

# 三、学术研究

# 1) 前身 VizLinter

VizLinter 基于 Python 语言，目前已经更名为 vega-lite-linter 项目^[4]。

而 VegaLite（以及 Vega）是一种将可视化描述为从数据到图形标记属性的编码映射的规范^[5]，简而言之是，它提供了一种基于Specification的静态图形描述文件到可视化图形的映射，细节可参考官方文档说明^[6]。

# 2) VegaLite Linter 的相关研究

VizLinter: A Linter and Fixer Framework for Data Visualization 论文^[1:1]

# 不同的实现方式

• 基于规则
  • Data Characteriestics^[7]
  • Intended Tasks^[8]
  • User Behaviors^[9]
• 基于机器学习
  • Data
  • Corresponding Legitimate Visualization

# 领域名词

• ASP： Answer Set Programming^[10]

# 整体流程

VegaLite Specification ---> ASP Facts ---> ASP Rule ---> Fixer Solve by Rules

# 部分组成

• 框架整体: 基于 Linter 的结果进行可视化的检验和自动修复
• Linter：
  • 基于规则，以 Draco^[11] 为代表的 ASP 形式
  • VizML 形式^[12]
  • ClustMe 形式^[13]
• Fixer：对 Linter 产生的问题进行修复
• 用户学习：一个用于持续改进和研究的基于用户行为的原型系统

# 参考引用

---

1. VizLinter: A Linter and Fixer Framework for Data Visualization (opens new window) ↩︎ ↩︎

2. iDVX × AntV 智能可视化创新论坛 - B 站视频 (opens new window) ↩︎

3. ChartLinter 你的图表可以更好 (opens new window) ↩︎

4. VegaLiteLinter - 官方地址 (opens new window) ↩︎

5. VegaLite (opens new window) ↩︎

6. VegaLite Specification (opens new window) ↩︎

7. K. Wongsuphasawat, D. Moritz, A. Anand, J. Mackinlay, B. Howe, and J. Heer. Voyager: Exploratory Analysis via Faceted Browsing of Visualization Recommendations. IEEE Transactions on Visualization and Computer Graphics, 22(1):649–658, Jan. 2016. doi: 10.1109/TVCG.2015.2467191 ↩︎

8. S. M. Casner. Task-analytic approach to the automated design of graphic presentations. ACM Transactions on Graphics 10(2):111–151, Apr. 1991.doi: 10.1145/108360.108361 ↩︎

9. D. Gotz and Z. Wen. Behavior-driven visualization recommendation.In Proceedings of the 14th International Conference on Intelligent User Interfaces, IUI’09, pp. 315–324. Association for Computing Machinery, Sanibel Island, Florida, USA, Feb. 2009. doi: 10.1145/1502650.1502695 ↩︎

10. Answer Set Programming (opens new window) ↩︎

11. Draco (opens new window) ↩︎

12. VizML (opens new window) ↩︎

13. ClustMe : A Visual Quality Measure for Ranking Monochrome Scatterplots based on Cluster Patterns (opens new window) ↩︎