Markdown example with knitr and rCharts

=========================================== This is an example file showing how to use rCharts with knitr/markdown. rCharts an R package to create, customize and publish interactive javascript visualizations from R.

Let's first install it, it lives on github, not on CRAN yet.

require(devtools)
install_github("rCharts", "ramnathv", ref = "dev")

Scatter plot using Polycharts

require(rCharts)

## Loading required package: rCharts

names(iris) = gsub("\\.", "", names(iris))
add_lib_assets("Polycharts", cdn = TRUE)

[1] "<script type='text/javascript' src=https://rawgithub.com/Polychart/polychart2/develop/polychart2.standalone.js></script>"

r1 <- rPlot(SepalLength ~ SepalWidth | Species, data = iris, color = "Species", 
    type = "point")
r1$print("polyScatter")

Multi barchart using NVD3

add_lib_assets("NVD3")  # get assets from online repositories

[1] "\n\n<script type='text/javascript' src=/Library/Frameworks/R.framework/Versions/3.0/Resources/library/rCharts/libraries/NVD3/js/jquery-1.8.2.min.js></script>\n<script type='text/javascript' src=/Library/Frameworks/R.framework/Versions/3.0/Resources/library/rCharts/libraries/NVD3/js/d3.v3.min.js></script>\n<script type='text/javascript' src=/Library/Frameworks/R.framework/Versions/3.0/Resources/library/rCharts/libraries/NVD3/js/nv.d3.min-new.js></script>\n<script type='text/javascript' src=/Library/Frameworks/R.framework/Versions/3.0/Resources/library/rCharts/libraries/NVD3/js/fisheye.js></script>"

hair_eye_male <- subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Hair, group = "Eye", data = hair_eye_male, type = "multiBarChart")
n1$chart(height = 200)  # change plot height Chrome/FF doesn't automatically get plot height but safari does
n1$print("nvd3mbar")

  var data = d3.nest()
    .key(function(d){
      return opts.group === undefined ? 'main' : d[opts.group]
    })
    .entries(data)
  
  nv.addGraph(function() {
    var chart = nv.models[opts.type]()
      .x(function(d) { return d[opts.x] })
      .y(function(d) { return d[opts.y] })
      .width(opts.width)
      .height(opts.height)
     
    chart

.height( 200)

   d3.select("#" + opts.id)
    .append('svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

   nv.utils.windowResize(chart.update);
   return chart;
  });
};

</script>

Scatter Plot from NVD3

Scatter plot example with rCharts using NVD3 JS library

data(iris)
sepal <- iris[, c(1:2, 5)]

n2 <- nPlot(Sepal.Length ~ Sepal.Width, data = sepal, type = "scatterChart", 
    group = "Species")
n2$xAxis(axisLabel = "Sepal.Width")  # add x axis label
n2$yAxis(axisLabel = "Sepal.Length")
n2$chart(height = 400)  # change plot height Chrome/FF doesn't automatically get plot height but safari does
n2$print("nvd3Scatter")

  var data = d3.nest()
    .key(function(d){
      return opts.group === undefined ? 'main' : d[opts.group]
    })
    .entries(data)
  
  nv.addGraph(function() {
    var chart = nv.models[opts.type]()
      .x(function(d) { return d[opts.x] })
      .y(function(d) { return d[opts.y] })
      .width(opts.width)
      .height(opts.height)
     
    chart

.height( 400)

    chart.xAxis

.axisLabel("Sepal.Width")

    chart.yAxis

.axisLabel("Sepal.Length")

   d3.select("#" + opts.id)
    .append('svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

   nv.utils.windowResize(chart.update);
   return chart;
  });
};

</script>

Histogram Plot from NVD3

Let's try to plot a multihistogram with rCharts using NVD3 library. We need to first calculate break points and mid points for the histogram bars and produce a single data frame that has the counts, mid-points for bars and group information.

data(iris)
sepalw <- iris[, c(1, 5)]
hst = hist(sepalw[, 1], plot = FALSE, breaks = 20)

data = by(sepalw, sepalw$Species, function(x) data.frame(mid = hst$mids, counts = hist(x[, 
    1], breaks = hst$breaks, plot = FALSE)$counts, Species = rep(x[1, 2], length(hst$breaks) - 
    1)))
data = do.call("rbind", data)
head(data)

##          mid counts Species
## setosa.1 4.3      4  setosa
## setosa.2 4.5      5  setosa
## setosa.3 4.7      7  setosa
## setosa.4 4.9     12  setosa
## setosa.5 5.1     11  setosa
## setosa.6 5.3      6  setosa

We got the data in the right format, now let's plot the histogram with multiBarChart

n3 <- nPlot(counts ~ mid, data = data, type = "multiBarChart", group = "Species")
n3$xAxis(axisLabel = "Sepal.Width")
n3$yAxis(axisLabel = "counts")
n3$chart(color = c("red", "blue", "green"))
n2$chart(height = 400)  # change plot height Chrome/FF doesn't automatically get plot height but safari does
n3$print("nvd3Hist")

  var data = d3.nest()
    .key(function(d){
      return opts.group === undefined ? 'main' : d[opts.group]
    })
    .entries(data)
  
  nv.addGraph(function() {
    var chart = nv.models[opts.type]()
      .x(function(d) { return d[opts.x] })
      .y(function(d) { return d[opts.y] })
      .width(opts.width)
      .height(opts.height)
     
    chart

.color([ "red", "blue", "green" ])

    chart.xAxis

.axisLabel("Sepal.Width")

    chart.yAxis

.axisLabel("counts")

   d3.select("#" + opts.id)
    .append('svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

   nv.utils.windowResize(chart.update);
   return chart;
  });
};

</script>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rChartsLocalLib.md

rChartsLocalLib.md

Markdown example with knitr and rCharts

Scatter plot using Polycharts

Multi barchart using NVD3

Scatter Plot from NVD3

Histogram Plot from NVD3

Files

rChartsLocalLib.md

Latest commit

History

rChartsLocalLib.md

File metadata and controls

Markdown example with knitr and rCharts

Scatter plot using Polycharts

Multi barchart using NVD3

Scatter Plot from NVD3

Histogram Plot from NVD3