<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/r2d3-r-interface-to-d3-visualizations/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://blog.rstudio.com/2018/10/05/r2d3-r-interface-to-d3-visualizations/"> RStudio Blog</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><img align="right" src="https://i1.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/r2d3-hex.png?w=180&ssl=1" data-recalc-dims="1"></p>
<p>As part our series on new features in the <a rel="nofollow" href="https://www.rstudio.com/products/rstudio/download/preview/" target="_blank">RStudio v1.2 Preview Release</a>, we’re pleased to announce the <a rel="nofollow" href="https://rstudio.github.io/r2d3/" target="_blank">r2d3 package</a>, a suite of tools for using custom <a rel="nofollow" href="https://d3js.org/" target="_blank">D3 visualizations</a> with R.</p>
<p>RStudio v1.2 includes several features to help optimize your development experience with <strong>r2d3</strong>. We’ll describe these features below, but first a bit more about the package. Features of <strong>r2d3</strong> include:</p>
<ul>
<li>
<p>Translating R objects into D3 friendly data structures</p>
</li>
<li>
<p>Publishing D3 visualizations to the web</p>
</li>
<li>
<p>Incorporating D3 scripts into <a rel="nofollow" href="https://rmarkdown.rstudio.com/" target="_blank">R<br>
Markdown</a> reports, presentations,<br>
and dashboards</p>
</li>
<li>
<p>Creating interacive D3 applications with<br>
<a rel="nofollow" href="https://shiny.rstudio.com/" target="_blank">Shiny</a></p>
</li>
<li>
<p>Distributing D3 based <a rel="nofollow" href="http://www.htmlwidgets.org/" target="_blank">htmlwidgets</a> in R<br>
packages</p>
</li>
</ul>
<div>
</div>
<p></p>
<p>With <strong>r2d3</strong>, you can bind data from R to D3 visualizations like the<br>
ones found on <a rel="nofollow" href="https://github.com/d3/d3/wiki/Gallery" target="_blank">https://github.com/d3/d3/wiki/Gallery</a>,<br>
<a rel="nofollow" href="https://bl.ocks.org/" target="_blank">https://bl.ocks.org/</a>, and<br>
<a rel="nofollow" href="https://vida.io/explore" target="_blank">https://vida.io/explore</a>:</p>
<div>
<p><a rel="nofollow" href="https://rstudio.github.io/r2d3/articles/gallery/chord/" target="_blank"><img src="https://i1.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/chord_thumbnail.png?w=28%25&ssl=1" data-recalc-dims="1"></a>  <a rel="nofollow" href="https://rstudio.github.io/r2d3/articles/gallery/bubbles/" target="_blank"><img src="https://i1.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/bubbles_thumbnail.png?w=28%25&ssl=1" data-recalc-dims="1"></a>  <a rel="nofollow" href="https://rstudio.github.io/r2d3/articles/gallery/cartogram/" target="_blank"><img src="https://i1.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/cartogram_thumbnail.png?w=28%25&ssl=1" data-recalc-dims="1"></a></p>
</div>
<p>D3 visualizations created with <strong>r2d3</strong> work just like R plots within<br>
RStudio, R Markdown documents, and Shiny applications.</p>
<p>You can install the <strong>r2d3</strong> package from CRAN as follows:</p>
<pre><code>install.packages(&quot;r2d3&quot;)
</code></pre>
<h2>D3 Scripts</h2>
<p>To use <strong>r2d3</strong>, write a D3 script and then pass R data to it using the<br>
<code>r2d3()</code> function. For example, here’s a simple D3 script that draws a<br>
bar chart (“barchart.js”):</p>
<pre><code>// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)

var barHeight = Math.floor(height / data.length);

svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue');
</code></pre>
<p>To render the script within R you call the <code>r2d3()</code> function:</p>
<pre><code>library(r2d3)
r2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = &quot;barchart.js&quot;)
</code></pre>
<p>Which results in the following visualization:</p>
<p><img src="https://i1.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/bar_chart.png?w=456&ssl=1" data-recalc-dims="1"></p>
<h3>D3 Variables</h3>
<p>Note that data is provided to the script using the <code>data</code> argument to<br>
the <code>r2d3()</code> function. This data is then automatically made available to<br>
the D3 script. There are a number of other special variables available<br>
within D3 scripts, including:</p>
<ul>
<li><code>data</code> — The R data converted to JavaScript.</li>
<li><code>svg</code> — The svg container for the visualization</li>
<li><code>width</code> — The current width of the container</li>
<li><code>height</code> — The current height of the container</li>
<li><code>options</code> — Additional options provided by the user</li>
<li><code>theme</code> — Colors for the current theme</li>
</ul>
<p>When you are learning D3 or translating D3 examples for use with R it’s<br>
important to keep in mind that D3 examples will generally include code<br>
to load data, create an SVG or other root element, and establish a width<br>
and height for the visualization.</p>
<p>On the other hand with <strong>r2d3</strong>, these variables are <em>provided<br>
automatically</em> so do not need to be created. The reasons these variables<br>
are provided automatically are:</p>
<p>1) So that you can dynamically bind data from R to visualizations; and</p>
<p>2) So that <strong>r2d3</strong> can automatically handle dynamic resizing for your<br>
visualization. Most D3 examples have a static size. This is fine for<br>
an example but not very robust for including the visualization<br>
within a report, dashboard, or application.</p>
<h2>RStudio v1.2 and r2d3</h2>
<p>The <a rel="nofollow" href="https://www.rstudio.com/rstudio/download/preview/" target="_blank">RStudio v1.2 preview<br>
release</a><br>
includes support for previewing D3 scripts as you write them. To try this out, install the preview release<br>
then create a D3 script using the new file menu:</p>
<p><img src="https://i2.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/new_script.png?w=456&ssl=1" data-recalc-dims="1"></p>
<p>A simple template for a D3 script (the barchart.js example shown above)<br>
is provided by default. You can use the <strong>Preview</strong> command<br>
(Ctrl+Shift+Center) to render the<br>
visualization:</p>
<p><img src="https://i0.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/rstudio_preview.png?w=456&ssl=1" data-recalc-dims="1"></p>
<p>You might wonder where the data comes from for the preview. Note that<br>
there is a special comment at the top of the D3 script:</p>
<pre><code>// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
</code></pre>
<p>This comment enables you to specify the data (along with any other<br>
arguments to the <code>r2d3()</code> function) to use for the preview.</p>
<h2>R Markdown</h2>
<p>RStudio v1.2 also includes support for rendering <strong>r2d3</strong> visualizations within R Markdown documents and R Notebooks. There is a new <code>d3</code> R Markdown engine which works like this:</p>
<pre><code>&amp;#96``{r setup}
library(r2d3)
bars &lt;- c(10, 20, 30)
&amp;#96``

&amp;#96``{d3 data=bars, options=list(color = 'orange')}
svg.selectAll('rect')
  .data(data)
  .enter()
    .append('rect')
      .attr('width', function(d) { return d * 10; })
      .attr('height', '20px')
      .attr('y', function(d, i) { return i * 22; })
      .attr('fill', options.color);
&amp;#96``</code></pre>
<p><img src="https://i2.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/rmarkdown-1.png?w=456&ssl=1" data-recalc-dims="1"></p>
<p>Note that in order to use the <code>d3</code> engine you need to add<br>
<code>library(r2d3)</code> to the setup chunk (as illustrated above).</p>
<p>You can also of course call the <code>r2d3()</code> function from within<br>
an R code chunk:</p>
<pre><code>---
output: html_document
---

&amp;#96``{r}
library(r2d3)
r2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = &quot;barchart.js&quot;)
&amp;#96``</code></pre>
<p><img src="https://i1.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/bar_chart.png?w=456&ssl=1" data-recalc-dims="1"></p>
<h2>Shiny</h2>
<p>The <code>renderD3()</code> and <code>d3Output()</code> functions enable you to include D3<br>
visualizations within Shiny applications:</p>
<pre><code>library(shiny)
library(r2d3)

ui &lt;- fluidPage(
  inputPanel(
    sliderInput(&quot;bar_max&quot;, label = &quot;Max:&quot;,
                min = 0.1, max = 1.0, value = 0.2, step = 0.1)
  ),
  d3Output(&quot;d3&quot;)
)

server &lt;- function(input, output) {
  output$d3 &lt;- renderD3({
    r2d3(
      runif(5, 0, input$bar_max),
      script = system.file(&quot;examples/baranims.js&quot;, package = &quot;r2d3&quot;)
    )
  })
}

shinyApp(ui = ui, server = server)
</code></pre>
<p><img src="https://i1.wp.com/blog.rstudio.com/images/r2d3-r-interface-to-d3-visualizations/baranim-1.gif?w=456&ssl=1" data-recalc-dims="1"></p>
<p>See the article on <a rel="nofollow" href="https://rstudio.github.io/r2d3/articles/shiny.html" target="_blank">Using r2d3 with<br>
Shiny</a> to learn more<br>
(including how to create custom Shiny inputs that respond to user<br>
interaction with D3 visualizations).</p>
<h2>Try It Out</h2>
<p>To try out <strong>r2d3</strong>, start by installing the package from CRAN:</p>
<pre><code>install.packages(&quot;r2d3&quot;)
</code></pre>
<p>Then, download the <a rel="nofollow" href="https://www.rstudio.com/products/rstudio/download/preview/" target="_blank">RStudio v1.2 Preview Release</a> and head over to <a rel="nofollow" href="https://rstudio.github.io/r2d3/" target="_blank">https://rstudio.github.io/r2d3/</a> for complete documentation on using the package.</p>
<p>If you aren’t familliar with D3, check out these links to learn the basics and see some examples that might inspire your<br>
own work:</p>
<ul>
<li>
<p><a rel="nofollow" href="https://rstudio.github.io/r2d3/articles/learning_d3.html" target="_blank">Learning<br>
D3</a> —<br>
Suggested resources for learning how to create D3 visualizations.</p>
</li>
<li>
<p><a rel="nofollow" href="https://rstudio.github.io/r2d3/articles/gallery.html" target="_blank">Gallery of<br>
Examples</a> —<br>
Learn from a wide variety of example D3 visualizations.</p>
</li>
</ul>
<p>We hope that the <strong>r2d3</strong> package opens up many new horizons for creating custom interactive visualizations with R!</p>

	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://blog.rstudio.com/2018/10/05/r2d3-r-interface-to-d3-visualizations/"> RStudio Blog</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/AKttpqkW_BA" height="1"></a></div>