{"id":13734872,"url":"https://github.com/rstudio/r2d3","last_synced_at":"2025-05-14T21:06:25.460Z","repository":{"id":31898579,"uuid":"126084978","full_name":"rstudio/r2d3","owner":"rstudio","description":"R Interface to D3 Visualizations","archived":false,"fork":false,"pushed_at":"2024-01-09T12:00:55.000Z","size":16332,"stargazers_count":520,"open_issues_count":40,"forks_count":103,"subscribers_count":38,"default_branch":"main","last_synced_at":"2025-04-13T17:46:47.435Z","etag":null,"topics":["d3","r","r2d3","visualization"],"latest_commit_sha":null,"homepage":"https://rstudio.github.io/r2d3","language":"R","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/rstudio.png","metadata":{"files":{"readme":"README.md","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-20T21:31:01.000Z","updated_at":"2025-04-03T12:29:19.000Z","dependencies_parsed_at":"2024-05-02T08:56:44.952Z","dependency_job_id":"c2b803a2-91f6-43e0-b199-8fcebdaaf23d","html_url":"https://github.com/rstudio/r2d3","commit_stats":{"total_commits":412,"total_committers":14,"mean_commits":"29.428571428571427","dds":0.3228155339805825,"last_synced_commit":"becfb81989c7fabfe79dee2dde999190025d4ba3"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fr2d3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fr2d3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fr2d3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fr2d3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rstudio","download_url":"https://codeload.github.com/rstudio/r2d3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254227611,"owners_count":22035669,"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":["d3","r","r2d3","visualization"],"created_at":"2024-08-03T03:01:00.716Z","updated_at":"2025-05-14T21:06:20.428Z","avatar_url":"https://github.com/rstudio.png","language":"R","funding_links":[],"categories":["Uncategorized","R","Visualization"],"sub_categories":["Uncategorized","General-Purpose"],"readme":"# r2d3: R Interface to D3 Visualizations \u003cimg src=\"man/figures/r2d3-hex.png\" align=\"right\" alt=\"\" width=\"120\" /\u003e\n\n\u003c!-- badges: start --\u003e\n\n[![R-CMD-check](https://github.com/rstudio/r2d3/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/rstudio/r2d3/actions)\n[![CRAN status](https://www.r-pkg.org/badges/version/r2d3)](https://CRAN.R-project.org/package=r2d3)\n[![Codecov test coverage](https://codecov.io/gh/rstudio/r2d3/branch/main/graph/badge.svg)](https://app.codecov.io/gh/rstudio/r2d3?branch=main)\n\n\u003c!-- badges: end --\u003e\n\nThe **r2d3** package provides a suite of tools for using [D3\nvisualizations](https://d3js.org/) with R, including:\n\n- Translating R objects into D3 friendly data structures\n\n- Rendering D3 scripts within the [RStudio\n  Viewer](https://support.rstudio.com/hc/en-us/articles/202133558-Extending-RStudio-with-the-Viewer-Pane)\n  and [R Notebooks](https://bookdown.org/yihui/rmarkdown/notebook.html)\n\n- Publishing D3 visualizations to the web\n\n- Incorporating D3 scripts into [R\n  Markdown](https://rmarkdown.rstudio.com/) reports, presentations,\n  and dashboards\n\n- Creating interactive D3 applications with\n  [Shiny](https://shiny.rstudio.com/)\n\n- Distributing D3 based [htmlwidgets](http://www.htmlwidgets.org) in R\n  packages\n\n\u003cdiv style=\"clear: both\"\u003e\n\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\nWith **r2d3**, you can bind data from R to D3 visualizations like the\nones found on \u003chttps://github.com/d3/d3/wiki/Gallery\u003e,\n\u003chttps://bl.ocks.org/\u003e, and\n\u003chttps://vida.io/explore\u003e:\n\n\u003cdiv style=\"margin-top: 20px; margin-bottom: 10px;\"\u003e\n\n\u003ca href=\"https://rstudio.github.io/r2d3/articles/gallery/chord/\"\n  \u003e\u003cimg\n    src=\"man/figures/chord_thumbnail.png\"\n    width=\"28%\"\n    class=\"illustration gallery-thumbnail\" /\u003e\u003c/a\n\u003e\u003ca href=\"https://rstudio.github.io/r2d3/articles/gallery/bubbles/\"\n  \u003e\u003cimg\n    src=\"man/figures/bubbles_thumbnail.png\"\n    width=\"28%\"\n    class=\"illustration gallery-thumbnail\" /\u003e\u003c/a\n\u003e\u003ca\n  href=\"https://rstudio.github.io/r2d3/articles/gallery/cartogram/\"\n  \u003e\u003cimg\n    src=\"man/figures/cartogram_thumbnail.png\"\n    width=\"28%\"\n    class=\"illustration gallery-thumbnail\"\n/\u003e\u003c/a\u003e\n\n\n\u003c/div\u003e\n\nD3 visualizations created with **r2d3** work just like R plots within\nRStudio, R Markdown documents, and Shiny applications.\n\n## Getting Started\n\nFirst, install the package from GitHub as follows:\n\n```r\ndevtools::install_github(\"rstudio/r2d3\")\n```\n\nNext, install the [preview release of RStudio\nv1.2](https://rstudio.com/products/rstudio/download/) of RStudio (you\nneed this version of RStudio to take advantage of various integrated\ntools for authoring D3 scripts with r2d3).\n\nOnce you’ve installed the package and the RStudio v1.2 preview release\nyou have the tools required to work with **r2d3**. Below, we’ll describe\nbasic workflow within RStudio and techniques for including\nvisualizations in R Markdown and Shiny applications.\n\n## About D3\n\nCreating data visualizations with **r2d3** requires lots of custom SVG\ngraphics programming (similar to creating custom grid graphics in R).\nIt’s therefore a good fit when you need highly custom visualizations\nthat aren’t covered by existing libraries. If on the other hand you are\nlooking for pre-fabricated D3 / JavaScript visualizations, check out the\npackages created using [htmlwidgets](http://www.htmlwidgets.org), which\nprovide a much higher level interface.\n\nIf you are completely new to D3, you may also want to check out the\narticle on [Learning\nD3](https://rstudio.github.io/r2d3/articles/learning_d3.html) before\nproceeding further.\n\n## D3 Scripts\n\nTo use **r2d3**, write a D3 script and then pass R data to it using the\n`r2d3()` function. For example, here’s a simple D3 script that draws a\nbar chart (“barchart.js”):\n\n```js\n// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)\n\nvar barHeight = Math.floor(height / data.length);\n\nsvg\n  .selectAll(\"rect\")\n  .data(data)\n  .enter()\n  .append(\"rect\")\n  .attr(\"width\", function (d) {\n    return d * width;\n  })\n  .attr(\"height\", barHeight)\n  .attr(\"y\", function (d, i) {\n    return i * barHeight;\n  })\n  .attr(\"fill\", \"steelblue\");\n```\n\nTo render the script within R you call the `r2d3()` function:\n\n```r\nlibrary(r2d3)\nr2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = \"barchart.js\")\n```\n\nWhich results in the following visualization:\n\n\u003cimg src=\"man/figures/bar_chart.png\" class=\"illustration\" width=600/\u003e\n\n### D3 Variables\n\nNote that data is provided to the script using the `data` argument to\nthe `r2d3()` function. This data is then automatically made available to\nthe D3 script. There are a number of other special variables available\nwithin D3 scripts, including:\n\n- `data` - The R data converted to JavaScript.\n- `svg` - The svg container for the visualization\n- `width` - The current width of the container\n- `height` - The current height of the container\n- `options` - Additional options provided by the user\n- `theme` - Colors for the current theme\n\nWhen you are learning D3 or translating D3 examples for use with R it’s\nimportant to keep in mind that D3 examples will generally include code\nto load data, create an SVG or other root element, and establish a width\nand height for the visualization.\n\nOn the other hand with **r2d3**, these variables are _provided\nautomatically_ so do not need to be created. The reasons these variables\nare provided automatically are:\n\n1.  So that you can dynamically bind data from R to visualizations; and\n\n2.  So that **r2d3** can automatically handle dynamic resizing for your\n    visualization. Most D3 examples have a static size. This if fine for\n    an example but not very robust for including the visualization\n    within a report, dashboard, or application.\n\n## D3 Preview\n\nThe [RStudio v1.2 preview\nrelease](https://rstudio.com/products/rstudio/download/) of RStudio\nincludes support for previewing D3 scripts as you write them. To try\nthis out, create a D3 script using the new file menu:\n\n\u003cimg src=\"man/figures/new_script.png\" class=\"screenshot\" width=600/\u003e\n\nA simple template for a D3 script (the barchart.js example shown above)\nis provided by default. You can use the **Preview** command\n(Ctrl+Shift+Enter) to render the\nvisualization:\n\n\u003cimg src=\"man/figures/rstudio_preview.png\" class=\"screenshot\" width=600/\u003e\n\nYou might wonder where the data comes from for the preview. Note that\nthere is a special comment at the top of the D3 script:\n\n```js\n// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)\n```\n\nThis comment enables you to specify the data (along with any other\narguments to the `r2d3()` function) to use for the preview.\n\n## R Markdown\n\nYou can include D3 visualizations in an R Markdown document or R\nNotebook. You can do this by calling the `r2d3()` function from within\nan R code chunk:\n\n````\n---\noutput: html_document\n---\n\n```{r}\nlibrary(r2d3)\nr2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = \"barchart.js\")\n```\n````\n\n\u003cimg src=\"man/figures/bar_chart.png\" class=\"illustration\" width=600/\u003e\n\nYou can also include D3 visualization code inline using the `d3` R\nMarkdown engine:\n\n````\n```{r setup}\nlibrary(r2d3)\nbars \u0026lt;- c(10, 20, 30)\n```\n````\n\n````\n```{d3 data=bars, options=list(color = 'orange')}\nsvg.selectAll('rect')\n  .data(data)\n  .enter()\n    .append('rect')\n      .attr('width', function(d) { return d * 10; })\n      .attr('height', '20px')\n      .attr('y', function(d, i) { return i * 22; })\n      .attr('fill', options.color);\n```\n````\n\n\u003cimg src=\"man/figures/rmarkdown-1.png\" class=\"illustration\" width=600/\u003e\n\nNote that in order to use the `d3` engine you need to add\n`library(r2d3)` to the setup chunk (as illustrated above).\n\n## Shiny\n\nThe `renderD3()` and `d3Output()` functions enable you to include D3\nvisualizations within Shiny applications:\n\n```r\nlibrary(shiny)\nlibrary(r2d3)\n\nui \u003c- fluidPage(\n  inputPanel(\n    sliderInput(\"bar_max\", label = \"Max:\",\n                min = 0.1, max = 1.0, value = 0.2, step = 0.1)\n  ),\n  d3Output(\"d3\")\n)\n\nserver \u003c- function(input, output) {\n  output$d3 \u003c- renderD3({\n    r2d3(\n      runif(5, 0, input$bar_max),\n      script = system.file(\"examples/baranims.js\", package = \"r2d3\")\n    )\n  })\n}\n\nshinyApp(ui = ui, server = server)\n```\n\n\u003cimg src=\"man/figures/baranim-1.gif\" class=\"illustration\" width=600/\u003e\n\nSee the article on [Using r2d3 with\nShiny](https://rstudio.github.io/r2d3/articles/shiny.html) to learn more\n(including how to create custom Shiny inputs that respond to user\ninteraction with D3 visualizations).\n\n## Learning More\n\nTo learn the basics of D3 and see some examples that might inspire your\nown work, check out:\n\n- [Learning\n  D3](https://rstudio.github.io/r2d3/articles/learning_d3.html) -\n  Suggested resources for learning how to create D3 visualizations.\n\n- [Gallery of\n  Examples](https://rstudio.github.io/r2d3/articles/gallery.html) -\n  Learn from a wide variety of example D3 visualizations.\n\nFor next steps on learning on how to use **r2d3**, see these articles:\n\n- [R to D3 Data\n  Conversion](https://rstudio.github.io/r2d3/articles/data_conversion.html)\n\n  - Customize the conversion of R objects to D3-friendly JSON.\n\n- [D3 Visualization\n  Options](https://rstudio.github.io/r2d3/articles/visualization_options.html)\n\n  - Control various aspects of D3 rendering and expose user-level\n    options for your D3 script.\n\n- [Development and\n  Debugging](https://rstudio.github.io/r2d3/articles/development_and_debugging.html)\n\n  - Recommended tools and workflow for developing D3 visualizations.\n\n- [Publishing D3\n  Visualizations](https://rstudio.github.io/r2d3/articles/publishing.html)\n  - Publish D3 visualizations as HTML, a static PNG image, or within R\n    Markdown documents and Shiny applications.\n\nOnce you are familar with the basics, check out these articles on more\nadvanced topics:\n\n[Using r2d3 with\nShiny](https://rstudio.github.io/r2d3/articles/shiny.html) - Deriving\ninsights from data is streamlined when users are able to modify a Shiny\ninput, or click on a D3 visualization, and that action produces new\nresults.\n\n- [CSS and JavaScript\n  Dependencies](https://rstudio.github.io/r2d3/articles/dependencies.html)\n\n  - Incorporating external CSS styles and JavaScript libraries into\n    your visualizations.\n\n- [Advanced Rendering with\n  Callbacks](https://rstudio.github.io/r2d3/articles/advanced_rendering.html)\n\n  - An alternate way to organize D3 scripts that enables you to\n    distinguish between initialization and re-rendering based on new\n    data, as well as handle resizing more dynamically.\n\n- [Package\n  Development](https://rstudio.github.io/r2d3/articles/package_development.html)\n  – Create re-usable D3 visualizations by including them in an R\n  package.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstudio%2Fr2d3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frstudio%2Fr2d3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstudio%2Fr2d3/lists"}