D3: Data-Driven Documents

作者: 日期: 2013年9月21日

数据是新世界的货币，而 Web 则是新世界交易的外汇局，今天要给大家介绍一款非常流行的可视化工具——D3 (Data-Driven Documents)。D3由斯坦福可视化小组提出，论文发表在2011的IEEE infoVis上[1]，项目主页：http://d3js.org/。D3工作是基于该小组另一个工作ProtoVis[2]的改进，D3更改了对DOM操作的方式，提高了渲染效率，更重要的是D3融入到了整个Web开发体系中，使得学习调试变得容易。

D3_pic1

图1：使用D3工具的各类可视化效果图

现在已经有非常多的基于Web的可视化工具，其中有非常著名的Raphaël、processing等，但是随着需求的提高，这些工具还是存在一些问题，在这些工具中，有些是进行了高层次抽象，为了提高可视化效率这些工具对DOM进行了封装、优化了工作流程，虽然提高了效率，但是增加了学习和调试的难度，更重要的是：一些封装降低了表达的多样性，一些本来可以通过底层展示的效果由于封装而变得难以实现；另一些工具是非常底层的工具，如： Processing等，这些工具自身非常高效，但是这些工具使用直接渲染的方式，不能与其他工具（如：CSS等）共同协作，同时由于抽象层次低，使用起来非常繁琐。

针对以往的可视化工具所存在的问题，D3提出了三个设计目标：

  • 兼容性：工具不能是一个孤岛，而应该是存在于Web生态圈之中，可以使用其他的工具，不能由于封装而限制工具的表达多样性。
  • 可调试：新工具需要易于学习和开发，让开发者能对错误代码方便地调试。
  • 性能：新工具要在交互性和动画上有很好的性能。

所以，D3被设计成基于绑定数据绑定的直接对DOM文档进行修改的可视化工具，D3本身关注转换（Transformation），而不是表达（Representation）。D3大致包含四个部分：选择器，数据捆绑，交互与动画以及常用模块。

选择器：

D3采用了W3C标准选择器API，(“tag”)直接选择元素， (“.class”)通过类名选择元素等；D3对DOM操作封装成operator，可以施加到任意选择元素上，同时D3支持链式表达。

数据绑定：

D3的核心概念就是数据驱动，通过将数据绑定到元素上，用户可以非常容易地进行添加、修改和删除的操作。数据绑定分为三部分： 1. 没有与已有元素上数据相同的数据会进入enter()区；2. 与数据相同的元素进入update()区，3. 剩下没有数据的已有元素进入exit()区。

图2：D3数据绑定示意图

交互与动画：

D3通过支持事件来响应用户的操作，可以在D3的on()操作符中指定监听的事件类型和响应操作。同时D3包含transtion()操作符支持动画效果，用户可以指定特定的动画效果，也可以使用一些标准的动画效果。

常用模块：

D3的设计者们没有完全抛弃ProtoVis，而是进行了去粗取精，通过用户对ProtoVis的反馈，D3保留了ProtoVis一些实用的功能，通过添加Scale， Layout， Geo等模块让开发者开发起来更加容易。

在论文最后，作者对D3、ProtoVis和Flash进行了对比实验，分别通过散点图矩阵（scatterplot matrix）和堆叠图（stacked graph）两组数据对上述三个工具进行测试，分别测试了初始化时间和刷新频率。

图3：三种工具的性能曲线

图3：三种工具的性能曲线

从上面的性能曲线可以看出D3的启动时间最短，刷新频率比Flash要低，但是要好于ProtoVis。

总的来说，首先D3对ProtoVis进行了提升，保留了实用模块，更重要的是通过关注转换（Transformation），而不是表达（Representation）使得D3融入了整个生态体系，融入体系后使得学习变得容易，开发也变得灵活。是不是觉得D3非常优秀呢，试一试用D3实现你的可视化效果吧！

[1] Bostock M, Ogievetsky V, Heer J. D³ Data-Driven Documents[J]. Visualization and Computer Graphics, IEEE Transactions on, 2011, 17(12): 2301-2309.

[2] Heer J, Bostock M. Declarative language design for interactive visualization[J]. Visualization and Computer Graphics, IEEE Transactions on, 2010, 16(6): 1149-1156.

 

论文报告, ,

评论关闭。