Web可视化工具D3
1、为什么需要D3
硬件产品和交互设备的多样化使得可视化设计工具面临新的技术难题。理想情况下，可视化工具需要支持从桌面应用到web应用以及多触点移动设备，同时还需要紧随硬件发展的趋势，如多核计算以及特殊的图形硬件。Protovis提供了JavaScript和Java的实现版本支持异构平台，D3是Protovis的后续产品同样具备跨平台的特性。D3与Protovis最大的差异在于用户能够更直接地使用SVG，比Protovis更灵活。同时D3的性能要胜于Protovis，特别是在动画方面，主要原因在于D3只有变化的属性才被更新而不是重新绘制整个场景。目前Protovis已停止开发，全面转向D3。
2、D3是什么
Web上的交互式可视化通常需要同时使用多项技术，HTML用于显示页面内容，CSS用于设计样式，JavaScript用于交互，SVG用于绘制。值得高兴的是，DOM以层次结构展现页面内容，使得这些技术能够相互协作。然而目前的可视化工具对DOM进行了过多自主形式的封装，导致这些工具在可访问性（accessibility, 学习）及表现多样性（expressiveness, 可视化呈现的多样性）都存在不足。D3在综合考虑表现多样性、效率和可访问性的基础上提出的。
D3并没有引入新的图形化语法，而只是解决了另一个不同的更小得问题：有效地操作基于数据的文档。D3核心的共献在与设计了一个可视化的“内核”，类似于jQuery、CSS及XSLT这样的文档转换器(Document Transformer)。低层次上，D3的文档模型直接操作图形原语，这一点类似于Processing和Raphäel。而在高层抽象上，D3包含了一系列内核之上的辅助模块，这些模块受之前的可视化系统影响而产生。
D3使用了selection这一概念：用谓词标识一个元素的集合，然后赋予一系列的操作来改变被选的元素的值。这一概念起源于CSS，而jQuery提供了更灵活的控制接口。然而，在数据可视化时，通常需要添加或删除一些元素(Element)，然而jQuery缺乏这种动态改变的机制。基于XML的XSLT虽然能够允许用户按照定义好的模板填充数据并生成HTML，但是没有高级的可视化抽象，无法灵活地处理繁杂的数学可视化任务。
Protovis和D3都是基于宿主语言（JavaScript），采用声明式语言（DSL）描述式可视化设计。开发者告诉DSL需要什么样的计算结果，而不需要知道结果是如何计算的。HTML/CSS以及SQL都是DSL的典型代表。用于可视化的声明式语言也有很多，如Grammar of Graphics, ggplot2, HiVE, ViaQL以及Ploaris。这些语言都提供了高级抽象以及快速分析，但是并不提供细粒度的图形及交互式控制。
3、D3的设计
D3的原子操作是selection：从当前文档中提取元素（Element）集合。操作符（Operator）作用于selection之上，用于修改元素内容。数据联合（Data Joins）将输入数据绑定到元素，使得操作符能够操纵相关的数据。这一过程产生了进入（enter）及退出（exit）两个子选择，分别用于创建和销毁元素与数据之间的对应关系。动画式的转换（transitions）可以对属性及样式进行插值处理，让它们变化更平滑。事件处理器（Event handlers）则用于对用户的输入产生响应并可以交互。大量的辅助模块（Modules），如布局、缩放简化了一些常用的可视化操作。
4、D3与Processing的比较
源于Mike Bostock对两者作出评述。
1）Pixel vs. Vector
Processing像HTML5 Canvas一样，是基于像素的图形库；D3使用SVG，是基于矢量的。一些的图形化的效果如motion bur and glow，如果用基于像素的库实现起来比较容易（可以组合多帧或者做卷积）。SVG用filter也可以实现，但是不如pixel-based库那么灵活。而基于矢量的库则在缩放上有自身的优势。
2）Immediate vs. Retained
Processing由于是在pixel buffer中绘制，最终所有绘制的内容都变成pixel buffer中的元素。而retained-mode系统则维护一个可见元素的场景图（scenegraph）。它的好处在于你可以控制场景，改变了场景中的元素，场景跟着改变，而无须像pixel buffer那样管理dirty region然后再redraw。基于这一点，后者能获得比较好的性能。但是对于很复杂的场景，维护场景自身也会带来一定的开销。
另外，对于动画，往场景中添加交互操作更容易。用HTML5 Canvas，需要用pointInPath手工做hit testing，用SVG只需要向HTML语句添加event listener即可。甚至可以用CSS（hover, anchor tags, etc）做简单的交互。
3）Proprietary vs. Standard
Processing虽然具有一个非常好用的API，但是远不如HTML流行。D3建立在标准HTML之上，因此可以与其他技术进行整合，例如使用外部的stylesheets做样式，甚至可以使用CSS3作动画。也可以在服务器上生成HTML，然后使用D3做数据变换在客户端上显示。或者与其他的JavaScript工具一起使用，如jQuery。而Processing则是一个相对封闭的系统。
4）Imperative vs. Declarative
Processing本质上是一种C/C++风格的编程语言，使用函数和for循环等等，通常被称为“Imperative”编程。D3是声明式的，虽然不像CSS那样纯粹的声明式语法，但已经去除了大部分的控制语句。
5、总结
D3在web可视化上确实下了很多功夫，尤其是动画上编程简单效果非常棒，而且D3的例子中实现了常见的可视化方法，很多可以直接拿来使用。但是受浏览器本身的限制，D3仍然存在一些不足，特别是处理数据的规模还很小，尽管Jeff Heer还开发了与之相配合的JS数据库来支持D3处理更大的数据，但是效果并不佳。在交互上，D3也还仍有很多工作需要继续。希望D3的发展越来越好，成为web可视化的标准库。