Mozilla released the MetricsGraphics.js library back in November of 2014 (gh repo) and was greeted with great fanfare. It’s primary focus is on crisp, clean layouts for interactive time-series data, but they have support for other chart types as well (though said support is far from comprehensive). I had been pondering building an R package to help generate these charts when Ramnath Vaidyanathan, Kenton Russell & JJ Allaire came up with the insanely awesome htmlwidgets R package, which is the best javascriptR bridge to-date. Here’s a quick take on how to make a basic line chart before going into some package (and MetricsGraphics) details: Example of Basic MetricsGrahics ChartOne of the package goals (which should be evident from the example) is that it had to conform to the new “piping” idiom, made popular through the magrittr, ggvis and dplyr packages. This made it possible to avoid one function with a ton of parameters and help break out the chart building into logical steps. While it may not have the flexibility of ggplot2, you can do some neat things with MetricsGraphics charts, like use multiple lines: Stocks X, Y & Z over timeand, pretty configurable scatterplots: Motor Trend Cars – mpg~wtThe htmlwidgets developers go into great detail on how to create a widget, but there are some central points I’ll cover and potentially reiterate. First, use the htmlwidgets::scaffoldWidget that htmlwidgets provides to kickstart your project. It’ll setup the essentials and free your time up to work on the interface components. You will need to edit the generated yaml file to use the minified javascript files for things like jquery or d3 since Chrome will be unhappy if you don’t. Next, remember that all you’re doing is building an R object with data to be passed into a javascript function/environment. MetricsGraphics made this a bit easier for me since the main graphic configuration is one, giant parameter list (take a look at the metricsgraphics.js source in github). Third, if you need to customize the html generation function in the main packagename_html file, ensure you pass in class to the main div element. I was very pleased to discover that you can return a list of HTML elements vs a single one: and that may eventually enable support for facet-like functionality without manually creating multiple plots. Fourth, try to build around the piping idiom. It makes it so much easier to add parameters and manage the data environment. Fifth, use iframes for embedding your visualizations in other documents (like this blog post). It avoids potential namespace collisions and frees you from having to cut/paste HTML from one doc to another. And, lastly, remember that you can generate your own elementId in the event you need to use it with your javascript visualization library (like I had to). Currently, metricsgraphics is at 0.4.1 and has support for most of the basic chart types along with linking charts (in Rmd files). You can install it from the github repo and make sure to file all issues or feature requests there. If you make something with it like @abresler did, drop a note in the comments! Now, go forth and wrap some libraries!