1. Introduction

Conferences: UIST ‘14: The 27th Annual ACM Symposium on User Interface Software and Technology
Author: Jonathan Harper，Maneesh Agrawala
Year: 2014
ISBNs, DOls, PMIDs, or arXiv IDs：

DOI:10.1145/2642918.2647411
Cite: Jonathan Harper and Maneesh Agrawala. 2014. Deconstructing and restyling D3 visualizations. In Proceedings of the 27th annual ACM symposium on User interface software and technology (UIST ‘14). Association for Computing Machinery, New York, NY, USA, 253–262. https://doi.org/10.1145/2642918.2647411
Reportor: 廖集秀
Attachment: pdf

2. Figures

image.png

3. Summary

提出了一种针对D3可视化的SVG，进行解构数据样式和映射，再进行重构映射的方式，使得用户在不必探索研究D3可视化的底层代码的前提下，完成可视化样式的转换。

4. Main Points

输入SVG，输出SVG：

  1. 输入SVG，提取出数据和样式，分析出原图映射；
  2. 用户更改映射（用图形化交互界面），将用户的修改作用到SVG中，输出。

————以下是解构Deconstructing—————

  1. 提取数据和样式

按先后顺序遍历SVG子树（输入），并列举满足两个条件的所有节点：（包含了所有的数据编码标记）

  1. 节点生成图形标记
  2. 节点与数据绑定
    1. 提取映射

我们遍历每一个节点的时候，可以得到这个节点的数据和样式，这很简单（老师说的json.loads和beautifulsoup应该是在这里实现） 但是样式大多是由数据决定的，而只看单个svg无法判断出其中的函数关系，因此他遍历了所有的svg，再进行分析，看是什么数据字段决定了什么样式。
分为线性映射和分类映射
—————以下是重构Restyling——————

  1. 重构映射

删除映射：删除后，其映射属性将更新为一个常量值
更改映射：可以修改线性映射的线性函数的参数，工具再据此来修改每一项的标记属性值；分类映射可以指定数据值对应的属性值。
添加映射：如果用户选择线性映射则不能选择非数值数据，如果选择非数值数据则不能选择线性映射。它检查线性映射总是将数值数据字段映射到数值标记属性。 同时它会警告用户，在已经编码的属性上再添加映射，可能会发生冲突。如若还添加，工具将在创建新的映射前删除现有映射。

  1. 在可视化上更改标记

简单来说就是用户更改了映射函数，工具根据这个新函数来修改每一个数据对应的新属性值。
Deconstructing and Restyling D3 Visualizations.pptx