I’ve updated my metricsgraphics package to version 0.7. The core MetricsGraphics JavaScript library has been updated to version 2.1.0 (from 1.1.0). Two blog-worthy features since releasing version 0.5 are mjs_grid (which is a grid.arrange-like equivalent for metricsgraphics plots and mjs_add_rollover which lets you add your own custom rollover text to the plots.

The Grid

The grid.arrange (and arrangeGrob) functions from the gridExtra package come in handy when combining ggplot2 charts. I wanted a similar way to arrange independent or linked metricsgraphics charts, hence mjs_grid was born.

mjs_grid uses the tag functions in htmltools to arrange metricsgraphics plot objects into an HTML <table> structure. At present, only uniform tables are supported, but I’m working on making the grid feature more flexible (just like grid.arrange). The current functionality is pretty straightforward:

• You build individual metricsgraphics plots;
• Optionally combine them in a list;
• Pass in the plots/lists into mjs_grid;
• Tell mjs_grid how many rows & columns are in the grid; and
• Specify the column widths

But, code > words, so here are some examples. To avoid code repetition, note that you’ll need the following packages available to run most of the snippets below:

library(metricsgraphics)
library(htmlwidgets)
library(htmltools)
library(dplyr)

First, we’ll combine a few example plots:

tmp <- data.frame(year=seq(1790, 1970, 10), uspop=as.numeric(uspop))
tmp %>%
  mjs_plot(x=year, y=uspop, width=300, height=300) %>%
  mjs_line() %>%
  mjs_add_marker(1850, "Something Wonderful") %>%
  mjs_add_baseline(150, "Something Awful") -> mjs1
 
mjs_plot(rnorm(10000), width=300, height=300) %>%
  mjs_histogram(bins=30, bar_margin=1) -> mjs2
 
movies <- ggplot2::movies[sample(nrow(ggplot2::movies), 1000), ]
mjs_plot(movies$rating, width=300, height=300) %>% mjs_histogram() -> mjs3
 
tmp %>%
  mjs_plot(x=year, y=uspop, width=300, height=300) %>%
  mjs_line(area=TRUE) -> mjs4
 
mjs_grid(mjs1, mjs2, mjs3, mjs4, ncol=2, nrow=2)

Since your can pass a list as a parameter, you can generate many (similar) plots and then grid-display them without too much code. This one generates 7 random histograms with linked rollovers and displays them in grid. Note that this example has mjs_grid using the same algorithm grid.arrange does for auto-computing “optimal” grid size.

lapply(1:7, function(x) {
  mjs_plot(rnorm(10000, mean=x/2, sd=x), width=250, height=250, linked=TRUE) %>%
    mjs_histogram(bar_margin=2) %>%
    mjs_labs(x_label=sprintf("Plot %d", x))
}) -> plots
 
mjs_grid(plots)

And, you can use do from dplyr to get ggplot2 facet_-like behavior (though, one could argue that interactive graphics should use controls/selectors vs facets). This example uses the tips dataset from reshape2 and creates a list of plots that are then passed to mjs_grid:

tips <- reshape2::tips
a <- tips %>%
  mutate(percent=tip/total_bill,
         day=factor(day, levels=c("Thur", "Fri", "Sat", "Sun"), ordered=TRUE)) %>%
  group_by(day) %>%
  do( plot={ day_label <- unique(.$day)
             mjs_plot(., x=total_bill, y=percent, width=275, height=275, left=100) %>%
               mjs_point(color_accessor=sex, color_type="category") %>%
               mjs_labs(x_label=sprintf("Total Bill (%s)", day_label), y_label="Tip %") })
 
mjs_grid(a$plot, ncol=2, nrow=2, widths=c(0.5, 0.5))

Rollovers

I’ve had a few requests to support the use of different rollovers and this is a first stab at exposing MetricsGraphics’ native functionality to users of the metricsgraphics package. The API changed from MG 1.1.0 to 2.2.0, so I’m kinda glad I waited for this. It requires knowledge of javascript, D3 and the use of {{ID}} as part of the CSS node selector when targeting the MetricsGraphics SVG element that displays the rollover text. Here is a crude, but illustrative example of how to take advantage of this feature (mouseover the graphics to see the altered text):

set.seed(1492)
dat <- data.frame(date=seq(as.Date("2014-01-01"),
                           as.Date("2014-01-31"),
                           by="1 day"),
                  value=rnorm(n=31, mean=0, sd=2))
 
dat %>%
  mjs_plot(x=date, y=value, width=500, height=300) %>%
  mjs_line() %>%
  mjs_axis_x(xax_format = "date") %>%
  mjs_add_mouseover("function(d, i) {
                $('{{ID}} svg .mg-active-datapoint')
                    .text('custom text : ' + d.date + ' ' + i);
                 }")

Postremo

If you are using metricsgraphics, drop a link in the comments here to show others how you’re using it! If you need/want some functionality (I’m hoping to get xts support into the 0.8 release) that isn’t already in existing feature requests or something’s broken for you, post a new issue on github.