d3可视化新动态

1、D3数据的抽取 

  论文： 《 Deconstructing and Restyling D3 Visualizations》

 一篇简单的文

     

     

图展示了系统所带来的效果

D3的特点

• D3是一个JavaScript库，是基于DOM文档对象模型
• D3是基于数据驱动的
• DOM是以层次结构组织的节点
• D3绘图数据绑定SVG元素

• 相对于像素，D3的重构更容易

SVG图特点

• SVG图包含根节点<svg>组节点<g>
• SVG图绘制使用局部坐标系，并且提供了从局部到全局坐标的转换
• SVG图的节点包含各种属性值：

               <rect>  <circle> <polygon>
               <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 Mapping

Change Mapping

• linear mappings users can specify new line parameters
• categorical mappings users can specify the attribute value corresponding to any unique data value

      实例：