ggplot2 and Plotly: beautiful, interactive, & shareable plots

ggplot2 and Plotly: beautiful, interactive, & shareable plots

</p><a href="https://plot.ly">Plotly</a> lets you collaboratively analyze data and make beautiful, web-based plots. Add <code>py$ggplotly()</code> to the end of your ggplot2 script, and you get an interactive, embeddable, shareable graph like the one below (credit: from <a href="http://nbviewer.ipython.org/gist/mkcor/0ee7c73d9ba4c68ddc1a/">a Notebook</a> presented at useR by <a href="https://marianne-corvellec.appspot.com/">Marianne Corvellec</a>). It's that easy.</p>
<br>
<br>
<br>
<iframe width="800" height="550" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~ggplot2examples/208/.embed?width=800&height=550"></iframe>
<br>
<br>
<p>The overview:
<UL>
<li type=disc> You can use <a href="https://plot.ly/ggplot2/">ggplot2 and Plotly</a> to make bar, line, and scatter charts, plus histograms and facets. 
<li type=disc>You can use ggplot2, <a href="https://plot.ly/r/">Plotly’s R API</a>, and our web GUI to collaboratively make those plots plus plots with LaTeX and bubble, polar, contour, heatmaps, 2D histograms, boxplots, 3D graphs, and streaming graphs. 
<br>
<br>
<a href="https://plot.ly/api"><img src="http://i.imgur.com/SuKmUZ1.png" title="Plotly gallery"/></a>
<br>
<br>
<li type=disc>You and your team can edit the same plots and data using <a href="https://plot.ly/api">Plotly's R API and ggplot2</a> (as well as Python, MATLAB, and Excel). You can edit with or without code:
<br>
<br>
<a href="https://plot.ly/1445/~MattSundquist/"><img src="http://i.imgur.com/B4hA7lw.png" title="ggplot2 plot"/></a>
<br>
<br>
</UL>
<br>
<br>
<i>Quick start for an interactive ggplot2 and World Bank plot
</i>
<br>
<br>
Let's make an interactive version of a ggplot2 graph from the <a href="http://blogs.worldbank.org/opendata/accessing-world-bank-data-apis-python-r-ruby-stata">World Bank website</a>. Our goals are:
<br>
<UL>
<li type=disc> make the plot as an interactive figure 
<li type=disc> access the data 
<li type=disc> style the plot and show it with a log axis 
<li type=disc> share the plot and collaborate
</UL>
<br>
<br>
<a href="http://blogs.worldbank.org/opendata/accessing-world-bank-data-apis-python-r-ruby-stata"><img src="http://i.imgur.com/PkRRmHq.png" title="World Bank blog"/></a>
<br>
<br>
<p>You can copy and paste this code into RStudio or your R console. It’ll make an interactive plot right in your browser. Head over to <a href="https://plot.ly/r/getting-started/">our getting started page</a> for more.</p>
<br>
<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;">&#40;</span><span style="color: #0000ff;">&quot;devtools&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #666666; font-style: italic;"># windows users install Rtools. Also: for mac and linux.</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;">&#40;</span><span style="color: #0000ff;">&quot;devtools&quot;</span><span style="color: #009900;">&#41;</span>
install_github<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;ropensci/plotly&quot;</span><span style="color: #009900;">&#41;</span>  <span style="color: #666666; font-style: italic;"># Plotly is part of the super cool rOpenSci.</span>
&nbsp;
<a href="http://inside-r.org/r-doc/base/library"><span style="color: #003399; font-weight: bold;">library</span></a><span style="color: #009900;">&#40;</span>plotly<span style="color: #009900;">&#41;</span>  <span style="color: #666666; font-style: italic;"># install libraries we’ll be using</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;">&#40;</span><a href="http://inside-r.org/packages/cran/ggplot2"><span style="">ggplot2</span></a><span style="color: #009900;">&#41;</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;">&#40;</span><a href="http://inside-r.org/r-doc/stats/reshape"><span style="color: #003399; font-weight: bold;">reshape</span></a><span style="color: #009900;">&#41;</span>
&nbsp;
py <span style="">&lt;-</span> plotly<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;ggplot2examples&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;3gazttckd7&quot;</span><span style="color: #009900;">&#41;</span>  <span style="color: #666666; font-style: italic;"># sign up (https://plot.ly/ssi/) and get a key  or use our public key to initiate a graph object</span>
&nbsp;
<a href="http://inside-r.org/r-doc/base/library"><span style="color: #003399; font-weight: bold;">library</span></a><span style="color: #009900;">&#40;</span>WDI<span style="color: #009900;">&#41;</span> <span style="color: #666666; font-style: italic;"># now we’ll make the plot from the blog post</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;">&#40;</span><a href="http://inside-r.org/packages/cran/ggplot2"><span style="">ggplot2</span></a><span style="color: #009900;">&#41;</span>
&nbsp;
dat = WDI<span style="color: #009900;">&#40;</span>indicator=<span style="color: #0000ff;">'NY.GNP.PCAP.CD'</span><span style="color: #339933;">,</span> country=<a href="http://inside-r.org/r-doc/base/c"><span style="color: #003399; font-weight: bold;">c</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'CL'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'HU'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'UY'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <a href="http://inside-r.org/r-doc/stats/start"><span style="color: #003399; font-weight: bold;">start</span></a>=<span style="color: #cc66cc;">1960</span><span style="color: #339933;">,</span> <a href="http://inside-r.org/r-doc/stats/end"><span style="color: #003399; font-weight: bold;">end</span></a>=<span style="color: #cc66cc;">2012</span><span style="color: #009900;">&#41;</span> <span style="color: #666666; font-style: italic;"># Grab GNI per capita data for Chile, Hungary and Uruguay</span>
&nbsp;
wb <span style="">&lt;-</span> <a href="http://inside-r.org/packages/cran/ggplot"><span style="">ggplot</span></a><span style="color: #009900;">&#40;</span>dat<span style="color: #339933;">,</span> aes<span style="color: #009900;">&#40;</span>year<span style="color: #339933;">,</span> NY.GNP.PCAP.CD<span style="color: #339933;">,</span> color=country<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="">+</span> geom_line<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> 
<span style="">+</span>     xlab<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Year'</span><span style="color: #009900;">&#41;</span> <span style="">+</span> ylab<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'GDI per capita (Atlas Method USD)'</span><span style="color: #009900;">&#41;</span> 
<span style="">+</span>     labs<span style="color: #009900;">&#40;</span><a href="http://inside-r.org/r-doc/graphics/title"><span style="color: #003399; font-weight: bold;">title</span></a> <span style="">&lt;-</span> <span style="color: #0000ff;">&quot;GNI Per Capita ($USD Atlas Method)&quot;</span><span style="color: #009900;">&#41;</span>
&nbsp;
py<span style="">$</span>ggplotly<span style="color: #009900;">&#40;</span>wb<span style="color: #009900;">&#41;</span>  <span style="color: #666666; font-style: italic;"># call Plotly</span></pre></div></div><br>
<br>
<i>Step 1: Create an interactive plot 
</i>
<br>
<br>
The original script creates an error (but Plotly still stores the data) and generates a web-based plot: <a href="https://plot.ly/~ggplot2examples/98">plot.ly/~ggplot2examples/98</a>. It's added to your profile: <a href="https://plot.ly/~ggplot2examples/">plot.ly/~ggplot2examples</a>. Now you have a profile for sharing and saving all your R and ggplot2 plots. 
<br>
<br>
We'll embed it with this snippet.
<br>
<br>
<div style="background: #f0f0f0; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #062873; font-weight: bold">&lt;iframe</span> <span style="color: #4070a0">width=&quot;650&quot;</span> <span style="color: #4070a0">height=&quot;650&quot;</span> <span style="color: #4070a0">frameborder=&quot;0&quot;</span> <span style="color: #4070a0">seamless=&quot;seamless&quot;</span> <span style="color: #4070a0">scrolling=&quot;no&quot;</span> <span style="color: #4070a0">src=&quot;https://plot.ly/~ggplot2examples/98/.embed?width=650&amp;height=650&quot;</span><span style="color: #062873; font-weight: bold">&gt;&lt;/iframe&gt;</span>
</pre></div>
<br>
<br>
You'll see text on the hover. You can click and drag on the plot to zoom, and you can toggle with the buttons or by clicking and dragging on an axis. 
<br>
<br>
<iframe width="800" height="550" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~ggplot2examples/98/.embed?width=800&height=550"></iframe>
<br>
<br>
<i>Step 2: Style the plot and make it with a log axis
</i>
<br>
<br>
Plotly lets you control and style essentially anything about your plot. <a href="http://vimeo.com/94000688">Here's</a> a video tutorial:
<br>
<br>
<center><iframe src="//player.vimeo.com/video/94000688" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/94000688">STYLING & CUSTOMIZING</a> from <a href="http://vimeo.com/plotly">PLOTLY</a> on <a href="https://vimeo.com">Vimeo</a>.</p></center>
<br>
<br>
We’ve styled this plot from the GUI:
<br>
<br>
<br>
<iframe width="800" height="550" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/1339/.embed?width=800&height=550"></iframe>
<br>
<br>
We’ve also made graphs with the same data in matplotlib, Plotly’s Python API, and the GUI  from <a href="http://nbviewer.ipython.org/gist/msund/61cdbd5b22c103fffb84">another Notebook</a>.
<br>
<a href="http://nbviewer.ipython.org/gist/msund/61cdbd5b22c103fffb84"><img src="http://i.imgur.com/9W55PfK.png" title="Other plot examples"/></a>
<br>
<br>
<i>Step 3: Access the data
</i>
<br>
<br>
Plotly links your data with your plots in a grid online: <a href="https://plot.ly/~MattSundquist/1343">plot.ly/~MattSundquist/1343</a>. 
<br>
<br>
<a href="https://plot.ly/~MattSundquist/1343/"><img src="http://i.imgur.com/xhphGUi.png" title="Plotly data grid"/></a>
<br>
<br>
<br>
The data is also accessible via API. To investigate, try: 
<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/str"><span style="color: #003399; font-weight: bold;">str</span></a><span style="color: #009900;">&#40;</span>dat<span style="color: #009900;">&#41;</span></pre></div></div>
which produces:
<br>
<div style="overflow:auto;"><div class="geshifilter"><pre class="r geshifilter-R" style="font-family:monospace;"><span style="color: #0000ff;">'data.frame'</span><span style="">:</span>	<span style="color: #cc66cc;">159</span> obs. of  <span style="color: #cc66cc;">4</span> variables<span style="">:</span>
 <span style="">$</span> iso2c         <span style="">:</span> chr  <span style="color: #0000ff;">&quot;CL&quot;</span> <span style="color: #0000ff;">&quot;CL&quot;</span> <span style="color: #0000ff;">&quot;CL&quot;</span> <span style="color: #0000ff;">&quot;CL&quot;</span> ...
 <span style="">$</span> country       <span style="">:</span> chr  <span style="color: #0000ff;">&quot;Chile&quot;</span> <span style="color: #0000ff;">&quot;Chile&quot;</span> <span style="color: #0000ff;">&quot;Chile&quot;</span> <span style="color: #0000ff;">&quot;Chile&quot;</span> ...
 <span style="">$</span> NY.GNP.PCAP.CD<span style="">:</span> num  <span style="color: #cc66cc;">14290</span> <span style="color: #cc66cc;">12290</span> <span style="color: #cc66cc;">10730</span> <span style="color: #cc66cc;">9940</span> <span style="color: #cc66cc;">10030</span> ...
 <span style="">$</span> year          <span style="">:</span> num  <span style="color: #cc66cc;">2012</span> <span style="color: #cc66cc;">2011</span> <span style="color: #cc66cc;">2010</span> <span style="color: #cc66cc;">2009</span> <span style="color: #cc66cc;">2008</span> …</pre></div></div>
Or, call the figure. We can call any figure like this from the site by entering the user id and identifying number for a plot. That's in the URL for all figures. In this case, that URL is <a href="https://plot.ly/~MattSundquist/1339">https://plot.ly/~MattSundquist/1339</a>. The link is also visible on the "data and graph" link in the iframe above. So that URL translates to MattSundquist and 1339.
<br>
<div style="overflow:auto;"><div class="geshifilter"><pre class="r geshifilter-R" style="font-family:monospace;">py <span style="">&lt;-</span> plotly<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;ggplot2examples&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;3gazttckd7&quot;</span><span style="color: #009900;">&#41;</span>
figure <span style="">&lt;-</span> py<span style="">$</span>get_figure<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;MattSundquist&quot;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1339</span><span style="color: #009900;">&#41;</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;">&#40;</span>figure<span style="color: #009900;">&#41;</span></pre></div></div>
</pre></div>
Then grab the data.
<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;">&#91;</span><span style="color: #009900;">&#93;</span></pre></div></div>
<br>
Plotly saves your revisions, data, plots, discussions, and scripts. That means you can share between languages and users of any technical capacity, since ggplot2 plots can also be edited with the GUI--no coding required. You no longer need to email your team an Excel file, .csv, zip file, .r file, set of plots, and a description of your work. The Plotly URL contains your interactive plot, code, and data, and also creates other URLs where you can access features. Those features are also accessible via API and the web app.
<br>
<br>
<center><img src="https://31.media.tumblr.com/304cc137dc0b4759da4ed2e04c8b77a9/tumblr_inline_n9t31bMREe1suclhk.png"></center>
<br>
<br>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.py">https://plot.ly/~ggplot2examples/98.py</a>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.r">https://plot.ly/~ggplot2examples/98.r
<li type=disc></a><a href="https://plot.ly/~ggplot2examples/98.m">https://plot.ly/~ggplot2examples/98.m</a>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.jl">https://plot.ly/~ggplot2examples/98.jl</a>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.embed">https://plot.ly/~ggplot2examples/98.embed</a>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.js">https://plot.ly/~ggplot2examples/98.js</a>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.json">https://plot.ly/~ggplot2examples/98.json</a>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.svg">https://plot.ly/~ggplot2examples/98.svg</a>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.png">https://plot.ly/~ggplot2examples/98.png</a>
<li type=disc> <a href="https://plot.ly/~ggplot2examples/98.pdf">https://plot.ly/~ggplot2examples/98.pdf</a>
<br>
<br>
<p>Besides being convenient for collaboration and your workflow, saving data, scripts, and plots together has academic and research benefits. <a href="http://www.smithsonianmag.com/science-nature/the-vast-majority-of-raw-data-from-old-scientific-studies-may-now-be-missing-180948067/?no-ist">A study</a> in <i>current biology</i> found that over 90% of data from papers published over the past 20 years was not available. Saving data, scripts, and plots together online can solve the problem.</p>
<br>
<br>
<i>Step 4: Share the plot and collaborate 
</i>
<br>
<br>
Now, we can share and edit the plot like a Google Doc: collaborating, commenting, exporting, <a href="https://plot.ly/r/file-options/">extending and adding data</a>, and saving revisions. Save <a href="https://plot.ly/r/privacy/">privately or publicly</a> (your choice) in your profile. 
<br>
<br>
<p>Your interactive <a href="https://plot.ly/r/embedding-plotly-graphs-in-HTML/">plots can be embedded in iframes</a> in web pages, blogs, Notebooks, and RPubs (see an <a href="http://ropensci.org/blog/2014/04/17/plotly/">rOpenSci post</a> and accompanying source for instructions on embedding). Plotly is like your combined Instagram and GitHub for plots and data. <a href="http://vimeo.com/94003080">This video</a> shows how collaboration and sharing works.
<br>
<br>
<center><iframe src="//player.vimeo.com/video/94003080" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/94003080">Sharing & Collaborating</a> from <a href="http://vimeo.com/plotly">PLOTLY</a> on <a href="https://vimeo.com">Vimeo</a>.</p></center>
<br>
<br>
Note: delightful experiences await you and your team.
<br>
<br>
<center><img src="https://31.media.tumblr.com/643fe7b20db7533d29effbb6e445d7b1/tumblr_inline_n9t2x0rEyi1suclhk.png"></center>
<br>
<br>
<i>The Plotly mission and ggplot2 support
</i>
<br>
<br>
<p>CP Snow in "<a href="http://en.wikipedia.org/wiki/The_Two_Cultures">The Two Cultures</a>" argues that the divide between sciences and humanities is a vast hindrance to societal advancement. Plotly is about bridging this divide: combining ease of use, collaboration, and beautiful graphs with the powerful tools of statistics and technical computing. We’re still quite new (not even a year old) and would love your feedback, advice, and thoughts. We're <a href="https://github.com/ropensci/plotly">on GitHub</a>, reachable at feedback at plot dot ly, and <a href="https://twitter.com/plotlygraphs">@plotlygraphs</a>.</p>
<br>
<br>
This post is based on an <a href="http://nbviewer.ipython.org/gist/msund/403910de45e282d658fa">IPython Notebook running R</a>. For a full-length ggplot2 and Plotly walk-through by <a href="http://www.bcaffo.com/">Professor Brian Caffo</a>, who is using Plotly for a Coursera data science class, <a href="http://www.youtube.com/watch?v=6ddBAUzIfmw">see this video</a>.
<br>
<br>
<center><iframe width="560" height="315" src="//www.youtube.com/embed/6ddBAUzIfmw" frameborder="0" allowfullscreen></iframe></center>
<br>
<br>
Happy plotting (and <a href="https://plot.ly/~streaming-demos/4/">streaming</a>)!</p>
<br>
<br>
<iframe width="800" height="600" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~streaming-demos/4/.embed?width=800&height=600"></iframe>
<br>
<br>