Post

gistfile1.html

We've paid these famous graphs our sincerest form of compliment: trying to re-make them for the web. This post is inspired by <a href="http://www.edwardtufte.com/tufte/">Edward Tufte</a>. The plots were made with our free online product--you can press "play with this data" and start editing your own copy online. We have <a href="https://plot.ly/learn">tutorials</a> for using our web product and <a href="https://plot.ly/api">APIs</a>; contact us if you're interested in a trial of <a href="https://plot.ly/product/enterprise/">plotly on-premise</a>. 
<br>
<br>
<br>
<h3>March on Moscow</h3>
<br>
<br>
<a href="http://www.edwardtufte.com/tufte/minard-obit">Charles Minard</a>'s graph of the March on Moscow shows the dwindling size of Napoleon's army. The broad tan line shows the army's size on the March from Poland to Moscow. The lower, thinner, dark line shows the army's size on the retreat. The width of the lines shows the army size, which started over 400,000 strong and dwindled to 10,000. The bottom lines show temperature and time scales, and the overall plot shows distance travelled. 
<br>
<br>
<img src="http://i.imgur.com/OvR8LnO.png" /></a>
<br>
<br>
We can re-make the chart in plotly.
<br>
<br>
<br>
<iframe width="670" height="400" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~Dreamshot/393.embed?width=670&height=400"></iframe>
<br>
<br>
<br>
Take two. The tan area on the left shows troop losses on the advance. The dark line shows troop losses on the retreat. The blue line shows temperature, and is aligned with a second y-axis for temperature on the right side. The bottom x-axes show dates and distance, with stars marking key points on the journey. If  you hover your mouse, you'll see data appear. Click and drag to zoom.
<br>
<br>
<br>
<iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/4863.embed?width=640&height=480"></iframe>
<br>
<br>
<br>
<h3>John Snow & Cholera Cases</h3>
<br>
<br>
<a href="http://en.wikipedia.org/wiki/John_Snow_(physician)">John Snow</a> found the source of a cholera outbreak in London in 1854 was a water pump on Broad Street. His examinations of the water didn't reveal problems. His map convinced the government to disable the pump. 
<br>
<br>
<br>
<img src="http://i.imgur.com/xUzqyFK.png" /></a>
<br>
<br>
<br>
We've remade the graph using <a href="https://plot.ly/r">Plotly's R API</a> and a <a href="https://github.com/davidkretch/london_cholera_map/blob/master/london_cholera_map.R">converted ggplot2 figure</a>. The blue squares have added opacity, meaning darker clusters along the gray lines (which represent roads) represent multiple deaths. Click and drag to zoom in. 
<br>
<br>
<br>
<iframe width="650" height="443" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/2418.embed?width=650&height=443"></iframe>
<br>
<br>
<br>
Here's the same data with overlaid polygons. The polygons symbolize a pump-region; namely, where to go if you visit your closest pump. If you hover your mouse, you can see the name of each region and how many deaths occurred in that region. Zooming in spreads out clusters. Zooming is handy for data exploration. 
<br>
<br>
<br>
<img src="http://i.imgur.com/EzzHSPM.gif"/></a>
<br>
<br>
<br>
<iframe width="650" height="520" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/4946.embed?width=650&height=520"></iframe>
<br>
<br>
<br>
<h3>Causes Of Mortality Polar Chart</h3>
<br>
<br>
<br>
<a href="http://en.wikipedia.org/wiki/Florence_Nightingale">Florence Nightingale</a> (1820 -1910) was an English social reformer and statistician who adapted the pie chart into a polar area diagram. The "Diagram of the causes of mortality in the army in the East" below shows causes of death in the army. We've re-made it as a polar chart in plotly. 
<br>
<br>
<br>
<p><img src="http://i.imgur.com/WffDiO4.jpg" title="Nightingale" /></a></p>
<br>
<br>
<br>
<iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/4456.embed?width=640&height=480"></iframe>
<br>
<br>
<br>
Comparing magnitudes and values is hard here if it's not side-by-side. Stephen Few in "<a href="www.perceptualedge.com/articles/visual_business_intelligence/save_the_pies_for_dessert.pdf">Save the Pies for Dessert</a>" notes these difficulties for pie charts. Stacked bar charts like the one below work. Note also the inset line plot on the upper right, which shows the exact same data over time as a line plot. 
<br>
<br>
<br>
<iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/3065.embed?width=640&height=480"></iframe>
<br>
<br>
<br>
<h3>The Earth</h3>
<br>
<br>
The maps below were made by <a href="http://en.wikipedia.org/wiki/Martin_Waldseem%C3%BCller">Martin Waldseemüller</a>, in 1507 by <a href="http://en.wikipedia.org/wiki/Abraham_Ortelius">Abraham Ortelius</a>, in 1570 and by <a href="http://en.wikipedia.org/wiki/Emanuel_Bowen">Emanuel Bowen</a>, in 1744. Plotly's own <a href="https://plot.ly/~bronsolo">Chuck Bronson</a> made this 3D globe. If you click, hold, and drag the figure, you can flip and spin it. Toggle in and out to zoom. The plot, data, and code to reproduce the plot are here: <a href="https://plot.ly/~MattSundquist/4373">https://plot.ly/~MattSundquist/4373</a>. Note that you won't be able to see this 3D plot on a phone. See our <a href="blog.plot.ly/post/107519814787/nine-interactive-3d-graphs-that-let-you-zoom">3D gallery</a> for more.  
<br>
<br>
<br>
<img src="http://i.imgur.com/O0wwXie.gif" />
<br>
<br>
<br>
<br>
<br>
<center>
<iframe width="675" height="675" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/4373.embed?width=675&height=675"></iframe>
</center>
<br>
<br>
<br>
<h3>Hans Rosling</h3>
<br>
<br>
<br>
This bubble chart tracks life expectancy vs GNP. The x-axis shows Gross National Product and the y-axis shows life expectancy. Each bubble represents a country; bubbles are sized for country population and the colors show the continent. See <a href="http://moderndata.plot.ly/graph-data-from-mysql-database-in-python/">a tutorial</a> to learn how to make the chart with Python from MySQL or <a href="https://plot.ly/how-to-make-a-bubble-chart-online/">our web tutorial</a> to learn to make this from our web spreadsheet.
<br>
<br>
<br>
<center><a href="https://plot.ly/~jackp/1835"><img src="http://i.imgur.com/PpVUnjb.png" title="GapMinder" /></a></center>
<br>
<br>
<br>
<iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~jackp/1835.embed?width=640&height=480"></iframe>
<br>
<br>
<br>
We can also <a href="https://plot.ly/python/streaming-tutorial/">stream the data</a> with plotly. We're showing the plot here embedded in an iframe, a plot in the plotly GUI, and an IPython Notebook.
<br>
<br>
<br>
<a href="https://plot.ly/python/streaming-tutorial/"><img src="http://i.imgur.com/jAZRmNf.gif" /></a>
<br>
<br>
<br>
<h3>Anscombe's Quartet: Why We Graph</h3>
<br>
<br>
<br>
<a href = "http://www.sjsu.edu/faculty/gerstman/StatPrimer/anscombe1973.pdf"><em>Anscombe's Quartet</em></a> shows four datasets with identical (to two decimal places) linear regression coefficients, x and y means, x and y variance, and Pearson Correlation Coefficients. A <a href="http://www.nature.com/nmeth/journal/v9/n1/full/nmeth.1829.html">Nature article</a> reproduced the datasets and plots of each one. 
<br>
<br>
<br>
<p><a href="https://plot.ly/~MattSundquist/2745"><img src="http://i.imgur.com/cP4YBgL.png" title="table" /></a></p>
<br>
<br>
<br>
Statistics alone could be quite confusing, so we've plotted the points and show underlying data on the hover. Click and drag to zoom.  See our <a href="https://gist.github.com/msund/b823f4df1e7dacf4c1a4">ggplot2</a> and <a href="http://nbviewer.ipython.org/gist/msund/cc530bb04dddb5ab6f61">matplotlib</a> files to <a href="https://plot.ly/~MattSundquist/2745">make a graph</a> with subplots, and an <a href="blog.plot.ly/post/68951620673/why-graph-anscombes-quartet">Anscombe blog post</a> to learn more.
<br>
<br>
<br>
<iframe width="700" height="600" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/2745/anscombes-quartet/.embed?width=700&height=600"></iframe>
<br>
<br>
<br>
<h3>Imports & Exports Line Chart</h3>
<br>
<br>
<a href="http://en.wikipedia.org/wiki/William_Playfair">William Playfair</a> (1759 - 1823), a Scottish engineer and political economist, invented the line graph, bar chart, pie chart, and circle graph. His graph below shows that in the 1750s England went from importing more than it was exporting to exporting more than it was importing. 
<br>
<br>
<img src="http://i.imgur.com/ycJetYr.png" />
<br>
<br>
Here is our re-make.
<br>
<br>
<iframe width="640" height="480" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~MattSundquist/2404.embed?width=640&height=480"></iframe>
<br>
<br>
<br>
<h3>What Plotly Aims To Be</h3>
<br>
<br>
<br>
Plotly supports graphing for anyone using the web or <a href="https://plot.ly/excel">Excel</a>, Google Docs, <a href="https://plot.ly/python">Python</a>, <a href="https://plot.ly/matplotlib">matplotlib</a>, <a href="https://plot.ly/r">R</a>, <a href="https://plot.ly/ggplot2">ggplot2</a>, & <a href="https://plot.ly/matlab">MATLAB</a>. Collaborate online with anyone on any browser or device without any downloads or installations. We support 2D, 3D, and streaming graphs and have over 100K users from science, engineering, industry, journalism, academia, and education (K-12 & up). Plotly is free for unlimited sharing, or you can run <a href="https://plot.ly/product/enterprise/">Plotly on-premise</a> on a private server; contact us today <a href="https://plot.ly/product/enterprise/">to start a trial</a>.  
<br>
<br>
<br>
Every Plotly graph supports exports, embedding, contains the data as part of the graph, can be reproduced in multiple languages, and is stored at a URL. For example, consider the second map of London: <a href="https://plot.ly/~MattSundquist/3242">https://plot.ly/~MattSundquist/3242</a>. The posting user can add collaborators, and then keep the graph private or make it public. See more:
<br>
<br>
<ul>
<li type=disc>https://plot.ly/~MattSundquist/3242.embed
<li type=disc>https://plot.ly/~MattSundquist/3242.png
<li type=disc>https://plot.ly/~MattSundquist/3242.pdf
<li type=disc>https://plot.ly/~MattSundquist/3242.svg
<li type=disc>https://plot.ly/~MattSundquist/3242.eps
<li type=disc>https://plot.ly/~MattSundquist/3242.r
<li type=disc>https://plot.ly/~MattSundquist/3242.py
<li type=disc>https://plot.ly/~MattSundquist/3242.m
<li type=disc>https://plot.ly/~MattSundquist/3242.jl
<li type=disc>https://plot.ly/~MattSundquist/3242.json
</ul>