1、D3数据的抽取
论文: 《 Deconstructing and Restyling D3 Visualizations》
一篇简单的文
图展示了系统所带来的效果
D3的特点
- D3是一个JavaScript库,是基于DOM文档对象模型
- D3是基于数据驱动的
- DOM是以层次结构组织的节点
- D3绘图数据绑定SVG元素
- 相对于像素,D3的重构更容易
- SVG图包含根节点<svg>组节点<g>
- SVG图绘制使用局部坐标系,并且提供了从局部到全局坐标的转换
- SVG图的节点包含各种属性值:
<position> <width> <height>
<fill-color><stroke-width>
Deconstruction
Extracting Data and Marks
- 数据抽取(Data extraction)
- 遍历SVG子树
- 所有节点满足:节点是一个图形生成标记,节点绑定数据
- 遍历每个节点的data属性
- 每类图对象建立一个 data table
deconID 记录遍历顺序
<rect>绑定了对象 name、type、cost 、value
x-axis 绑定了string label
Extracting Mappings
线性匹配(linear mapping)
- 数值型的数据和标签
- (ordering index i → x-position, cost → height)
- 采用线性回归模型
- 计算系数(R2),R2 值接近1时,线性回归,保留斜率和截距
- y=kx+b
- 查找数值域和标签属性一对一的匹配、多对一匹配
Extracting Mappings
序列匹配(a categorical mapping)
- 没有找到线性匹配或者属性是非数值的,采用该匹配
- 标签值对应一个特定的序列 (type->fill-color)
- 不需要值域、数值属性
RESTYLING
Remove MappingChange Mapping
- linear mappings users can specify new line parameters
- categorical mappings users can specify the attribute value corresponding to any unique data value
实例: