转载

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

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

不可变的图表

当我们使用R做数据处理时，R本身自带了一些生成图表的选项。其中一个选项就是使用R的”ggplit2″包。这个包可以帮助我们轻松地把数据转化为漂亮的表格。下图就是使用 ggplot生成的表格。珠联璧合：组合 R 语言和 D3.js 的力量

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

一起来提升交互性

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

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

用R来做数据和图表的展现，然后将其导出到你的Javascript绑定的SVG上
用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绑定的工作在上面完成，于是你就得到了一个具有完全交互性的图表。你可以将其嵌入到任何网页中:

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

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

先绑定，再绘图

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

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

获取数据
清洗数据
展示数据

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

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

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