Last active
August 29, 2015 14:11
-
-
Save msund/3a6e99ef4ca301f1ba64 to your computer and use it in GitHub Desktop.
Maps & Volcanoes: Interactive 2D & 3D ggplot2
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
| <a href="https://plot.ly/r">R</a>, <a href="https://plot.ly/">Plotly</a>, and <a href="https://plot.ly/ggplot2">ggplot2</a> let you make, share, and collaborate on beautiful, interactive plots online. Let's see what we can do with the topographic data from Auckland's Maunga Whau Volcano that comes with R. | |
| <br> | |
| <br> | |
| Copy and paste this R code to make your first plot. The basic idea is: use ggplot2 code, add <code>py$ggplotly()</code> to call the Plotly API, and make an interactive, web-based plot for sharing and collaboration. | |
| <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;">(</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> | |
| | |
| <span style="color: #666666; font-style: italic;"># Generate data</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>reshape2<span style="color: #009900;">)</span> <span style="color: #666666; font-style: italic;"># for melt</span> | |
| volcano3d <span style=""><-</span> melt<span style="color: #009900;">(</span><a href="http://inside-r.org/r-doc/datasets/volcano"><span style="color: #003399; font-weight: bold;">volcano</span></a><span style="color: #009900;">)</span> | |
| <a href="http://inside-r.org/r-doc/base/names"><span style="color: #003399; font-weight: bold;">names</span></a><span style="color: #009900;">(</span>volcano3d<span style="color: #009900;">)</span> <span style=""><-</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;">(</span><span style="color: #0000ff;">"x"</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"y"</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"z"</span><span style="color: #009900;">)</span> | |
| | |
| <span style="color: #666666; font-style: italic;"># Basic plot</span> | |
| v <span style=""><-</span> <a href="http://inside-r.org/packages/cran/ggplot"><span style="">ggplot</span></a><span style="color: #009900;">(</span>volcano3d<span style="color: #339933;">,</span> aes<span style="color: #009900;">(</span>x<span style="color: #339933;">,</span> y<span style="color: #339933;">,</span> z = z<span style="color: #009900;">)</span><span style="color: #009900;">)</span> | |
| v <span style="">+</span> geom_tile<span style="color: #009900;">(</span>aes<span style="color: #009900;">(</span>fill = z<span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="">+</span> stat_contour<span style="color: #009900;">(</span><span style="color: #009900;">)</span> | |
| | |
| py<span style="">$</span>ggplotly<span style="color: #009900;">(</span><span style="color: #009900;">)</span></pre></div></div> | |
| <br> | |
| <br> | |
| The API response is a URL where the data, code, and plot reside: <a href="https://plot.ly/~r_user_guide/346">https://plot.ly/~r_user_guide/346</a>. | |
| <br> | |
| <br> | |
| <iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~r_user_guide/346.embed?width=640&height=480"></iframe> | |
| <br> | |
| <br> | |
| If you ran the code you'll notice the colors are different. We've applied a theme from within the Plotly GUI to change the colors and layout. You can save themes--styles, colors, layouts--from plots and apply them to new plots. Hover to see data points--you can <a href="https://plot.ly/r/text-and-annotations/#Adding-Hover-Text-to-Data-in-Line-and-Scatter-Plots">customize the hover text</a>--or click and drag to zoom. | |
| <br> | |
| <br> | |
| <a href="https://plot.ly/~r_user_guide/346"><img src="http://i.imgur.com/UQFc3Gn.png" title="3D" /></a> | |
| <br> | |
| <br> | |
| The plot is rendered using <a href="http://d3js.org/">D3.js</a>, a JavaScript visualization library developed by <a href="http://bost.ocks.org/mike/">Mike Bostock</a> of The New York Times. You can use the URL to <a href="www.r-bloggers.com/how-to-publish-r-and-ggplot2-to-the-web/">embed plots using knitr and Shiny</a>, or <a href="https://plot.ly/r/embedding-plotly-graphs-in-HTML/">in iframes</a> with a bit of HTML: | |
| <br> | |
| <br> | |
| <div style="background: #ffffff; overflow:auto;width:auto;border:white;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><iframe</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">"640"</span> <span style="color: #0000CC">height=</span><span style="background-color: #fff0f0">"480"</span> <span style="color: #0000CC">frameborder=</span><span style="background-color: #fff0f0">"0"</span> <span style="color: #0000CC">seamless=</span><span style="background-color: #fff0f0">"seamless"</span> <span style="color: #0000CC">scrolling=</span><span style="background-color: #fff0f0">"no"</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">"https://plot.ly/~r_user_guide/346.embed?width=640&height=480"</span><span style="color: #007700">></iframe></span> | |
| </pre></div> | |
| <br> | |
| <br> | |
| We can add collaborators online and <a href="https://plot.ly/r/privacy/">control the privacy</a>. But not all our work is online; we generate reports, write papers, and give presentations with slides. Thus, for offline use, we can can export an image (SVG, EPS, PNG, or PDF), and include a link to the plot in our image. E.g.: | |
| <br> | |
| <br> | |
| <a href="https://plot.ly/346/~r_user_guide/"><img src="http://i.imgur.com/oiZ19bV.png" title="offline version" /></a> | |
| <br> | |
| <br> | |
| When you share the URL, you're sharing a fully reproducible version of your plot. The URL hosts your data, code to reproduce the plot, and exportable versions. | |
| <br> | |
| <br> | |
| Others can fork your plot and make their own version, allowing for lightweight collaboration. That means no more emailing or searching around for data, plots, and code. It's all here. | |
| <br> | |
| <br> | |
| <ul> | |
| <li type=disc>https://plot.ly/~r_user_guide/346.svg | |
| <li type=disc>https://plot.ly/~r_user_guide/346.png | |
| <li type=disc>https://plot.ly/~r_user_guide/346.pdf | |
| <li type=disc>https://plot.ly/~r_user_guide/346.r | |
| <li type=disc>https://plot.ly/~r_user_guide/346.py | |
| <li type=disc>https://plot.ly/~r_user_guide/346.m | |
| <li type=disc>https://plot.ly/~r_user_guide/346.jl | |
| <li type=disc>https://plot.ly/~r_user_guide/346.json | |
| </ul> | |
| <br> | |
| <br> | |
| Plotly graphs are represented using <a href="http://www.json.org/">JSON</a>, a syntax for storing and exchanging data. The .json version of each plot contains the data and a full description of the plot. The framework allows interoperability between Python, R, MATLAB, and other languages. | |
| <br> | |
| <br> | |
| We can also make <a href="blog.plot.ly/post/101360048217/7-plotly-graphs-in-3d-stocks-cats-and-lakes">3D plots</a> rendered with WebGL. The iframe below says "source: from api (254)." That's a link to our original plot. The forked 3D plot is at a new URL--<a href="https://plot.ly/~MattSundquist/2444">https://plot.ly/~MattSundquist/2444</a>--and shows the fork history. | |
| <br> | |
| <br> | |
| <a href="https://plot.ly/346/~r_user_guide/"><img src="http://i.imgur.com/24lu6Qs.png" title="3D" /></a> | |
| <br> | |
| <br> | |
| If you click and hold the plot, you can rotate it, or scroll in and out on the plot to zoom in and out. If you hover, you can see dynamic contour lines. You can fork the plot and see it in full-screen here: <a href="https://plot.ly/~MattSundquist/2444">https://plot.ly/~MattSundquist/2444</a>. Check out <a href="blog.plot.ly/post/101360048217/7-plotly-graphs-in-3d-stocks-cats-and-lakes">our 3D</a> collection for more. | |
| <br> | |
| <br> | |
| <iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/2444.embed?width=640&height=480"></iframe> | |
| <br> | |
| <br> | |
| We're on <a href="https://twitter.com/plotlygraphs">Twitter</a> and <a href="https://github.com/plotly">GitHub</a>, and would love to hear your feedback, thoughts, and suggestions. We plan to continue expanding our maps coverage, so your ideas are most welcome. If our free cloud-based product doesn't work for you, contact us about <a href="https://plot.ly/product/enterprise/">getting Plotly on-premise</a>. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment