Skip to content

Instantly share code, notes, and snippets.

@msund
Created February 13, 2015 20:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msund/4d188b1e736e0e0fe78b to your computer and use it in GitHub Desktop.
Save msund/4d188b1e736e0e0fe78b to your computer and use it in GitHub Desktop.
HTML for Joe
Imagine exploring graphs like you would explore terrain on Google Maps. You would want to zoom, toggle, see data when you hover your mouse, and filter. For viewers, this is more engaging, informative, and fun. For exploration, it's more precise and efficient. Unfortunately, creating interactive plots can be difficult, time-consuming, and a technical burden.
<br>
<br>
<br>
<a href="https://plot.ly/">Plotly</a> converts ggplot2 plots into interactive, online plots rendered with D3.js, a JavaScript visualizaiton library. Letting you publish interactive ggplot2 plots with one line of code is the goal behind our project. Plotly is free and online, or can be hosted (or <a href="https://plot.ly/product/enterprise/">host Plotly</a> on your servers).
<br>
<br>
<br>
Let's make a histogram, bar chart, and boxplot. You can copy and paste this code into your R terminal to make an <a href="http://stackoverflow.com/questions/6957549/overlaying-histograms-with-ggplot2-in-r">overlad histogram</a>. <a href="https://plot.ly/ggplot2">Sign-up</a> on our site or use our sandbox account.
<br>
<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;"># 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;">&#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 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;">&#40;</span>plotly<span style="color: #009900;">&#41;</span>
&nbsp;
py <span style="">&lt;-</span> plotly<span style="color: #009900;">&#40;</span>username=<span style="color: #0000ff;">&quot;r_user_guide&quot;</span><span style="color: #339933;">,</span> key=<span style="color: #0000ff;">&quot;mw5isa4yqp&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #666666; font-style: italic;"># open plotly connection</span>
&nbsp;
dat <span style="">&lt;-</span> <a href="http://inside-r.org/r-doc/base/data.frame"><span style="color: #003399; font-weight: bold;">data.frame</span></a><span style="color: #009900;">&#40;</span>xx = <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><a href="http://inside-r.org/r-doc/stats/runif"><span style="color: #003399; font-weight: bold;">runif</span></a><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">20</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><a href="http://inside-r.org/r-doc/stats/runif"><span style="color: #003399; font-weight: bold;">runif</span></a><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">40</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">80</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><a href="http://inside-r.org/r-doc/stats/runif"><span style="color: #003399; font-weight: bold;">runif</span></a><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">30</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>yy = <a href="http://inside-r.org/r-doc/base/rep"><span style="color: #003399; font-weight: bold;">rep</span></a><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">letters</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="">:</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>each = <span style="color: #cc66cc;">100</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<a href="http://inside-r.org/r-doc/graphics/plot"><span style="color: #003399; font-weight: bold;">plot</span></a> <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>x=xx<span style="color: #339933;">,</span> fill=yy<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="">+</span> geom_histogram<span style="color: #009900;">&#40;</span>alpha=<span style="color: #cc66cc;">0.2</span><span style="color: #339933;">,</span> position=<span style="color: #0000ff;">&quot;identity&quot;</span><span style="color: #009900;">&#41;</span>
&nbsp;
py<span style="">$</span>ggplotly<span style="color: #009900;">&#40;</span><a href="http://inside-r.org/r-doc/graphics/plot"><span style="color: #003399; font-weight: bold;">plot</span></a><span style="color: #009900;">&#41;</span></pre></div></div>
<br>
<br>
<br>
Adding the final line of code, py$ggplotly(), is what calls Plotly. Click and drag to zoom, hover your mouse to see data, or turn traces on and off in the legend. You or a teammate can edit and share the graph in a GUI (like Google Docs).
<br>
<br>
<br>
<img src="http://i.imgur.com/TZgWddX.gif" /></a>
<br>
<br>
<br>
<div>
<a href="https://plot.ly/~r_user_guide/994/" target="_blank" title="count vs xx" style="display: block; text-align: center;"><img src="https://plot.ly/~r_user_guide/994.png" alt="count vs xx" style="max-width: 100%;" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
<script data-plotly="r_user_guide:994" src="https://plot.ly/embed.js" async></script>
</div>
<br>
<br>
<br>
Next up, let's <a href="https://learnr.wordpress.com/2009/03/17/ggplot2-barplots/">visualize migration</a>. First we'll add data.
<br>
<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/stats/df"><span style="color: #003399; font-weight: bold;">df</span></a> <span style="">&lt;-</span> <a href="http://inside-r.org/r-doc/base/structure"><span style="color: #003399; font-weight: bold;">structure</span></a><span style="color: #009900;">&#40;</span><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: #cc66cc;">106487</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">495681</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1597442</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">2452577</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2065141</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2271925</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">4735484</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3555352</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">8056040</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">4321887</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2463194</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">347566</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">621147</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">1325727</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1123492</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">800368</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">761550</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1359737</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">1073726</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">36</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">53</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">141</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">41538</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">64759</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">124160</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">69942</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">74862</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">323543</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">247236</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">112059</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">16595</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">37028</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">153249</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">427642</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1588178</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2738157</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">2795672</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2265696</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">11951</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">33424</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">62469</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">74720</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">166607</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">404044</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">426967</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">38972</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">361888</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">1143671</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1516716</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">160037</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">354804</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">996944</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">1716374</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1982735</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3615225</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">4486806</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3037122</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">17</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">54</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">55</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">210</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">312</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">358</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">857</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">350</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">7368</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">8443</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">6286</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1750</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">7367</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">14092</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">28954</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">80779</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">176893</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">354939</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">446792</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">33333</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">69911</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">53144</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">29169</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">18005</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">11704</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">13363</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">18028</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">46547</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">14574</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">8954</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2483</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">14693</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">25467</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">25215</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">41254</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">46237</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">98263</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">185986</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> .Dim = <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: #cc66cc;">19</span><span style="color: #339933;">,</span>
<span style="color: #cc66cc;">5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> .Dimnames = <a href="http://inside-r.org/r-doc/base/list"><span style="color: #003399; font-weight: bold;">list</span></a><span style="color: #009900;">&#40;</span><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;">&quot;1820-30&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1831-40&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">&quot;1841-50&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1851-60&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1861-70&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1871-80&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">&quot;1881-90&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1891-00&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1901-10&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1911-20&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">&quot;1921-30&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1931-40&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1941-50&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1951-60&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">&quot;1961-70&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1971-80&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1981-90&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;1991-00&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">&quot;2001-06&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <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;">&quot;Europe&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;Asia&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;Americas&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">&quot;Africa&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;Oceania&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span></pre></div></div>
<br>
<br>
<br>
Now we can plot.
<br>
<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/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>
df.m <span style="">&lt;-</span> melt<span style="color: #009900;">&#40;</span><a href="http://inside-r.org/r-doc/stats/df"><span style="color: #003399; font-weight: bold;">df</span></a><span style="color: #009900;">&#41;</span>
df.m <span style="">&lt;-</span> rename<span style="color: #009900;">&#40;</span>df.m<span style="color: #339933;">,</span> <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>X1 = <span style="color: #0000ff;">&quot;Period&quot;</span><span style="color: #339933;">,</span> X2 = <span style="color: #0000ff;">&quot;Region&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
a <span style="">&lt;-</span> <a href="http://inside-r.org/packages/cran/ggplot"><span style="">ggplot</span></a><span style="color: #009900;">&#40;</span>df.m<span style="color: #339933;">,</span> aes<span style="color: #009900;">&#40;</span>x = Period<span style="color: #339933;">,</span> y = value<span style="">/</span>1e<span style="">+</span>06<span style="color: #339933;">,</span>
fill = Region<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
b <span style="">&lt;-</span> a <span style="">+</span> geom_bar<span style="color: #009900;">&#40;</span>stat = <span style="color: #0000ff;">&quot;identity&quot;</span><span style="color: #339933;">,</span> position = <span style="color: #0000ff;">&quot;stack&quot;</span><span style="color: #009900;">&#41;</span>
py<span style="">$</span>ggplotly<span style="color: #009900;">&#40;</span>b<span style="color: #009900;">&#41;</span></pre></div></div>
<br>
<br>
<br>
And here we have our plot. Hovering shows the exact value. Because this plot is a fork of the original, the source is still shown in the link on the bottom.
<br>
<br>
<br>
<div>
<a href="https://plot.ly/~MattSundquist/7445/" target="_blank" title="value/1e+06 vs Period" style="display: block; text-align: center;"><img src="https://plot.ly/~MattSundquist/7445.png" alt="value/1e+06 vs Period" style="max-width: 100%;width: 786px;" width="786" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
<script data-plotly="MattSundquist:7445" src="https://plot.ly/embed.js" async></script>
</div>
<br>
<br>
<br>
For offline use, like embedding in PowerPoint presentations or papers, we can export the file, or convert the plot to Python, MATLAB, Julia, or JSON for collaboration. This is possible via the API, GUI, or plot URL:
<br>
<br>
<br>
<ul>
<li type=disc>https://plot.ly/~MattSundquist/7445
<li type=disc>https://plot.ly/~MattSundquist/7445.png
<li type=disc>https://plot.ly/~MattSundquist/7445.svg
<li type=disc>https://plot.ly/~MattSundquist/7445.pdf
<li type=disc>https://plot.ly/~MattSundquist/7445.py
<li type=disc>https://plot.ly/~MattSundquist/7445.m
<li type=disc>https://plot.ly/~MattSundquist/7445.jl
<li type=disc>https://plot.ly/~MattSundquist/7445.json
<li type=disc>https://plot.ly/~MattSundquist/7445.embed
</ul>
<br>
<br>
<br>
And our final example, a box plot. Note that if you hover you can see the precise values. This plot and the previous plot were tweaked in the GUI.
<br>
<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/base/set.seed"><span style="color: #003399; font-weight: bold;">set.seed</span></a><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1234</span><span style="color: #009900;">&#41;</span>
<a href="http://inside-r.org/r-doc/stats/df"><span style="color: #003399; font-weight: bold;">df</span></a> <span style="">&lt;-</span> <a href="http://inside-r.org/r-doc/base/data.frame"><span style="color: #003399; font-weight: bold;">data.frame</span></a><span style="color: #009900;">&#40;</span><a href="http://inside-r.org/packages/cran/cond"><span style="">cond</span></a> = <a href="http://inside-r.org/r-doc/base/factor"><span style="color: #003399; font-weight: bold;">factor</span></a><span style="color: #009900;">&#40;</span> <a href="http://inside-r.org/r-doc/base/rep"><span style="color: #003399; font-weight: bold;">rep</span></a><span style="color: #009900;">&#40;</span><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;">&quot;A&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;B&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> each=<span style="color: #cc66cc;">200</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
rating = <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><a href="http://inside-r.org/r-doc/stats/rnorm"><span style="color: #003399; font-weight: bold;">rnorm</span></a><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">200</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><a href="http://inside-r.org/r-doc/stats/rnorm"><span style="color: #003399; font-weight: bold;">rnorm</span></a><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">200</span><span style="color: #339933;">,</span> <a href="http://inside-r.org/r-doc/base/mean"><span style="color: #003399; font-weight: bold;">mean</span></a>=<span style="color: #cc66cc;">.8</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<a href="http://inside-r.org/r-doc/graphics/box"><span style="color: #003399; font-weight: bold;">box</span></a> <span style="">&lt;-</span> <a href="http://inside-r.org/packages/cran/ggplot"><span style="">ggplot</span></a><span style="color: #009900;">&#40;</span><a href="http://inside-r.org/r-doc/stats/df"><span style="color: #003399; font-weight: bold;">df</span></a><span style="color: #339933;">,</span> aes<span style="color: #009900;">&#40;</span>x=<a href="http://inside-r.org/packages/cran/cond"><span style="">cond</span></a><span style="color: #339933;">,</span> y=rating<span style="color: #339933;">,</span> fill=<a href="http://inside-r.org/packages/cran/cond"><span style="">cond</span></a><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="">+</span> geom_boxplot<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
py<span style="">$</span>ggplotly<span style="color: #009900;">&#40;</span><a href="http://inside-r.org/r-doc/graphics/box"><span style="color: #003399; font-weight: bold;">box</span></a><span style="color: #009900;">&#41;</span></pre></div></div>
<br>
<br>
<br>
<div>
<a href="https://plot.ly/~MattSundquist/7449/" target="_blank" title="rating vs cond" style="display: block; text-align: center;"><img src="https://plot.ly/~MattSundquist/7449.png" alt="rating vs cond" style="max-width: 100%;width: 786px;" width="786" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
<script data-plotly="MattSundquist:7449" src="https://plot.ly/embed.js" async></script>
</div>
<br>
<br>
<br>
You can embed plots in <a href="blog.plot.ly/post/106630252117/plot-with-ggplot2-and-plotly-within-knitr-reports">knitr</a>, <a href="https://github.com/chriddyp/plotly-shiny">Shiny</a>, or anywhere you want to <a href="https://plot.ly/how-to-embed-plotly-graphs-in-websites/">embed plots</a>. To see a list of supported ggplot2 features, check out our <a href="https://github.com/ropensci/plotly/issues">GitHub page</a>. <a href ="https://marianne-corvellec.appspot.com/">Marianne Corvellec</a> and <a href="http://sugiyama-www.cs.titech.ac.jp/~toby/">Toby Hocking</a> are always adding new ones, so feel free to let us know which ones are most important to you.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment