The world’s leading publication for data science, AI, and ML professionals.

How to Upload and Embed Interactive Plotly Visualizations

Plotly is a great tool for interactive data visualizations, but its Chart-Studio service is limited to 500KB uploads.

Created By Author
Created By Author

I have been sharing a lot of interactive plots this year that I make using Plotly. For a while, Plotly’s chart-studio service was a good solution for me to upload my plots so that I could embed them in articles or presentations. However, Chart-Studio has a pretty aggressive 500KB size limit on their free tier. And chart-studio doesn’t have a transparent option to pay for larger uploads aside from expensive business plans.

I figured there had to be a better way to share the interactive web maps I’ve been making, and sure enough, there was! In this post, I will show you how to upload an interactive Plotly map to Datapane and embed it on any website.

Chart-Studio

Take a look at the plot below depicting changing snowpack over Alaska. I created it using Matplotlib and Cartopy, which do a great job projecting the data onto a base map. However, static maps don’t allow the viewer to see the data values or zoom out to gain context about the location. Also, while animated maps like this are fun, I think that a slider on a web map allows a reader to gain a better understanding of change over time.

Created By Author
Created By Author

Making an interactive version of this would mean I don’t have to choose between the data being visible and the viewer understanding where on the Earth we are. When I create maps for settings like blog posts, I like to use interactive maps since I won’t be there to explain background information. I gravitate towards static maps for presentations since I can provide any needed context to the viewers.

We can easily recreate this plot to be interactive using Plotly. However, there are a lot of data points, which far exceed the 500KB Chart-Studio limit. But we will deal with that in a minute. First, here is the code I used to remake the plot with Plotly:

Screenshot of Plotly Plot (Created By Author)
Screenshot of Plotly Plot (Created By Author)

Here is a screenshot of the plot this code creates. It looks fine! However, when I go to upload it using chart-studio I get the following error:

import chart_studio.plotly as py
py.plot(fig, filename = 'swe_map_test', auto_open=True)
Plotly Chart-Studio Size Limitations (Created By Author)
Plotly Chart-Studio Size Limitations (Created By Author)

If you have a plot with very few data points you might be able to get away with the 500KB limit. To make plots fit for several of the articles I have written I would randomly cull some of the data. However, I have recently discovered another tool, Datapane, that has a much higher size limit on its free tier.

Datapane

Datapane is a service for creating reports consisting of DataFrames, plots, and files. You can create them all within Python and publish them to Datapane. They also offer a free tier that has a much higher upload size limit than Chart-Studio. Sweet!

Creating reports with Datapane can be incredibly useful, but in this post, we will focus on using Datapane to embed interactive plots made with Plotly and Altair. Creating a report only takes several lines of code.

First, install Datapane using pip:

pip3 install datapane

Now you can create a Datapane account and log in via the Terminal/Command Prompt:

datapane login --token=[your_token]

Now that we are all set up, we can go ahead and publish our figure!

import datapane as dp 
report = dp.Report(dp.Plot(fig))
report.publish(name="SWE Study Area", open=True)

Once you run this code, a new window will open with your plot uploaded to Datapane. We can embed the plot directly into this post by pasting the URL from the "Share" button:

You may need to go into the settings and change the plot "Visibility" to "Public". For some reason on the newest version of Datapane, setting the visibility in Python throws an error for me.

Now we have an interactive web map built with Plotly that we can embed basically anywhere. The best part is that this plot is considerably larger than I was able to upload via Chart-Studio, which means that I can start to upload more web maps without paying for an expensive subscription.

Hosting On GitHub Pages

The first alternative to Chart-Studio that I tried was creating a GitHub Pages repo with my plot and embedding it via an iFrame. I read about this method in several places, and I really like it since GitHub Pages has very few limits. However, many websites, like the one we are currently on, don’t support manually inserting iFrames. This means hosting plots on GitHub Pages won’t work for my use cases since I can’t insert them into my articles. I will show you how to do this, though, since it’s a great solution to embedding on your own website.

Create HTML File

First we need to use Plotly to export the HTML file of our plot.

import plotly.io as pio
pio.write_html(fig, file='index.html', auto_open=True)

This will open the plot in your browser using the generated HTML file.

Setup GitHub Pages

There are three steps to hosting your plot with GitHub Pages:

  1. Create a new repository with a README
  2. Upload your new HTML file
  3. Go to the "settings" tab, navigate down to "Pages", under "Source" select your Main/Master branch
Created By Author
Created By Author

Now you can go to https://wino6687.github.io/swe_viz_1/ to see the plot, however I can’t embed it here on this post.

Wrapping Up

Hopefully, this has helped you find a free alternative to Chart-Studio that doesn’t have such a restrictive 500KB upload limit. Datapane makes embedding plots exceedingly simple, and they interface well with many websites.

Resources


Related Articles