maps post for Alex

gistfile1.txt

Let's say you want to visually compare the peaks in a mountain range. Or you need to describe irregularities in temperature over time. But all your data is in a spreadsheet. How would you do it?
<br>
<br>
A map. Not just any map. A beautiful, interactive, online map.
<br>
<br>
This post shows how to use interactivity and maps in <a href="https://plot.ly">Plotly</a>, a new graphing and analytics platform. Our <a href="https://plot.ly/api">APIs</a> for <a href="https://plot.ly/r">R</a>, <a href="https://plot.ly/python">Python</a>, and <a href="https://plot.ly/matlab">MATLAB</a> let you collaboratively make and share plots and maps. You can make plots using <a href="https://plot.ly/ggplot2">ggplot2</a>, <a href="https://plot.ly/matplotlib">matplotlib</a>, Excel, <a href="https://github.com/plotly/Igor-Pro-Graph-Converter">Igor Pro</a>, or our web app--entirely with coding or without any. Your call.
<br>
<br>
<h2>1. Canadian Cities, Virginia Breweries, & Election Maps</h2>
<br>
<br>
The choropleth map shows resulting %'s of votes per state in the US based on 2012 election results for Mitt Romney. The bubble size in the second plot represents the population size of each city. Hover over the text with your mouse to learn more; click and drag to zoom in. The R and ggplot2 code can be found in a <a href="http://www.r-bloggers.com/online-r-and-plotly-graphs-canadian-and-u-s-maps-old-faithful-with-multiple-axes-overlaid-histograms/">population blog post</a> and <a href="http://is-r.tumblr.com/post/35200999886/make-your-own-electoral-map">choropleth post</a>.
<br>
<br>
<center>
<iframe width="640" height="482" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/2418.embed?width=640&height=482"></iframe>
</center>
<br>
<br>
<iframe width="675" height="675" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/878.embed?width=675&height=675"></iframe>
<br>
<br>
These plots were embedded in iframes. We can embed interactive plots in an iframe in a blog, website, or Notebook with a bit of HTML wrapped around the plot URL (<a href="https://plot.ly/~MattSundquist/878">https://plot.ly/~MattSundquist/878</a>). 
<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">&lt;iframe</span> <span style="color: #0000CC">width=</span><span style="background-color: #fff0f0">&quot;675&quot;</span> <span style="color: #0000CC">height=</span><span style="background-color: #fff0f0">&quot;675&quot;</span> <span style="color: #0000CC">frameborder=</span><span style="background-color: #fff0f0">&quot;0&quot;</span> <span style="color: #0000CC">seamless=</span><span style="background-color: #fff0f0">&quot;seamless&quot;</span> <span style="color: #0000CC">scrolling=</span><span style="background-color: #fff0f0">&quot;no&quot;</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">&quot;https://plot.ly/~etpinard/453.embed?width=675&amp;height=675&quot;</span><span style="color: #007700">&gt;&lt;/iframe&gt;</span>
</pre></div>
<br>
<br>
You don't have to email, store, and edit code, data, and graphs separately. It's in the same place and interoperable between users and languages. Huzzah, the cloud! Or you can run your own version of Plotly <a href="https://plot.ly/product/enterprise/">on-premise</a> rather than using our free web product. Share the URL or add a collaborator (like Google Docs), and you can access and edit your figure and translations of the figure into other languages.
<br>
<br>
<ul>
<li type=disc>https://plot.ly/~MattSundquist/878.png
<li type=disc>https://plot.ly/~MattSundquist/878.svg
<li type=disc>https://plot.ly/~MattSundquist/878.pdf
<li type=disc>https://plot.ly/~MattSundquist/878.py
<li type=disc>https://plot.ly/~MattSundquist/878.r
<li type=disc>https://plot.ly/~MattSundquist/878.m
<li type=disc>https://plot.ly/~MattSundquist/878.jl
<li type=disc>https://plot.ly/~MattSundquist/878.json.
</ul>
<br>
<br>
<a href="https://plot.ly/878/~MattSundquist/"><img src="http://i.imgur.com/mTVAsS5.png" title="bubbles" /></a>
<br>
<br>
<h2>2. Surface Air Temperature Anomalies in July 2014</h2>
<br>
<br>
<a href="https://plot.ly/~etpinard/">Étienne Tétreault-Pinard</a> used matplotlib to combine a scatter plot with a contour plot in an <a href="http://nbviewer.ipython.org/github/etpinard/plotly-misc-nbs/blob/etienne/plotly-maps.ipynb">IPython Notebook</a>.
<br>
<br>
<center>
<iframe width="675" height="675" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~etpinard/453.embed?width=675&height=675"></iframe>
</center>
<br>
<br>
<h2>2. The Power Of Interactivity</h2>
<br>
<br>
The bubble charts above are simple; the bubble chart below shows how much you can do with hover text. We can see GDP per capita (x-axis), life expectancy (y-axis), country population (bubble size), and continent (color). All of that data is also available when you hover on a point. These complex interactions are powered by <a href="http://d3js.org/">D3.js</a>, a JavaScript visualization library Plotly uses. It was developed by Mike Bostock of the New York Times. 
<br>
<br>
<iframe width="650" height="500" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~etpinard/191.embed?width=650&height=500"></iframe>
<br>
<br>
We can show all the samples in the plot, and add opacity so we can better see overlapping points. Consider:
<br>
<br>
<iframe width="720" height="600" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/2346.embed?width=720&height=600"></iframe>
<br>
<br>
<h2>3. Mount Bruno In 3D</h2>
<br>
<br>
Let's check out what we can do with 3D graphs. The surface plot below was originally <a href="https://plot.ly/~bronsolo/63/latitude-vs-longitude/">a contour plot</a> made with MATLAB by <a href="https://plot.ly/~bronsolo">Chuck Bronson</a>. The plot shows the elevation of Mt. Bruno. Learn <a href="https://plot.ly/matlab/3d-surface-plots/">to make your own</a>.
<br>
<br>
<center>
<iframe width="675" height="675" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/2509.embed?width=675&height=675"></iframe>
</center>
<br>
<br>
You can customize the interactions, colors, lines, and more via code or the web app. Our 3D plots are rendered using WebGL; you can <a href="https://plot.ly/python/3d-plots-tutorial/#8.3-Lorenz-Attrator-streaming-plot">stream your 3D graphs too</a>. 
<br>
<br>
<a href="https://plot.ly/193/~PlotBot/"><img src="http://i.imgur.com/c7oH9yG.png" title="Mountain" /></a>
<br>
<br>
<h2>4. Earth</h2>
<br>
<br>
The 3D plot below, made with MATLAB, is an interactive globe. By scrolling, you can zoom all the way in to see the Earth from the inside out. It is 3D, interactive, and you can <a href="https://plot.ly/2079/~matlab_user_guide/">make your own copy</a> and edit your own version of the plot with or without coding.
<br>
<br>
<center>
<iframe width="675" height="675" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~matlab_user_guide/2079.embed?width=675&height=675"></iframe>
</center>
<br>
<br>
Try it out for yourself.
<br>
<br>
<a href="https://plot.ly/2079/~matlab_user_guide/"><img src="http://i.imgur.com/KUZzsh2.gif" title="globe" /></a>
<br>
<br>
<h2>5. Lakes in 3D</h2>
<br>
<br>
Transitions to 3D plots from heatmaps and contour plots are possible from the Plotly web app. For more, see our <a href="blog.plot.ly/post/101360048217/7-plotly-graphs-in-3d-stocks-cats-and-lakes">3D graphs post</a>.
<br>
<br>
<iframe width="640" height="640" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~BrillionNerd/3.embed?width=640&height=640"></iframe>
<br>
<br>
<a href="https://plot.ly/3/~BrillionNerd/"><img src="http://i.imgur.com/zteAuSD.png" title="3D" /></a>
<br>
<br>
<br><iframe width="700" height="700" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/2160.embed?width=700&height=700"></iframe>