AntV/AVA Chart Linter 分析 - 图表检测与优化

1,982 阅读4分钟

Version: 2.0

Last Update: 2022-05-06

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

一、概览

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

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

lint-bar-chart.gif

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

对于如何使用这里不过多罗列,可以参考官网给出的使用样例

二、原理分析

简化版流程图如下:

chart-linter-work-flow.png

ChartLinter主要由两部分组成,分别是LinterFixer,前者是按照 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

vega-lite-demo.png

2) VegaLite Linter 的相关研究

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

不同的实现方式

  • 基于规则
    • Data Characteriestics7
    • Intended Tasks8
    • User Behaviors9
  • 基于机器学习
    • Data
    • Corresponding Legitimate Visualization

领域名词

  • ASP: Answer Set Programming10

整体流程

vega-lite-linter.png VegaLite Specification ---> ASP Facts ---> ASP Rule ---> Fixer Solve by Rules

部分组成

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

参考引用

Footnotes

  1. VizLinter: A Linter and Fixer Framework for Data Visualization 2

  2. iDVX × AntV 智能可视化创新论坛 - B 站视频

  3. ChartLinter 你的图表可以更好

  4. VegaLiteLinter - 官方地址

  5. VegaLite

  6. VegaLite Specification

  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

  11. Draco

  12. VizML

  13. ClustMe : A Visual Quality Measure for Ranking Monochrome Scatterplots based on Cluster Patterns