-
-
Save msund/339d85b69cc0e3063bf6 to your computer and use it in GitHub Desktop.
File for Joe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Publishing R and interactive ggplot2 plots to the web | |
| <br> | |
| It's delightfully smooth to publish R code, plots, and presentations to the web. For example: | |
| <ul> | |
| <br> | |
| <br> | |
| <li type=disc><a href="http://shiny.rstudio.com/">Shiny</a> makes interactive apps from R. | |
| <li type=disc><a href="www.inside-r.org/pretty-r/tool">Pretty R</a> highlights R code for HTML. | |
| <li type=disc><a href="http://ramnathv.github.io/slidify/">Slidify</a> makes slides from R Markdown. | |
| <li type=disc><a href="http://yihui.name/knitr/">Knitr</a> and <a href="http://rpubs.com/">RPubs</a> let you publish R Markdown docs. | |
| <li type=disc>GitHub and <a href="https://github.com/hadley/devtools">devtools</a> let you quickly release packages and collaborate. | |
| </ul> | |
| <br> | |
| Now <a href="https://plot.ly">Plotly</a> lets you collaboratively edit and publish interactive ggplot2 graphs using these tools. This post shows how. Find us on <a href="https://github.com/ropensci/plotly/issues">GitHub</a>, at feedback at plot ly, and <a href="https://twitter.com/plotlygraphs">@plotlygraphs</a>. For more on our ggplot2 and R support, see <a href="https://plot.ly/api">our API docs</a>. | |
| <br> | |
| <br> | |
| You can copy and paste the code below--highlighted with Pretty R--into your R console to install Plotly and make an interactive, web-based plot. Or <a href="https://plot.ly/ssu">sign-up</a> and <a href="http://plot.ly/settings">generate your own key</a> to add to the script. You <a href="https://plot.ly/r/privacy/">control the privacy</a> of your data and plots, own your work, and public sharing <a href="https://plot.ly/product/plans/">is free and unlimited</a>. | |
| <br> | |
| <div style="overflow:auto;"><div class="geshifilter"><pre class="r geshifilter-R" style="font-family:monospace;"><a href="http://inside-r.org/r-doc/utils/install.packages"><span style="color: #003399; font-weight: bold;">install.packages</span></a><span style="color: #009900;">(</span><span style="color: #0000ff;">"devtools"</span><span style="color: #009900;">)</span> <span style="color: #666666; font-style: italic;"># so we can install from github</span> | |
| <a href="http://inside-r.org/r-doc/base/library"><span style="color: #003399; font-weight: bold;">library</span></a><span style="color: #009900;">(</span><span style="color: #0000ff;">"devtools"</span><span style="color: #009900;">)</span> | |
| install_github<span style="color: #009900;">(</span><span style="color: #0000ff;">"ropensci/plotly"</span><span style="color: #009900;">)</span> <span style="color: #666666; font-style: italic;"># plotly is part of ropensci</span> | |
| <a href="http://inside-r.org/r-doc/base/library"><span style="color: #003399; font-weight: bold;">library</span></a><span style="color: #009900;">(</span>plotly<span style="color: #009900;">)</span> | |
| | |
| py <span style=""><-</span> plotly<span style="color: #009900;">(</span>username=<span style="color: #0000ff;">"r_user_guide"</span><span style="color: #339933;">,</span> key=<span style="color: #0000ff;">"mw5isa4yqp"</span><span style="color: #009900;">)</span> <span style="color: #666666; font-style: italic;"># open plotly connection</span> | |
| ggiris <span style=""><-</span> qplot<span style="color: #009900;">(</span>Petal.Width<span style="color: #339933;">,</span> Sepal.Length<span style="color: #339933;">,</span> <a href="http://inside-r.org/r-doc/utils/data"><span style="color: #003399; font-weight: bold;">data</span></a> = <a href="http://inside-r.org/r-doc/datasets/iris"><span style="color: #003399; font-weight: bold;">iris</span></a><span style="color: #339933;">,</span> color = Species<span style="color: #009900;">)</span> | |
| | |
| py<span style="">$</span>ggplotly<span style="color: #009900;">(</span>ggiris<span style="color: #009900;">)</span> <span style="color: #666666; font-style: italic;"># send to plotly</span></pre></div> | |
| <br> | |
| <br> | |
| Adding <code>py$ggplotly()</code> to your ggplot2 plot creates a Plotly graph online, drawn with D3.js, a popular JavaScript visualization library. The plot, data, and code for making the plot in Julia, Python, R, and MATLAB are all online and editable by you and your collaborators. In this case, it's here: <a href="https://plot.ly/~r_user_guide/2">https://plot.ly/~r_user_guide/2</a>; if you forked the plot and wanted to tweak and share it, a new version of the plot would be saved into your profile. | |
| <br> | |
| <br> | |
| <img src="https://31.media.tumblr.com/1edf27c9beccffc72d779bf9790d15f4/tumblr_inline_nc694yOi4h1suclhk.png"> | |
| <br> | |
| <br> | |
| We can share the URL over email or Twitter, add collaborators, export the image and data, or embed the plot in an iframe in this blog post. Click and drag to zoom or hover to see data. | |
| <br> | |
| <br> | |
| <iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~r_user_guide/1.embed?width=640&height=480"></iframe> | |
| <br> | |
| <br> | |
| Our iframe points to <a href="https://plot.ly/~r_user_guide/1.embed">https://plot.ly/~r_user_guide/1.embed</a>. For more, <a href="https://plot.ly/r/embedding-plotly-graphs-in-HTML/">here is how to embed plots</a>. | |
| <br> | |
| <br> | |
| Plotting is interoperable, meaning you can make a plot with ggplot2, add data with Python or our <a href="https://plot.ly/product/excel-plug-in/">Excel plug-in</a>, and edit the plot with someone on your team who uses MATLAB. Your iframe will always show the most up to date version of your plots. For all plots you can edit, share, and download data and plots from within a web GUI, adding fits, styling, and more. Thus, if your ggplot2 plot doesn't precisely translate through to Plotly, you and your team can use the web app to tweak, edit, and style. | |
| <br> | |
| <br> | |
| <center><img src="https://31.media.tumblr.com/26fded399f3adaa446f9f033e525279a/tumblr_inline_nc6twy98B71suclhk.png"></center> | |
| <br> | |
| <br> | |
| <center><img src="https://31.media.tumblr.com/a89d9f6cf8720bd7f627571617caa7a5/tumblr_inline_nca8oepFTs1suclhk.png"></center> | |
| <br> | |
| <br> | |
| <center><img src="https://31.media.tumblr.com/643fe7b20db7533d29effbb6e445d7b1/tumblr_inline_nc6grdcsee1suclhk.png"></center> | |
| <br> | |
| <br> | |
| Now let's make a plot in a knitr doc (here's <a href="https://support.rstudio.com/hc/en-us/articles/200552086-Using-R-Markdown">a knitr and RPubs tutorial</a>). First, you'll want to open a new R Markdown doc within RStudio. | |
| <br> | |
| <br> | |
| <img src="https://31.media.tumblr.com/e86a87dc23cdaa093a95d5dd633f5b5c/tumblr_inline_nc6g0duLqb1suclhk.png"> | |
| <br> | |
| <br> | |
| You can copy and paste this code into RStudio and press "Knit HTML": | |
| <br> | |
| <br> | |
| <div style="overflow:auto;"><div class="geshifilter"><pre class="r geshifilter-R" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">## 1. Putting Plotly Graphs in Knitr</span> | |
| | |
| <span style="color: #0000ff;">``</span><span style="color: #0000ff;">`{r} | |
| library("knitr") | |
| library("devtools") | |
| url<-"https://plot.ly/~MattSundquist/1971" | |
| plotly_iframe <- paste("<center><iframe scrolling='no' seamless='seamless' style='border:none' src='", url, | |
| "/800/1200' width='800' height='1200'></iframe><center>", sep = "") | |
| | |
| `</span><span style="color: #0000ff;">``</span> | |
| <span style="color: #0000ff;">`r I(plotly_iframe)`</span></pre></div></div> | |
| <br> | |
| <br> | |
| You'll want to press the "publish" button on the generated RPub preview to push the RPub online with a live graph. A published RPub from the code above is <a href="http://rpubs.com/Msunds/29399">here</a>. You can see how the embedded plot looks in the screenshot below. The RPub shows <a href=";https://plot.ly/~MattSundquist/1971">a Plotly graph</a> of the <a href="http://learnr.wordpress.com/2010/01/26/ggplot2-quick-heatmap-plotting/">ggplot2 NBA heatmap</a> from a Learning R post. | |
| <br> | |
| <br> | |
| <center><img src="https://31.media.tumblr.com/65e349929b3c409f4e8d219c9a416f12/tumblr_inline_nc6uon48Yq1suclhk.png"></center> | |
| <br> | |
| <br> | |
| Thus we have three general options to publish interactive plots with your favorite R tools. First, use iframes to embed in RPubs, blogs, and on websites. Or in slides, as seen in <a href="http://karthik.github.io/useR2014/#interactive_figs">Karthik Ram's Slidify presentation</a> from useR 2014. | |
| <br> | |
| <br> | |
| Second, you can make plots as part of an `.Rmd` document or in <a href="https://plot.ly/r/user-guide/">IPython Notebooks using R</a>. For a `.Rmd` doc, you specify the <code>`plotly=TRUE`</code> chunk option. Here is an <a href="http://rpubs.com/minma/interactive_plotting_with_plotly_and_ggplot2">example</a> and <a href="https://gist.github.com/msund/10820797">source</a> to see the process in action. | |
| <br> | |
| <br> | |
| Third, you can publish a plot in <a href="https://plot.ly/r/shiny-tutorial/">an iframe in a Shiny app</a>, defining how users interact with your plot. <a href="https://pedrodz.shinyapps.io/shiny_example/">Here is an example with the same plot</a>, and here's how it looks: | |
| <br> | |
| <br> | |
| <img src="https://31.media.tumblr.com/23ea2b22e6c3800755780a97fa6e73c2/tumblr_inline_nc6d3ynGHI1suclhk.png">. | |
| <br> | |
| <br> | |
| A final note. For any Plotly graph, you can call the figure: | |
| <br> | |
| <br> | |
| <div style="overflow:auto;"><div class="geshifilter"><pre class="r geshifilter-R" style="font-family:monospace;">py <span style=""><-</span> plotly<span style="color: #009900;">(</span><span style="color: #0000ff;">"ggplot2examples"</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"3gazttckd7"</span><span style="color: #009900;">)</span> <span style="color: #666666; font-style: italic;"># key and username for your call</span> | |
| figure <span style=""><-</span> py<span style="">$</span>get_figure<span style="color: #009900;">(</span><span style="color: #0000ff;">"r_user_guide"</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span> <span style="color: #666666; font-style: italic;"># graph id for plot you want to access</span> | |
| <a href="http://inside-r.org/r-doc/utils/str"><span style="color: #003399; font-weight: bold;">str</span></a><span style="color: #009900;">(</span>figure<span style="color: #009900;">)</span></pre></div></div> | |
| <br> | |
| or the data. That means you don't have to store data, plots, and code in different places. It's together and editable on Plotly. | |
| <br> | |
| <div style="overflow:auto;"><div class="geshifilter"><pre class="r geshifilter-R" style="font-family:monospace;">figure<span style="">$</span>data<span style="color: #009900;">[</span><span style="color: #009900;">]</span></pre></div></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment