{"id":1740,"date":"2014-11-22T12:16:54","date_gmt":"2014-11-22T12:16:54","guid":{"rendered":"http:\/\/brain.payzip.co.kr\/?p=1740"},"modified":"2014-11-22T12:16:54","modified_gmt":"2014-11-22T12:16:54","slug":"r-interactive-visualization-from-r-to-d3-using-rcharts","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=1740","title":{"rendered":"R : Interactive visualization: from R to D3 using rCharts"},"content":{"rendered":"
\n
\n

http:\/\/zevross.com\/blog\/2014\/04\/03\/interactive-visualization-from-r-to-d3-using-rcharts\/<\/a><\/h1>\n

Interactive visualization: from R to D3 using rCharts<\/code><\/h1>\n
Posted on zev@zevross.com<\/a><\/span><\/span><\/div>\n<\/header>\n
\n

Data Driven Documents, or D3 for short, is an incredible JavaScript library for creating interactive data visualization on the web. Earlier this year, for example, we illustrated the power of D3 by interactively linking maps and charts in this visualization<\/a>.<\/p>\n

D3, however, can be challenging to work with, especially if you don’t have experience with JavaScript. Luckily, for those who work with R, the package rCharts<\/code>, created by Ramnath Vaidyanathan, makes moving your R visualizations to the web much easier. The package is designed to help users to create interactive JavaScript visualizations directly from R. One of the nice features of rCharts<\/code> is that it does not limit itself to a single JavaScript library but rather provides the capacity to create charts using a wide range of libraries including Polychart, Morris, NVD3, xCharts, HighCharts, Rickshaw and even maps using Leaflet. In this example, though, we will focus on D3.<\/p>\n

An example using rCharts<\/code>: spatial packages in R through time<\/h2>\n

In order to test out the package we’re going to develop a line plot showing the growth in the number of spatial data-related packages in R. Spatial data-related packages will be defined as those listed on the Analysis of Spatial Data Task View<\/a> on the Comprehensive R Archive Network (CRAN) and maintained by Roger Bivand.<\/p>\n

1. Install rCharts<\/code> from GitHub<\/h3>\n

If you haven’t already installed rCharts, unfortunately, it’s not quite as simple as typinginstall.packages(\"rCharts\")<\/code>. Instead you will need to load it from GitHub using a helper function from the devtools library created by Hadley Wickham. To install you can use the following code:<\/p>\n

library<\/span>(devtools)\ninstall_github('rCharts'<\/span>, 'ramnathv'<\/span>)\n\n<\/code><\/pre>\n
2. Use the XML<\/code> package to grab the list of spatial packages<\/h3>\n
Now you’re ready to begin coding. We will load the XML package to help us grab the list of spatial packages from CRAN and then we do a little formatting.<\/p>\n
require<\/span>(XML)\nrequire<\/span>(rCharts)\n\n# URL of the task view (thanks Roger Bivand)<\/span>\nurl<-\"http:\/\/cran.r-project.org\/web\/views\/Spatial.html\"<\/span>\n\n# grab list of packages<\/span>\nspat<-readHTMLList(url, stringsAsFactors = F<\/span>)[[2<\/span>]]\n\n# For cleanliness drop the word '(core)' from the package name<\/span>\nspat<-gsub(\" \\\\(core\\\\)\"<\/span>, \"\"<\/span>, spat)\n<\/code><\/pre>\n
3. Create a function to get package dates<\/h3>\n
For each package I want to know the most recent date it was published as well as the very first publish date. To do this we will cycle through the package names and for each we will get the most recent date from the main package site and then we will get the earliest package date from the package’s archive page. If a package does not have an archive (meaning it’s a new package) then we will use the current date as the first date. Here is the function:<\/p>\n
\ngetPkgInfo<-function<\/span>(pkg){\n  url = paste(\"http:\/\/cran.r-project.org\/web\/packages\/\"<\/span>, pkg, \"\/index.html\"<\/span>, sep=\"\"<\/span>)\n\n  # get table of details and extract most current date<\/span>\n  dtl<-readHTMLTable(url, stringsAsFactors = F<\/span>)[[1<\/span>]]\n  curdate<-dtl[which(dtl[,1<\/span>]==\"Published:\"<\/span>),2<\/span>]\n\n  # get first archive date<\/span>\n  url = paste('http:\/\/cran.r-project.org\/src\/contrib\/Archive\/'<\/span>, pkg, '\/'<\/span>, sep=\"\"<\/span>)\n  packages = try<\/span>(readHTMLTable(url, stringsAsFactors = F<\/span>)[[1<\/span>]][-1<\/span>,])\n\n  # if there is no archive first date is current date<\/span>\n  if<\/span>(class(packages)=='try-error'<\/span>){\n    print(\"in error\"<\/span>)\n    firstdate<-as.Date(curdate)\n\n  #otherwise get first archive date<\/span>\n  }else<\/span>{ \n\n    packages<-packages[-1<\/span>,]\n    firstdate<-as.Date(packages[1<\/span>,\"Last modified\"<\/span>],\"%d-%b-%Y %H:%M\"<\/span>)\n\n\n  }\n  return<\/span>(data.frame(pkg=pkg, firstdate=firstdate, curdate=curdate))\n}\n<\/code><\/pre>\n
4. Use the function to assemble the table<\/h3>\n
We will run the function on all package names using lapply<\/code> and then bind them together into one table using do.call<\/code>.<\/p>\n
\npkgdates<-do.call(\"rbind\"<\/span>, lapply(spat, getPkgInfo))\n\npkgdates<-pkgdates[order(pkgdates$firstdate),]\npkgdates$numpkg<-1<\/span>:nrow(pkgdates)\npkgdates$datechar<-as.character(pkgdates$firstdate)\nhead(pkgdates)\n##          pkg  firstdate    curdate numpkg   datechar<\/span>\n## 8      akima 1998-08-20 2013-09-16      1 1998-08-20<\/span>\n## 124  tripack 1998-08-20 2013-09-16      2 1998-08-20<\/span>\n## 10       ash 1999-04-21 2013-02-11      3 1999-04-21<\/span>\n## 92  sgeostat 1999-04-21 2013-03-01      4 1999-04-21<\/span>\n## 65      nlme 1999-11-23 2014-03-31      5 1999-11-23<\/span>\n## 115  splancs 2000-11-05 2013-09-01      6 2000-11-05<\/span>\n<\/code><\/pre>\n
5. Create the chart using rCharts<\/code><\/h3>\n
Now that we have the table we want to use, creating a D3 chart using rCharts<\/code> is straightforward. Note that rCharts<\/code> uses NVD3.js, a library designed to build re-usable charts for D3, to create these plots. The function for creating a D3 chart is nPlot and you use it like this:<\/p>\n
\nd3chart<-nPlot(numpkg~firstdate, data=pkgdates, type=\"lineChart\"<\/span>)\n<\/code><\/pre>\n
6. Customize your chart<\/h3>\n
I found that the default tooltip and x-axis format for dates were not what I wanted so I used the following code to improve on the defaults. I did find the rCharts documentation to be lacking in places. Finding the right approach to altering the tooltips and the axes took some digging. Hopefully the documentation will be improved in the near future. In the meantime, the rCharts readthedocs<\/a> is a good place to start. Here is the code to modify the tooltip and x-axis:<\/p>\n
\nd3chart$chart(tooltipContent = \"#! function(key, x, y, e){ \n  return 'Package: ' + e.point.pkg\n} !#\"<\/span>)\n\n\nd3chart$xAxis(\n  tickFormat = \"#!function(d) {return d3.time.format('%b %Y')(new Date( d * 86400000 ));}!#\"<\/span>\n)\n<\/code><\/pre>\n
6. Finally, you’re ready to save and publish your result<\/h3>\n
rCharts<\/code> has a number of ways to save and publish your charts. To simply save to the current working directory you can use the following code:<\/p>\n
d3chart$save('d3chart.html'<\/span>, cdn=TRUE<\/span>)\n<\/code><\/pre>\n
This saves an HTML file in your working directory. Note that, by default, the paths to dependencies will be on your computer. If you want the script to point to a hosted source of these dependencies (a content delivery network\/CDN) you will need to include the argument cdn=TRUE<\/code>.<\/p>\n
A very nice additional piece of functionality is the ability to publish your chart as a gist at GitHub. You simply run the following code \u2013 it will ask you for your username and password and add the gist to GitHub. You can view your gist athttp:\/\/rcharts.github.io\/viewer\/XXXXX<\/a> where XXXXX is the gist id.<\/p>\n
d3chart$publish('rCharts D3 Spatial Packages'<\/span>, host = 'gist'<\/span>)\n<\/code><\/pre>\n
Here is the final result, hover over the line to identify the packages published on that date<\/h3>\n