珠联璧合：组合 R 语言和 D3.js 的力量

根据维基百科，在各种组织里非结构性数据可能占据了所有数据的70%-80%。由于每个人都想在数据的重重高山中搜寻到隐藏的宝藏，因此用于处理、分析、可视化数据的新工具不断地推陈出新。本文主要介绍 R语言 的数据处理和 D3 Javascript库 的数据可视化之间的结合。

不可变的图表

当我们使用R做数据处理时，R本身自带了一些生成图表的选项。其中一个选项就是使用R的”ggplit2″包。这个包可以帮助我们轻松地把数据转化为漂亮的表格。 下图就是使用 ggplot生成的表格。

如图所示，在该表中有数不清的数据，我们很难去分辨出某个特定的时间点的值是多少。由于它是一个静态的png图，我们无法将其放大。如果我们想要某个时间段的拥有更多细节的图表，就不得不用小一点的数据集再跑一遍我们的ggplot脚本。这种数据可视化的方式并不灵活。

一起来提升交互性

对于数据的处理，R是一个非常棒的选择。对于华丽的图表的生成，R仍是一个好的选项。然而当你想要在数据可视化上更进一步，你应该看向别处，找找其他方向了。这个时候，Javascript库D3将会映入你的眼帘。

同样地，将D3和R结合起来也要从一些选项里做出选择。这取决于是否是

1. 用R来做数据和图表的展现，然后将其导出到你的Javascript绑定的SVG上
2. 用R做数据处理，然后发送数据给javascript去生成SVG图

当你用单向通信（从R到带有javascript的网页）时，这两个选项都可行。但当你想要使用双向通信时，你可以根据web应用的输入来重跑R脚本，这时你会需要其他的解决方案，如Shiny webserver 或是Rserver 与某个web服务器的集成，亦或是其他类型的接口。双向通信超过了本文的范围，所以我们还是接着考察单向通信的方案吧。

先绘图，再绑定

让我们先看看选项一。我们已经知道了怎么使用ggplot。使用R和gridSVG包可以将附有数据的表格转换为一个SVG元素。然后，我们可以开始将javascript绑定到SVG里的各个元素上。点这看结果。将鼠标移到“interpolated（插入）”点看提示。产生这个结果（这里有解释）需要一定的手动操作。我们需要细看SVG代码，找到class和id的名字以便我们将我们的javascript绑定上去。这就是这里唯一的绑定。同样，这不是一个很灵活的方法。

对于这个问题，有一个解决方案，那就是Plotly。基于D3开发的Plotly可以包揽所有的绑定的工作。它提供的许多API里不仅有支持R的，还有支持Python，Matlab，NodeJS以及Excel的。它甚至还提供专有的API给ggplot用户，让我们方便地扩展我们之前的例子。它的工作方式是把你的ggplot(包含了你的数据)上传到他们服务器的库中，然后所有D3绑定的工作在上面完成，于是你就得到了一个具有完全交互性的图表。你可以将其嵌入到任何网页中:

请注意，你无法在D3库的整个范围内都使用Plotly。它只适用于“基本的”表格和图表。

先绑定，再绘图

接着是选项二。让我们把R和Javascript的优势发挥出来，R去处理和传输数据，然后Javascript将处理过的数据可视化。

为了阐明这个过程，我们用一个新例子从零开始。我们将会经历数据科学的三个基本步骤。

1. 获取数据
2. 清洗数据
3. 展示数据

步骤1和2都在R里完成，而步骤3是在Javascript里完成。我们将用本博客的数据去展示这个机制。

通过图中包含了所有信息的html页面，我们知道表里的每行都有一个 author（作者），一个title（标题），多个tag（标记），多个categories（分类）以及一个publication date（发布日期）。。我们可以识别出这些实体之间的关系。D3的捆图布局（bundle layout）可以很好的用于展示关系型数据。如果我们想要使用这样的可视化，我们需要知道数据的格式应该是什么。我们可以从D3的代码示例中看到数据的来源：一个JSON文件。该文件包含了以元素的类型分组的不同元素间的所有关系。有了知识的武装，我们现在可以开始去征服这三个基本步骤了。

步骤一：获取数据

我们通过抓取含有所有博文的综述的html页面获取数据。该页面里的博客数据有组织地保存在一个html的表中。R中有可以让你轻松地从这样的表中抓取数据的包。首先我们要保存这个页面为静态html页，以便我们能更容易地解析。大概的代码如下。

1 2 3 4

library(XML)   # read all html table elements raw

步骤二：清洗数据

完成了第一个步骤，我们得到了我们的数据。下一步就是清洗数据并将它保存为合适的格式。想知道“合适的格式”是什么我们可以看一看D3的代码示例。可视化的输入数据是一个JSON文件。该文件应保存各个元素之间的所有关系。处理结果看起来是这样的：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

[    {      name: "Title.But do you love it?",      size: 0,      imports: [        "Author.Roman Verraest",        "Categorie.Business Consulting",        "Tag.AE Foyer",        "Date.2014-12",        "Tag.Business Architecture",        "Tag.Customer Journey",        "Categorie.Enterprise Architecture";      ]    },    {      ...

为了得到这个结果，我们可以使用R去重新组织数据。R有一些可以帮我们完成做这个任务的包。比如，可以重组表格式的数据的’reshape’包，或是可以将R对象序列化为JSON的’RJSONIO’包。在一些R的魔术之后，数据已经清洗完毕并转换为合适的格式。

步骤三：展示数据

D3访问包含了所有数据的JSON文件：

1 2 3

d3.json("input.json",function(err,classes) { ... });

只需要简单地将这些数据插入这个代码示例，我们就能得到最终的结果：一个全交互的D3图表（截图如下）。将鼠标移动到文本上面，可以看到不同的实体之间的所有关系。 

后记

其实关于将R和D3结合使用，还有很多内容可以讲。这篇文章仅仅触到了一些皮毛。像rCharts和clickme或是用Shiny和D3可视化ggplots之类的项目，都是其他一些结合R和D3的方案。