数据构建与手动编辑的可视化迭代设计

文 | Min Lu

目前越来越多的工具支持可视化的生成与编辑，这其中可以分为两类：数据驱动的可视化构建工具以及所见即所得的可视化编辑工具。

数据驱动的可视化构建工具中，有D3、Processing这样的可视化编程语言，也有MircoSoft Excel、Tableau这样的可视化构建软件。此类工具支持数据上载，定义视觉对应关系进而自动生成可视化。

在所见即所得的可视化编辑工具中，如Adobe Illustrator这样的图形化编辑工具，用户交互式地编辑可视化。

在这众多的可视化工具中，设计过程往往是单向的，即在单一的工具中进行可视化构建及编辑。而设计的过程往往是迭代的，需要利用各种工具在各个阶段对设计的可能性进行探索，单一的可视化工具常常不能很好地支持这一需求(例如D3适合数据驱动自动生成而非手动编辑，AI支持手动编辑却不能自动根据数据生成等)。

因此，本文[1]提出了在数据构建和手动编辑相结合的可视化的迭代设计模式，同时实现了原型系统Hanpuku对这一想法进行实验。

本文提出了在不同工具之间的桥接模型(bridge model)，能够支持在不同的工具迭代使用，将它们对可视化的构建和编辑融合在一起。桥接模型的基本思想是将融合不同工具对可视化的修改问题抽象为解决冲突的问题，即在不同工具的交替使用中，分离出各工具中的可视化修改，基于合并策略合并这些修改。

具体地，下图1表示了桥接模型中的具体操作流程，包括：

1. 将可视化转化为各工具中的模型表示;

2. 在各工具中对可视化进行编辑;

3. 在各工具中识别修改;

4. 合并修改;

5. 将合并结果整合回各工具中;

6. 导出.

图1 桥接模型6个抽象步骤

不同工具间的共同可视化表示

在这6个抽象步骤中，其最基础也是最关键的是在不同工具之间构建出共同的可视化表示，从而识别出各工具对可视化的修改。

本文将一个可视化形式中的元素分为三类：数据绑定的视觉元素，非数据绑定的视觉元素和工具相关的不可转移元素。

例如下图2的可视化中，代表数据的柱形是数据绑定的视觉元素，颜色映射表中的方块则是非数据绑定的视觉元素，工具相关的不可转移元素因工具而异，例如在D3中，不可转移的元素包括了D3的代码，而在AI中，不可转移的元素包括了画布等。

图2 可视化中的数据绑定元素和非数据绑定元素示例

在共同的可视化表示的基础上，对每个元素进行唯一的ID指定，由此跟踪、识别在不同的工具中对每个元素的修改。

合并修改

在合并修改中，根据不同的合并策略有不同的结果。合并修改的挑战是合并冲突。在合并冲突时，首要问题是何为冲突。修改是否存在冲突取决于观察修改的层次。在不同层次上，两个工具中的修改可能是冲突的也可能不是冲突的。

如下图3中，在视觉通道这一精细观察层面上， 左支线对图元的位置和形状进行了修改，右支线对图元的颜色进行了修改，在视觉通道(颜色、位置、形状)在这一层面上，修改是不冲突的。而如果在图元这一粗糙观察层面上，两条支线同时对ID =1图元进行修改，是相互冲突的。

图3 左右两条支线的修改和合并

而在冲突发生时，合并的方式往往不是唯一的。下图4所示了三种基本的合并方式：保持本地修改、寻找自动合并规则、以及远端修改覆盖本地。并没有哪种合并方式是绝对唯一的，因此此时需要引入人的因素或者更多的环境语义来帮助决策。

图4 三种基本的合并思路

原型系统Hanpuku

基于多工具之间的桥接模型，本文实现了一个桥接D3和AI的原型系统——Hanpuku.。如图5所示，Hanpuku以AI软件插件的形式存在，支持在原有AI操作界面的基础上导入D3代码、上载数据、在AI中获得D3生成的可视化。通过桥接按钮”to Illustrator”和”to D3″，实现D3与AI编辑中相互推送。

图5 Hanpuku界面设计

使用案例

下图6展示了Hanpuku的一个使用案例，支持可视化演员和戏剧之间关系的迭代过程。

首先，利用D3生成初步可视化，再在AI中进行颜色、字体、添加标题等的个性化修改。

然后，将修改结果推送回D3中，修改程序将左侧按照演员的姓氏排序，再将生成结果推送到AI中，调整布局大小等。

接着，修改D3程序可以很方便地将原来的布局修改为环形布局。

在环形布局中，发现标题与新的环形可视化主体相互遮挡，因此再推送回AI中直接进行手动修改。

图6 利用Hanpuku进行演员与戏剧关系可视化的迭代设计案例

小结

Hanpuku主要是对D3与AI之间的桥接模型进行落地。本文还对不同的工具组合进行了探讨，包括Processing与Illustator, Processing与Photoshop等。将交接模型落实到不同工具组合的关键之处在于，如何在不同的工具之间构建出共同的可视化表示。例如，在Processing与Photoshop中，由于Photoshop将可视化表示称为位图，因此不存在Illustrator中的矢量图元表达，此时的可视化表示基础转化为图元对应的像素点列。

本文的主要贡献是提出了桥接不同可视化工具的模型，从而支持将可视化在不同的工具中迭代设计。通过桥接模型，用户可以方便地对每种可视化工具功能上的优势进行整合。同时，本文讨论了在结合不同可视化工具时的设计空间，如如何表示共同的可视化表示、如何合并等等。

参考文献：

[1] Bigelow, A.; Drucker, S.; Fisher, D. & Meyer, M.. Iterating Between Tools to Create and Edit Visualizations. IEEE Transactions on Visualization and Computer Graphics, 2016 (to appear)

End.