Charticulator: 交互式构建定制的图表布局（Charticulator: Interactive Construction of Bespoke Chart Layouts）

作者: 日期: 2018年10月14日

定制的图表更具表现力，可以根据想要传递的数据洞察进行细节的设计，从而让目标用户更容易注意、理解和记忆这些图表。用户想要创建这些图表，可以使用绘图的工具，但是这些工具需要手动设置数据和属性的映射，比较低效；可以用可视化的库编写代码实现，但是用户需要有较高的编程技能；也可以使用一些交互式的可视化构建工具，但是这些一般需要用户从一些模版中进行选择，因而表现能力不足，并且提供的布局方式有限或者提供的布局构建的交互不够方便。针对已有工作存在的问题，[1]的作者们提出了Charticulator，可以灵活创建可视化布局。

设计原则

Charticulator的设计遵从如下的原则：

  1. 将布局作为有意的设计选择
  2. 使用部分规约（partial specification）构建布局
  3. 平衡直接操作和通过面板设置的交互方式

概念框架

框架是可视化构建工具的核心。Charticulator的框架可由如下的表达式进行刻画，主要分为图标（glyph）和图表（chart）2个层次。

图1. Charticulator的框架

元素

图标（Glyph）的规约由图标组成元素（GlyphElement）和图标组成元素之间的约束关系（LayoutConstraint<GlyphElement>）组成。图标组成元素包括标记（Mark，如长方形（Rectangle）、标记（Symbol）、线（Line）、文字（Text）等）、参考线（Guide）、参考线组（GuideCoordinator）和数据驱动的参考线（DataDrivenGuide）；图标组成元素之间的约束关系可以由用户通过锚点（anchor）进行设置，数据驱动的参考线可以用于根据数据设置元素位置关系。

图表（Chart）由图表的组成元素（ChartElement）、标尺（Scale）、图表组成元素之间的约束关系（LayoutConstraint<ChartElement>）组成。图表的组成元素（ChartElement）包括绘图区块（PlotSegment）、连接（Link）、标记、图例（Legend）、参考线和参考线组。绘图区块对图标进行布局，后面的小节会介绍；连接定义图标之间的连线；图例是对标尺的可视化。标尺用于定义数据到可视化属性的映射关系。

布局组合

绘图区块通过声明坐标系统、最多2个坐标轴和子布局对图标进行布局。不同坐标系的坐标轴不同，笛卡尔坐标系的坐标轴为X、Y轴；极坐标系的坐标轴包括径向和角度；用户自定义的曲线坐标系包括切向和法向。坐标轴可以被指定4种类型：空坐标轴、脚手架（scaffold）坐标轴、类别型坐标轴和数值型坐标轴。其中，脚手架坐标轴将n个图标均匀分布在轴上；类别型和数值型坐标轴则根据数据列的值排列图标。当所有的坐标轴或者为空或者为类别型时，可以指定子布局，如堆叠、网格等。笛卡尔坐标系下的坐标轴组合如下：

图2. 笛卡尔坐标系下的坐标轴类型组合

连接建立

连接的形式包括线和条带。3种情况下可以建立连接：

  1. 数据序列，如图3（a）
  2. 多个绘图区块对应的相同数据项之间，如图3（b）
  3. 额外指定的边数据，图如图3（c）

图3. 建立连接的3种形式

约束计算

不同的约束之间存在相关关系，需要将用户指定的约束转化为数学的方程式，使用计算约束的方法进行计算。

多层次的约束

Charticulator的约束包括多个层次

  1. 图表层次的约束：绘图区块、图例、参考线等的位置约束关系
  2. 绘图区块中的约束：不同图标之间的位置约束关系
  3. 图标层次的约束：图标中不同元素之间的约束关系
  4. 标记内在的约束关系：如对于长方形，它的左右坐标、中心的横坐标以及宽度这4个变量，只有2个是自由变量

数据绑定的约束

数据绑定的约束是指布局相关的属性和数据绑定时产生的约束。如，当图标的宽度和数据属性绑定时，有如下约束：

∀i, G_i.width=Scale.factor × d_i

约束求解

线性约束求解算法计算速度快且保证收敛。但是一些约束是非线性的，如circle packing、力导向布局等。Charticulator采用2层求解：首先使用线性算法求解整体布局，然后对局部的非线性约束采用对应的算法进行求解。

用户界面

Charticulator的用户界面包括数据面板、图标编辑器、图层面板、可视化属性面板和图表画布。用户可以在图标编辑器或图表画布中通过拖拽等交互创建图标或图表，也可以在面板中进行设置。一些可视化图表的创建过程的案例可以在https://charticulator.com上观看。

图4. Charticulator用户界面

实验评估

实验评估包含3步。

首先通过完成多样的可视化图表来验证其表达能力的强大：

图5. 使用Charticulator创建的可视化

接着，作者们请11个被试进行用户调研，让他们根据目标图标进行创建，结果只有1个被试存在未完成的情况，其他被试都能在5分钟之内完成，且他们普遍认为Charticulator易学易用，他们很喜欢用它来创建可视化。

图6. 被试使用Charticulator完成4个可视化构建任务的时间。

最后，作者们比较了Charticulator和现有工作在点击数量、文本输入次数的对比，发现这些底层的交互次数与已有工作相当。

图7. Charticulator和现有工具完成同一构建任务时的底层交互次数比较

结论

本文提出了交互式构建灵活的可视化图表布局的框架与系统Charticulator，并且通过一系列实验验证了它的表达能力。

参考文献

[1] Ren, D., Lee, B., and Brehmer, M. “Charticulator: Interactive Construction of Bespoke Chart Layouts.” IEEE Transactions on Visualization and Computer Graphics, 2019

研究, 论文报告, ,

评论关闭。