通过分割显示空间在图形级别构建可视化模型

论文：Structuring Visualization Mock-ups at the Graphical Level by Dividing the Display Space

作者：Romain Vuillemot and Jeremy Boy

发表：2017 TVCG (InfoVis)

背景

1. 可视化和艺术的设计流程

可以看到艺术家的设计流程往往是和可视化的流程相反的。

1. 可视化的跨界使用

经济学家 Ricardo Hausmann 在 2016 上的 VIS Keynote 上介绍了 double treemap 和 dynamic treemap 的应用。

总结类似的设计任务，分为三步：

• 构建数据可视化

• 报告进程并收集前期反馈

• 迭代于用户们之间

但是这种方法容易受到时间和技术资源，以及数据获取进度的限制。

1. Mock-up

在和用户讨论设计的时候，我们往往希望他们可以先集中在大方向的问题，而不是字体、配色等细节上。同时，Mock-up 有易于制作等优点。

1. 可视化中的草图

   1. Five-sheet design [Robert 2017 IEEE TVCG]
   2. 软件开发中的草图 [Walny 2011 VISSOFT]
   3. 特征:
      • 制作容易
      • 包含少量细节
      • 以建议而不是介绍为目的

2. 可视化设计工具

   1. 编程：D3, Vega…
   2. GUI: Tableau, Voyager…
   3. 研究： Data-Driven Guides [Nam 2017 IEEE TVCG], SketchStory [Bongshin 2013 IEEE TVCG]

方法

1. 模块化和网格

   1. 网格：垂直划分和水平划分叠加为网格
   2. 模块化：在底层空间上嵌入子模块

2. 分割空间：将可视化作为一种内容

   1. 分割画布空间
   2. 分布图表空间

3. 使用代码制作 Mock-ups

   1. 手绘的缺点：难以调参；难以带入内容
   2. 语法：
      • 六种图案：水平、垂直、网格、树图、坐标、包围
      • 三种操作：嵌套、重叠、连接
      • 两种数据变换： 数据属性（数据项、维度、时间点）、数据运算（取值、过滤、频次…）
   3. 词汇：对于模块分布，需要定 width, height, padding 等
   4. 例子：文中给出了表格、柱状图、堆叠图、线图、散点图、散点矩阵等多种常见图表的模块化表达。

讨论和总结

1. 优势：

   1. 帮助设计者先关注视觉形式部分
   2. 易于整合其他想法
   3. 迭代划分空间，接入数据

2. 局限：

   1. 不支持高密度的图表、连续的图表（流图等）和复杂的数据结构（层次数据）
   2. 不支持标注和交互等
   3. 不支持极坐标等其他坐标映射
   4. 不支持三角形、六边形等形状

3. 总结

   1. 引入设计理念，贴合设计应用场景
   2. 实现了一个开源库
   3. 从界面划分到部分常见图表，抽象程度比较高
   4. 界面设计从空间划分入手
   5. 只适合非专业设计
   6. 拓展空间不大

---

Questions & Discussion： ✉️ wangxumeng@zju.edu.cn

---