珠联璧合:组合 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的方案。

本文文字及图片出自 伯乐在线

余下全文(1/3)
分享这篇文章:

请关注我们:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注