Introduction to Metricsgraphics
Metricsgraphics is an htmlwidget interface to the MetricsGraphics.js JavaScript/D3 chart library.

Installation
devtools::install_github(“hrbrmstr/metricsgraphics”)

Usage
Building metricsgraphics charts follows the “piping” idiom, made popular through the magrittr, ggvis and dplyr packages. This makes it possible to avoid one giant function with a ton of parameters and facilitates, breaking out the chart building into logical steps. While MetricsGraphics.js charts may not have the flexibility of the ggplot2, you can build functional, interactive [multi-]lines, scatter-plot, bar charts, histograms and you can even link charts together.

All plots begin with mjs_plot, which sets up the widget. You then use mjs_histograms, mjs_hist, mjs_line, mjs_bar or mjs_point to specify the “geom”” you want to use for plotting. However, unlike the ggplot2 (or even base plot), you cannot combine “geoms.” The only exception to that is adding more lines to a mjs_line plot. This is not a limitation of the package, but more a design principle of the underlying MetricsGraphics JavaScript library.

Examples

Basic Line Chart
This example shows a basic line chart with MetricsGraphics.js baseline [1] & marker [2] annotations:

library(htmltools) library(htmlwidgets) library(metricsgraphics) library(RColorBrewer)

tmp %
mjs_plot(x=year, y=uspop) %>%
mjs_line() %>%
mjs_add_marker(1850, “Something Wonderful”) %>%
mjs_add_baseline(150, “Something Awful”)

Basic Bar Chart
tmp %>% mjs_plot(x=uspop, y=year, width=500, height=400) %>% mjs_bar() %>% mjs_axis_x(xax_format = 'plain')

Scatter-plots
mtcars %>% mjs_plot(x=wt, y=mpg, width=600, height=500) %>% mjs_point(color_accessor=carb, size_accessor=carb) %>% mjs_labs(x="Weight of Car", y="Miles per Gallon")

mtcars %>%
mjs_plot(x=wt, y=mpg, width=600, height=500) %>%
mjs_point(color_accessor=cyl,
x_rug=TRUE, y_rug=TRUE,
size_accessor=carb,
size_range=c(5, 10),
color_type=”category”,
color_range=brewer.pal(n=11, name=”RdBu”)[c(1, 5, 11)]) %>%
mjs_labs(x=”Weight of Car”, y=”Miles per Gallon”) %>%
mjs_add_legend(legend=”X”)

mtcars %>%
mjs_plot(x=wt, y=mpg, width=600, height=500) %>%
mjs_point(least_squares=TRUE) %>%
mjs_labs(x=”Weight of Car”, y=”Miles per Gallon”)

Muti-line Charts
set.seed(1492) stocks % mjs_plot(x=time, y=X) %>% mjs_line() %>% mjs_add_line(Y) %>% mjs_add_line(Z) %>% mjs_axis_x(xax_format="date") %>% mjs_add_legend(legend=c("X", "Y", "Z"))

Grid
Mjs_grid is patterned after grid.arrange and lets you place many metricsgraphics plots in a grid.

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

mjs_grid(plots)

lapply(1:7, function(x)
mjs_plot(rbeta(10000, x, x), width=300, height=300) %>%
mjs_histogram(bar_margin=2) %>%
mjs_labs(x_label=sprintf(“Plot %d”, x))
}) -> moar_plots

mjs_grid(moar_plots, nrow=4, ncol=3, widths=c(rep(0.33, 3)))

Linked Charts
stocks2 <- data.frame( time = as.Date('2009-01-01') + 0:9, X = rnorm(10, 0, 1), Y = rnorm(10, 0, 2), Z = rnorm(10, 0, 4))

s1 %
mjs_plot(x=time, y=X, linked=TRUE, width=350, height=275) %>%
mjs_line() %>%
mjs_add_line(Y) %>%
mjs_add_line(Z) %>%
mjs_axis_x(xax_format=”date”) %>%
mjs_add_legend(legend=c(“X”, “Y”, “Z”))

s2 %
mjs_plot(x=time, y=X, linked=TRUE, width=350, height=275) %>%
mjs_line() %>%
mjs_add_line(Y) %>%
mjs_add_line(Z) %>%
mjs_axis_x(xax_format=”date”) %>%
mjs_add_legend(legend=c(“X”, “Y”, “Z”))

mjs_grid(s1, s2, ncol=2)