metricsgraphics is an 'htmlwidget' interface to the MetricsGraphics.js D3 chart library.
The current htmlwidget wrapper for it is minimaly functional and does not provide support for metricsgraphics histograms and provides nascent support for metricsgraphics' best feature - time series charts.
Charts look best in a Boostrap page (unless you customize your own CSS).
You can see [core examples] (http://rpubs.com/hrbrmstr/53741) and fairly extended grid example on RPubs.
The following functions are implemented:
mjs_plot: Create a new metricsgraphics.js plotmjs_line: metricsgraphics.js linechart "geom"mjs_add_line: used to add additional columns for a multi-line chartmjs_hist: Shortcut for plotting MetricsGraphics histogramsmjs_histogram: Plot Histograms with MetrisGraphicsmjs_add_legend: adds a legend to a line (or mult-line) chartmjs_point: metricsgraphics.js scatterplot "geom"mjs_bar: metricsgraphics.js bar chart "geom"mjs_axis_x: Configure x axis ticks & limitsmjs_axis_y: Configure y axis ticks & limitsmjs_labs: Configure axis labels & plot descriptionmjs_add_baseline: Sets a baseline line/labelmjs_add_marker: Sets a marker line/labelmjs_grid:grid.arrange-like functionality formetricsgraphicschartsmjs_add_mouseover: provides support for MetricsGraphics custom rollovers
- Version 0.1 released
- Version 0.2 released - added support for markers & baselines + minimal support for time-series
- Version 0.3 released - coded up more config parameters (including color and point sizes) and added support for multi-line plots
- Version 0.3.1 released -
mjs_markerwill now convert dates properly - Version 0.4 released - added
mjs_add_legendto support legends in line/multi-line charts - Version 0.4.1 released - added support for linked charts (currently only works in
Rmdfiles and mebbe Shiny if I can get more than one plot to show up in Shiny). See the online Rmd demo (scroll to bottom); also added some parameter error checking - Version 0.5 released - added histograms (
mjs_histogram&mjs_hist) - Version 0.6 relased - added
mjs_gridforgrid.arrange-like functionality for placing multiple charts (ref: http://rpubs.com/hrbrmstr/metricsgraphics0-6) - Version 0.6.1 released - Fixed bug that broke widget in new shiny/shinydashboard context
- Version 0.7 released - Updated widget for MetricsGraphics 2.1.0; added
mjs_add_mouseoverand tweakedmjs_bar. NOTE: As the Mozilla folks said, the bar charts API is quite unstable. There won't be much effort to support them in this package until the API stabilizes a bit more. - Version 0.7.5 released - updated all functions that take bare inputs and made them flexible enough to take bare or quoted inputs.
devtools::install_github("hrbrmstr/metricsgraphics")library(metricsgraphics)
library(RColorBrewer)
tmp <- data.frame(year=seq(1790, 1970, 10), uspop=as.numeric(uspop))
tmp %>%
mjs_plot(x=year, y=uspop) %>%
mjs_line() %>%
mjs_add_marker(1850, "Something Wonderful") %>%
mjs_add_baseline(150, "Something Awful")
tmp %>%
mjs_plot(x=year, y=uspop, width=600) %>%
mjs_line(area=TRUE)
tmp %>%
mjs_plot(x=uspop, y=year, width=500, height=400) %>%
mjs_bar() %>%
mjs_axis_x(xax_format = 'plain')
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")
mtcars %>%
mjs_plot(x=wt, y=mpg, width=400, height=300) %>%
mjs_point(least_squares=TRUE) %>%
mjs_labs(x="Weight of Car", y="Miles per Gallon")
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) %>%
mjs_line() %>%
mjs_axis_x(xax_format = "date")
# Custom rollovers
dat %>%
mjs_plot(x=date, y=value) %>%
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);
}")
set.seed(1492)
stocks <- 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))
stocks %>%
mjs_plot(x=time, y=X) %>%
mjs_line() %>%
mjs_axis_x(show=FALSE) %>%
mjs_axis_y(show=FALSE)
stocks %>%
mjs_plot(x=time, y=X) %>%
mjs_line() %>%
mjs_add_line(Y) %>%
mjs_add_line(Z) %>%
mjs_axis_x(xax_format="date")
mjs_plot(rnorm(10000)) %>%
mjs_histogram(bins=30, bar_margin=1)
movies <- ggplot2::movies[sample(nrow(ggplot2::movies), 1000), ]
mjs_plot(movies$rating) %>% mjs_histogram()
mjs_plot(movies, rating) %>%
mjs_histogram() %>%
mjs_labs(x_label="Histogram of movie ratings",
y_label="Frequency")
mjs_plot(movies$rating) %>% mjs_histogram(bins=30)
mjs_plot(runif(10000)) %>%
mjs_labs(x_label="runif(10000)") %>%
mjs_histogram()
mjs_plot(rbeta(10000, 2, 5)) %>%
mjs_labs(x_label="rbeta(10000, 2, 3)") %>%
mjs_histogram(bins=100) %>%
mjs_axis_y(extended_ticks=TRUE)
bimod <- c(rnorm(1000, 0, 1), rnorm(1000, 3, 1))
mjs_plot(bimod) %>% mjs_histogram()
mjs_plot(bimod) %>% mjs_histogram(bins=30)
bimod %>% mjs_hist(30)
library(shiny)
library(metricsgraphics)
ui = shinyUI(fluidPage(
h3("MetricsGraphics Example", style="text-align:center"),
metricsgraphicsOutput('mjs1'),
br(),
metricsgraphicsOutput('mjs2')
))
server = function(input, output) {
mtcars %>%
mjs_plot(x=wt, y=mpg, width=400, height=300) %>%
mjs_point(color_accessor=carb, size_accessor=carb) %>%
mjs_labs(x="Weight of Car", y="Miles per Gallon") -> m1
set.seed(1492)
stocks <- 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))
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")) -> m2
output$mjs1 <- renderMetricsgraphics(m1)
output$mjs2 <- renderMetricsgraphics(m2)
}
shinyApp(ui = ui, server = server)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent