{"id":13425451,"url":"https://github.com/hrbrmstr/metricsgraphics","last_synced_at":"2025-07-17T20:33:16.607Z","repository":{"id":25384088,"uuid":"28812485","full_name":"hrbrmstr/metricsgraphics","owner":"hrbrmstr","description":":chart_with_upwards_trend: htmlwidget interface to the MetricsGraphics.js D3 chart library","archived":false,"fork":false,"pushed_at":"2018-02-03T14:38:42.000Z","size":16083,"stargazers_count":131,"open_issues_count":22,"forks_count":35,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-06-03T14:07:35.064Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://hrbrmstr.github.io/metricsgraphics/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hrbrmstr.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-05T12:55:35.000Z","updated_at":"2025-04-30T21:44:16.000Z","dependencies_parsed_at":"2022-08-21T06:50:10.309Z","dependency_job_id":null,"html_url":"https://github.com/hrbrmstr/metricsgraphics","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/hrbrmstr/metricsgraphics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrbrmstr%2Fmetricsgraphics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrbrmstr%2Fmetricsgraphics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrbrmstr%2Fmetricsgraphics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrbrmstr%2Fmetricsgraphics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hrbrmstr","download_url":"https://codeload.github.com/hrbrmstr/metricsgraphics/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrbrmstr%2Fmetricsgraphics/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265659002,"owners_count":23806846,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:01:12.644Z","updated_at":"2025-07-17T20:33:16.574Z","avatar_url":"https://github.com/hrbrmstr.png","language":"HTML","funding_links":[],"categories":["HTML","Tools","Visualization"],"sub_categories":["Integrations","Time Series"],"readme":"---\ntitle: metricsgraphics\noutput:\n  html_document:\n    keep_md: true\n  md_document:\n    variant: markdown_github\n---\n\n[![Build Status](https://travis-ci.org/hrbrmstr/metricsgraphics.svg)](https://travis-ci.org/hrbrmstr/metricsgraphics) \n[![Project Status: Active - The project has reached a stable, usable state and is being actively developed.](http://www.repostatus.org/badges/0.1.0/active.svg)](http://www.repostatus.org/#active) \n[![CRAN_Status_Badge](http://www.r-pkg.org/badges/version/metricsgraphics)](http://cran.r-project.org/web/packages/metricsgraphics) \n![downloads](http://cranlogs.r-pkg.org/badges/grand-total/metricsgraphics) [![DOI](https://zenodo.org/badge/5630/hrbrmstr/metricsgraphics.svg)](https://zenodo.org/badge/latestdoi/5630/hrbrmstr/metricsgraphics)\n\nOn CRAN: [http://cran.r-project.org/web/packages/metricsgraphics/index.html](http://cran.r-project.org/web/packages/metricsgraphics/index.html)\n\nVignette: [http://cran.r-project.org/web/packages/metricsgraphics/vignettes/introductiontometricsgraphics.html](http://cran.r-project.org/web/packages/metricsgraphics/vignettes/introductiontometricsgraphics.html)\n\nmetricsgraphics is an 'htmlwidget' interface to the [MetricsGraphics.js](http://metricsgraphicsjs.org/) D3-based charting library.\n\nCharts look best in a Boostrap page (unless you customize your own CSS).\n\nYou can see [core examples] (http://rpubs.com/hrbrmstr/53741) and [fairly extended grid example](http://rpubs.com/hrbrmstr/mjs_grid_07) on RPubs.\n\nThe following functions are implemented:\n\n- `mjs_plot`:  Create a new metricsgraphics.js plot\n- `mjs_line`:  metricsgraphics.js linechart \"geom\"\n- `mjs_add_line`: used to add additional columns for a multi-line chart\n- `mjs_hist`: Shortcut for plotting MetricsGraphics histograms\n- `mjs_histogram`: Plot Histograms with MetrisGraphics\n- `mjs_add_legend`: adds a legend to a line (or mult-line) chart\n- `mjs_point`:\tmetricsgraphics.js scatterplot \"geom\"\n- `mjs_bar`:  metricsgraphics.js bar chart \"geom\"\n- `mjs_axis_x`:  Configure x axis ticks \u0026 limits\n- `mjs_axis_y`:\tConfigure y axis ticks \u0026 limits\n- `mjs_labs`:\tConfigure axis labels \u0026 plot description\n- `mjs_add_baseline`: Sets a baseline line/label\n- `mjs_add_marker`: Sets a marker line/label\n- `mjs_grid`: `grid.arrange`-like functionality for `metricsgraphics` charts\n- `mjs_add_mouseover`: provides support for MetricsGraphics [custom rollovers](https://github.com/mozilla/metrics-graphics/wiki/Graphic#mouseover)\n- `mjs_add_confidence_band`: provides support for confidence bands\n- `mjs_annotate_region`: Region annotations for line charts [EXPERIMENTAL]\n- `mjs_add_css_rule`: Add a CSS rule to the rendered htmlwidget\n\n### Installation\n\n```{r eval=FALSE}\n# stable\ninstall.packages(\"metricsgraphics\")\n# development\n# devtools::install_github(\"hrbrmstr/metricsgraphics\")\n```\n\n```{r echo=FALSE, message=FALSE, warning=FALSE, error=FALSE}\noptions(width=120)\n```\n\n### Usage\n\n```{r eval=FALSE}\nlibrary(metricsgraphics)\nlibrary(RColorBrewer)\n\ntmp \u003c- data.frame(year=seq(1790, 1970, 10), uspop=as.numeric(uspop))\n\ntmp %\u003e%\n  mjs_plot(x=year, y=uspop) %\u003e%\n  mjs_line() %\u003e%\n  mjs_add_marker(1850, \"Something Wonderful\") %\u003e%\n  mjs_add_baseline(150, \"Something Awful\")\n\n\ntmp %\u003e%\n  mjs_plot(x=year, y=uspop, width=600) %\u003e%\n  mjs_line(area=TRUE)\n\ntmp %\u003e%\n  mjs_plot(x=uspop, y=year, width=500, height=400) %\u003e%\n  mjs_bar() %\u003e%\n  mjs_axis_x(xax_format = 'plain')\n\n\nmtcars %\u003e%\n  mjs_plot(x=wt, y=mpg, width=600, height=500) %\u003e%\n  mjs_point(color_accessor=carb, size_accessor=carb) %\u003e%\n  mjs_labs(x=\"Weight of Car\", y=\"Miles per Gallon\")\n\n\nmtcars %\u003e%\n  mjs_plot(x=wt, y=mpg, width=600, height=500) %\u003e%\n  mjs_point(color_accessor=cyl,\n            x_rug=TRUE, y_rug=TRUE,\n            size_accessor=carb,\n            size_range=c(5, 10),\n            color_type=\"category\",\n            color_range=brewer.pal(n=11, name=\"RdBu\")[c(1, 5, 11)]) %\u003e%\n  mjs_labs(x=\"Weight of Car\", y=\"Miles per Gallon\")\n\n\nmtcars %\u003e%\n  mjs_plot(x=wt, y=mpg, width=400, height=300) %\u003e%\n  mjs_point(least_squares=TRUE) %\u003e%\n  mjs_labs(x=\"Weight of Car\", y=\"Miles per Gallon\")\n\n\nset.seed(1492)\ndat \u003c- data.frame(date=seq(as.Date(\"2014-01-01\"),\n                           as.Date(\"2014-01-31\"),\n                           by=\"1 day\"),\n                  value=rnorm(n=31, mean=0, sd=2))\n\ndat %\u003e%\n  mjs_plot(x=date, y=value) %\u003e%\n  mjs_line() %\u003e%\n  mjs_axis_x(xax_format = \"date\")\n\n# Custom rollovers\n\ndat %\u003e%\n  mjs_plot(x=date, y=value) %\u003e%\n  mjs_line() %\u003e%\n  mjs_axis_x(xax_format = \"date\") %\u003e%\n  mjs_add_mouseover(\"function(d, i) {\n                $('{{ID}} svg .mg-active-datapoint')\n                    .text('custom text : ' + d.date + ' ' + i);\n                 }\")\n\n# also works for scatterplots with a slight mod\n\nset.seed(1492)\ndat \u003c- data.frame(value=rnorm(n=30, mean=5, sd=1),\n                 value2=rnorm(n=30, mean=4, sd=1),\n                 test = c(rep(c('test', 'test2'), 15)))\ndat %\u003e%\n mjs_plot(x = value, y = value2) %\u003e%\n mjs_point() %\u003e%\n mjs_add_mouseover(\"function(d, i) {\n               $('{{ID}} svg .mg-active-datapoint')\n                   .text('custom text : ' + d.point.test + ' ' + i);\n                }\")\n\nset.seed(1492)\nstocks \u003c- data.frame(\n  time = as.Date('2009-01-01') + 0:9,\n  X = rnorm(10, 0, 1),\n  Y = rnorm(10, 0, 2),\n  Z = rnorm(10, 0, 4))\n\nstocks %\u003e%\n  mjs_plot(x=time, y=X) %\u003e%\n  mjs_line() %\u003e%\n  mjs_axis_x(show=FALSE) %\u003e%\n  mjs_axis_y(show=FALSE)\n\nstocks %\u003e%\n  mjs_plot(x=time, y=X) %\u003e%\n  mjs_line() %\u003e%\n  mjs_add_line(Y) %\u003e%\n  mjs_add_line(Z) %\u003e%\n  mjs_axis_x(xax_format=\"date\")\n\nmjs_plot(rnorm(10000)) %\u003e%\n  mjs_histogram(bins=30, bar_margin=1)\n\nmovies \u003c- ggplot2movies::movies[sample(nrow(ggplot2movies::movies), 1000), ]\n\nmjs_plot(movies$rating) %\u003e% mjs_histogram()\n\nmjs_plot(movies, rating) %\u003e% \n  mjs_histogram() %\u003e% \n  mjs_labs(x_label=\"Histogram of movie ratings\", \n           y_label=\"Frequency\")\n\nmjs_plot(movies$rating) %\u003e% mjs_histogram(bins=30)\n\nmjs_plot(runif(10000)) %\u003e% \n  mjs_labs(x_label=\"runif(10000)\") %\u003e%\n  mjs_histogram()\n\n\nmjs_plot(rbeta(10000, 2, 5)) %\u003e%\n  mjs_labs(x_label=\"rbeta(10000, 2, 3)\") %\u003e%\n  mjs_histogram(bins=100) %\u003e% \n  mjs_axis_y(extended_ticks=TRUE)\n\nbimod \u003c- c(rnorm(1000, 0, 1), rnorm(1000, 3, 1))\nmjs_plot(bimod) %\u003e% mjs_histogram() \nmjs_plot(bimod) %\u003e% mjs_histogram(bins=30) \n\nbimod %\u003e% mjs_hist(30)\n\nlibrary(shiny)\nlibrary(metricsgraphics)\n\nui = shinyUI(fluidPage(\n  h3(\"MetricsGraphics Example\", style=\"text-align:center\"),\n  metricsgraphicsOutput('mjs1'),\n  br(),\n  metricsgraphicsOutput('mjs2')\n))\n\nserver = function(input, output) {\n\n  mtcars %\u003e%\n    mjs_plot(x=wt, y=mpg, width=400, height=300) %\u003e%\n    mjs_point(color_accessor=carb, size_accessor=carb) %\u003e%\n    mjs_labs(x=\"Weight of Car\", y=\"Miles per Gallon\") -\u003e m1\n\n  set.seed(1492)\n  stocks \u003c- data.frame(\n    time = as.Date('2009-01-01') + 0:9,\n    X = rnorm(10, 0, 1),\n    Y = rnorm(10, 0, 2),\n    Z = rnorm(10, 0, 4))\n\n  stocks %\u003e%\n    mjs_plot(x=time, y=X) %\u003e%\n    mjs_line() %\u003e%\n    mjs_add_line(Y) %\u003e%\n    mjs_add_line(Z) %\u003e%\n    mjs_axis_x(xax_format=\"date\") %\u003e%\n    mjs_add_legend(legend=c(\"X\", \"Y\", \"Z\")) -\u003e m2\n\n  output$mjs1 \u003c- renderMetricsgraphics(m1)\n\n  output$mjs2 \u003c- renderMetricsgraphics(m2)\n\n}\n\nshinyApp(ui = ui, server = server)\n\n```\n\n### Code of Conduct\n\nPlease note that this project is released with a [Contributor Code of Conduct](CONDUCT.md). By participating in this project you agree to abide by its terms.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhrbrmstr%2Fmetricsgraphics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhrbrmstr%2Fmetricsgraphics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhrbrmstr%2Fmetricsgraphics/lists"}