Draco:基于知识约束的可视化图表智能设计系统

sdq
Explore, Think, Create
5 min readFeb 9, 2020

注:Draco为2018年InfoVis大会的Best paper[1]

在可视化设计的过程中存在了大量的设计准则,这些准则能够帮助设计师加速他们的设计过程,并且避免一些设计上的陷阱。然而并非所有的准则都是众所周知的,对于新人来说如何去尽可能地满足这些设计准则仍然是颇具挑战的。Draco系统的目标是希望构建一个可扩展准则的可视化设计系统,通过将准则编码成逻辑规则,用来帮助评估现有的图表是否满足要求,或者直接在这些规则的基础上推荐合适的图表。

上图比较直观地描述了Draco在自动可视化设计流程中的定位。它的输入参数为数据属性以及一些还不完善的可视化需求说明,Draco会综合考虑这些输入参数以及内部的设计准则,将计算后输出的结果通过后续的可视化语法进行视觉渲染。

Draco使用的是可视化生成语言VegaLite。下图为基于汽车数据集的柱状图的声明方式,中间为VegaLite,右边为Draco使用的ASP方式。ASP(全称Answer Set Programming)是一种声明式的编程语言,通常用于描述问题的事实与规则,并计算满足约束的所有可能结果。Draco根据可视化设计准则进行规则的编码,例如当使用bar的时候,对应的坐标轴应该包括0。

Draco主要包含不同种类的约束,比如对于可视化语法的约束以及图表语义上的约束。例如VegaLite的语法上支持的mark、channel等,还有哪些元素可以共同出现或互相抑制。总而言之,这些约束的意义在于找出那些满足共现条件的元素,并将它们组合形成可视化设计。

但是如果我们将所有的设计准则都作为硬性规定,那么很有可能将那些我们仍然需要的特殊情况排出在外了,这些特殊情况虽然可能不满足某些设计准则,但是确实可能就是我们想要的结果。基于这点,Draco将设计准则从硬性约束改为了软性约束,算法会对不满足约束的可视化状态进行惩罚而非排除。此外,Draco还可以基于用户的偏好给不同的可视化状态不一样的权重。

下面这张图展示了Draco的设计空间,最外层的黑色框表示的是所有的可视化状态,中间那层蓝色框为Draco的第一层约束:可视化必须满足合理的是VegaLite的合理声明方式,最里层橙色部分是Draco最终的搜索空间,同时Draco会将那些不具有表现力和语义不规范的状态排除在外。Draco通过软性约束来编码用户的偏好,在图中用图中圆点的大小进行表示。

为了找到最优的可视化设计方案,Draco会在硬性限制条件的范围内,首先基于用户输入的query排除大部分不满足条件的可视化状态(图中的红叉),接着通过软性约束产生的偏好(圆点大小),选择出最优的可视化方案(图中的绿勾)。

在具体实现过程中,Draco对于输入数据(数据集、可视化需求、用户定义的任务)进行query定义,识别数据中的schema以及用户Query形成的约束条件。将这类约束条件和本身已有的可视化设计知识相结合,将所有约束写成ASP程序。使用Clingo[3]对约束问题进行最优解的求解。最终,Draco使用VegaLite作为可视化设计的输出。

最后,论文作者认为Draco不仅仅是一个自动可视化设计工具,它还可以被用来作为可视化的语法检查器,用于查看设计的可视化作品是否有违背现有的设计准则;另外,Draco也可以被用作可视化设计空间的探索工具,对所有的可视化设计状态排名,设计师可以从中进行选择;同样地,Draco也可以帮助到可视化研究的科研工作者,当他们发现一个新设计准则的时候,可以将其编码到Draco的规则中,查看是否与现有规则会产生冲突。下图是Draco的系统UI,该项目已开源,可自行下载尝试[4]。

[1] Moritz, Dominik, et al. “Formalizing visualization design knowledge as constraints: Actionable and extensible models in draco.”IEEE transactions on visualization and computer graphics25.1 (2018): 438–448.

[2] https://medium.com/@uwdata/draco-representing-applying-learning-visualization-design-guidelines-64ce20287e9d

[3] https://github.com/potassco/clingo

[4] https://github.com/uwdata/draco

--

--