New release (0.7) of metricsgraphics htmlwidget — grids & rollovers

[This article was first published on » R, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

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:


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

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 %>%
         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))


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):

dat <- data.frame(date=seq(as.Date("2014-01-01"),
                           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 : ' + + ' ' + i);


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.

To leave a comment for the author, please follow the link and comment on their blog: » R. offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)