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

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

标题:Structuring Visualization Mock-ups at the Graphical Level by Dividing the Display Space

作者:Romain Vuillemot and Jeremy Boy

发表:2017 TVCG (InfoVis)

一、背景

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

2、可视化的跨界使用

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

总结类似的设计任务,分为三步:

- 构建数据可视化
- 报告进程并收集前期反馈
- 迭代于用户们之间
但是这种方法容易受到时间和技术资源,以及数据获取进度的限制。
3、Mock-up
在和用户讨论设计的时候,我们往往希望他们可以先集中在大方向的问题,而不是字体、配色等细节上。同时,Mock-up有易于制作等优点。
4、可视化中的草图
1) Five-sheet design [Robert 2017 IEEE TVCG]
2) 软件开发中的草图 [Walny 2011 VISSOFT]
3) 特征:

- 制作容易

- 包含少量细节

- 以建议而不是介绍为目的

 

5、可视化设计工具

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) 拓展空间不大
分享到:

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>