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

转载 2015年11月19日 23:03:02

根据维基百科,在各种组织里非结构性数据可能占据了所有数据的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结合使用,还有很多内容可以讲。这篇文章仅仅触到了一些皮毛。像rChartsclickme或是用Shiny和D3可视化ggplots之类的项目,都是其他一些结合R和D3的方案。

相关文章推荐

d3.js实现动态拓扑图

  • 2017年10月24日 16:08
  • 1.9MB
  • 下载

使用D3.js进行数据可视化

楼主最近在做一个将特定图结构的数据进行可视化的项目,用到了前段可视化库D3.js,在这里分享一下学习心得。 QuickStart html> title>title> script src...

D3.js Cutting-edge Data Visualization epub

  • 2017年10月05日 15:31
  • 15.53MB
  • 下载

【 D3.js 高级系列 — 5.0 】 颜色

颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值。RGB色彩模式是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道相互叠加来...
  • lzhlzz
  • lzhlzz
  • 2015年04月19日 19:17
  • 7769

D3.js In Action 无水印pdf

  • 2017年10月05日 15:36
  • 13.15MB
  • 下载

Learning D3.js Mapping 无水印pdf

  • 2017年10月05日 21:57
  • 2.14MB
  • 下载

基于d3.js简单bubble图

借鉴:Hui-NaN博主的博客 一、效果图 二、html代码 ...

Mastering D3.js 无水印pdf

  • 2017年10月05日 23:41
  • 3.44MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:珠联璧合:组合 R 语言和 D3.js 的力量
举报原因:
原因补充:

(最多只允许输入30个字)