How to Embed Interactive Plotly Visualizations on Medium Blogs

I think graphs and other types of visualization products are amazingly effective in conveying your story with limited to no words. Making them interactive just adds value to your product.

In this post we will learn about how to embed Plotly interactive graphs on your Medium articles. For the first example, we will use a graph from Plotly’s Python Open Source Graphing Library. See link for reference.

Here are the steps that we need to do:

A. Create an account in https://chart-studio.plotly.com/feed/#/

B. Get your username and API key. To do this, click on the dropdown next to your profile name on the upper left hand corner. Go to Settings. Then on the left side of the page, click on API keys. Generate an API key. Copy your username and your API key. We will use this later.

Accessing Plotly Credentials

C. This is the time to open your IDE or wherever you housed your code. For this exercise, I am going to use Google Colab, and as for the codes, I will borrow from Plotly’s gallery as mentioned above. Since we are using Google Colab, we need to install chart-studio with this:

!pip install chart-studio

Once it’s install you can start importing libraries, define credential variables and set credential on Plotly server.

import chart_studio
username='your_username'
api_key='your_api_key'
chart_studio.tools.set_credentials_file(username=username,
                                        api_key=api_key)

Now, in the fist example below, we will use Plotly Express:

import chart_studio.plotly as py
import chart_studio.tools as tls
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length",  
                     color="species", size='petal_length',
                     size='petal_length', hover_data=['petal_width']
                  )
fig.show()

Once the code above is activated, a scatter plot will render on your Google Colab. We want to host this graph live on Plotly by using this:

py.plot(fig, filename="plotly_scatter", auto_open = True)

D. Visit your Plotly account, go to My Files under your profile dropdown, and then you should find the same graph in your list. Hover over it and click Viewer.

Click Viewer to get the link address

Now copy the url and paste it in your Medium blog. For instance, this is the url generated by our example above, and accordingly, the graph is shown below.

https://chart-studio.plotly.com/~jennifer.banks8585/3

Scatter plot of the Iris data set from Plotly

The next example below is a forecasting visualization for rent prices in Boston, MA. In this example, I used Plotly Graph_Objects instead of Plotly Express. The complete code can be found here.

Now, it is your turn to try this fun skill!