四款面向数据可视化的超酷JavaScript工具

在HTML 5以及蓬勃发展的JavaScript库当中，新型图形元素已经显示出了积极的发展态势、也昭示着交互式数据显示技术的兴起。如今的网络浏览器不仅需要提供具备响应式设计以及美观图形控制方案的丰富用户界面，同时也需要作为数据可视化效果的承载平台——包括柱状图、气泡图、风图以及丰富多彩的地图效果，且提供边界缩放功能。

通过网络，我们得以在自己的桌面系统中获得几乎无穷无尽的、来自各新闻媒体、博客及厂商（包括任何拥有网站并提供数据源访问的管理者）的多种动态效果与交互式图形——其丰富程度远超我们当初的想象。

现阶段的交互式数据可视化机制主要由专门针对特定任务所设计的JavaScript库来实现。在今天的文章中，我们将主要关注四款此类库，它们分别是D3、InfoVis、 Processing.js以及Recline.js。它们全部能够被用于解决我们的网页动态数据可视化需求，但其中每一款方案所采取的实现方法都有所不同。另外，全部四项技术都供大家免费使用，并可在开源许可的规范下进行重新发布。

D3是一套颇具“开创性”的方案，它利用 JavaScript当中一部分较为晦涩的功能将数据结构与DOM表现方式相结合，最终带来了强大而令人眼前一亮的理想效果。

InfoVis则采取了较为保守的处理途径。其 API非常明确，使用起来也非常简便：插入图表对象并为其提供数据，其它的工作放心交给InfoVis即可。

作为原本基于Java的图形系统的JavaScript 版本，Processing.js并不仅仅对给定数据的内容进行可视化处理，它也能像我们在主机游戏中见到的那样把结果以动画形式呈现出来。

最后要介绍的是Recline.js，它利用数据探索模式实现数据可视化处理。虽然它更倾向于将数据整理成字段与记录，但用户也可以通过它获得时间线、线状图甚至是地理可视化处理结果。

D3

大家可能已经在实际工作中接触过D3（也就是 Data-Driven Documents的简称）——它是一款可视化库、目前《纽约时报》在线版面的大部分网页都由其提供交互式信息图形支持。而这些文章所使用的链接则大多来自Michael Bostock建立的网站——他正是D3项目的主要缔造者，虽然他认为其中很大一部分功劳应归属于Jason Davies。

D3属于名为Protovis的早期项目的衍生产物。关于由Protovis到D3的这一场重大革新以及相关内部资料，大家可以查阅由Bostock、 Vadim Ogievetsky以及Jeff Heer联合撰写的论文《D3：Data-Driven Documents》。

与jQuery类似，D3同样直接对DOM进行操作。这也成为它与其它可视化工具的主要区别所在 ——它会设置单独的对象以及功能集，并通过标准API进行DOM调用。D3所采用的整套机制颇为Web开发人员所熟悉。举例来说，我们可以利用由D3控制的CSS样式元素。此外，由于D3在显示文档时所使用的内部结构与浏览器完全一致，因此我们能够直接将现有基于浏览器的开发及调试工具用于D3环境。

D3所提供的selection可谓至关重要。在其帮助下，我们能够对各类文档节点集轻松并反复进行各类操作。要变更所有段落元素的颜色，我们只需使用以下代码：

d3.selectAll("p").style("color","white"); 这种“链接”技术相当于功能的执行通道—— 每条通道都能将结果正确传递至对应功能—— 相信熟悉jQuery与Prototype的朋友对此一定不会感到陌生。D3程序员可以利用它来简洁地表达多种处理方式。selection让DOM节点的操作更简单，我们只需设定属性及样式、或者复杂的节点排序——包括添加及删除节点。

D3通过data()函数将数据与DOM节点进行绑定。作为通常位于一个选定操作之后的函数， data()能够建立数据节点并将其与由 selection返回的DOM节点进行关联。大家可以把这类数据看作被“连接”到了DOM节点当中。这些被接入的数据最终将成为DOM节点所表现的可视化元素的驱动依据。它决定了条状图形的高度、气泡图中气泡单位的大小、地图上标记点的位置等等。

数据接入可以算是D3当中的关键性组成部分，也被称为“一般更新模式。”作为一种D3应用程序的编写风格，一般更新模式以selection 操作为起点，而后依次通过D3的enter()函数将元素添加到新数据当中、更新现有元素（通过修改需要变更的任何一种元素属性），最后通过D3的exit()函数删除已经不再作为可视化组成部分的数据。尽管难于快速掌握，但这种一般更新模式在对可视化整体生命周期进行管理时确实表现出色。

数据同样扮演着推动D3的重要角色，它能够指控工具产生动态显示效果，并生成相对简单的静态图形。在气泡图当中，各气泡单位的相对尺寸可以任意缩放、柱状图中的柱形高度能够自由伸缩，同时新数据在进入可视化处理流程后、旧数据也将自由退出。

在D3中，整个转换过程通过一个包含两帧内容的关键帧动画来体现，即开始与结束。开始帧通过视觉元素显示当前状态，结束帧则由包含与指向该元素的特定属性值负责定义。D3的插入器功能负责处理整个转换过程。D3为插入器提供多种备选项目，例如数字与颜色；这套方案的智能性很高，足以找到对应字符串并向其中插入嵌入值，例如字体规格中的字体大小。大家也可以定义自己的插入器功能；D3甚至支持CSS3转换机制。

那么这些数据来自何处？尽管大家可以将其直接嵌入到应用程序当中，但D3也提供数据的外部读取功能，其支持来源包括：文本文件、 CSV文件、JSON文件等等。它甚至能够读取 HTML文档并通过解析将其内容插入到文档树当中。

不过D3的学习曲线相对而言较为严苛。它对变化数据集的可视化处理机制——包括正在进行修改的现有数据元素、正在添加的新型数据元素以及正被移除的旧有数据元素——要求使用者进行认真研究并拥有对JavaScript 的深入理解，否则根本无从上手。幸运的是， D3提供的教程非常出色，而且事实证明花费在学习上的时间会为大家带来理想的回报。

D3能够驾驭由HTML 5以及DOM提供的全部要素，而且能够充分发挥用户在JavaScript方面的卓越技能。它通过对标准文档对象的准确操作为我们带来可靠的可视化数据分析结果。不过奇怪的是，D3对于图形处理工作几乎一无所知——它甚至不知道如何绘制一个圆形（它需要借用HTML 5所提供的图形绘制功能）。D3 的真正实力在于，它能够以数据为基础对文档（正如在DOM当中）进行转换——而这正是其 Data-Driven Documents名头的由来。InfoVis

JavaScript InfoVis工具集，或者简称InfoVis，由Nicolas Garcia Belmonte一手打造。尽管这套工具集目前由Sencha所持有，但它仍然遵循开源（BSD）许可。

InfoVis总体而言属于一套图表库，且主要依赖对JSON的调用。数据在被传递至InfoVis的图表函数当中之后，就会被转化为JSON对象的形式。此外，当对图表进行初始化时（即创建图表中的对象，例如面积图），图表中的参数会被指定为JSON对象中的元素、而后才会正式进入初始化流程。从效果方面讲，JSON对象可以被视为InfoVis函数调用中的命名参数。

InfoVis的固有图形包括区状、柱状以及饼状图；树形图；空间及超级树状图；环状图；放射状图以及力引导图形。大家也可以将多种图形类型混合使用以建立可视化效果（下图所示即为饼状图与树形图的混合产物）。大部分图表提供可配置显示选项，允许我们定制独一无二的图表类型。举例来说，大家可以在显示区域中要求树形图左对齐、居中或者右对齐。

InfoVis还提供一系列核心功能函数，其中大部分直接取向各类流行JavaScript库中的相似功能——例如jQuery、Prototype以及MooTools。举例来说，InfoVis提供的each()函数能够对某个重复应用特定函数——这一特性在处理大规模选择结果（例如变更特定类中的全部实例文字颜色）时非常实用。每一种图表类对象都包含一个相关jupdateJSON() 方法，我们需要借此实现图表数据更新。作为将图表内数据批量替换为另一组数据的手段，转换机制被内置于InfoVis的可视化对象当中。不过这套库还定义了一组控制器方法，大家可以通过调用来设置回调函数。这些回调操作会在动画的不同阶段中付诸执行——这些动画可以由转换或者用户交互所触发。举例来说，大家可以通过定义要求一条回调函数仅调用某个正在进行绘制的节点，从而在该节点对象被变更之前调整其图形。Processing.js

从数个方面来看，Processing.js与其它几款工具都有所不同。首先，Processing.js属于 Processing可视化语言的JavaScript接口。Processing语言最初由麻省理工学院所开发，根据其说明文档的表述、它是一种“简化版 Java、且具备针对绘制及图形处理任务的简化 API。”其次，尽管Processing.js能够被用于图形及图表的绘制工作，但它同时也是一套相当正规的通用型图形与动画工具集。Processing（当然也包括Processing.js）在数据可视化处理功能之外，还为我们带来2D与3D图形命令机制，允许用户借此创建动画、交互式数字艺术作品甚至视频游戏。在processing.js的展示页面中，大家会看到众多令人赞叹的链接——其中包括海洋生物动画、小行星环境下的视频游戏以及素描应用等等。 Processing.js利用HTML 5的canvas元素进行图片渲染。从某种意义上讲，Processing.js拓展了HTML 5的canvas功能——Processing.js 认为其初始功能太过低级，无法有效为开发人员服务。在使用Processing.js的过程中，我们通常需要利用Processing语言进行代码编写，并利用Processing.js将代码内容转译成 JavaScript代码以交付执行。当然，转译过程其实在编写当中已经同步完成。