How to Embed Interactive Charts on your Medium Articles and Personal Website
By: Khuyen Tran
Tags: Data Visualization, Data Science, Plotly, Data Visualisation, Data Analysis

How to Embed Interactive Charts on your Medium Articles and Personal Website

Motivation

Have you ever wanted to share your interactive Python chart on social media platforms such as Medium, Reddit, or your own blog but ended up having to take photos or record videos or gifs of the charts? Alternatively, many people end up using a non-code solution, like Mapbox or Flourish, even though they’d rather build their visualizations in Python using libraries like Pandas, Altair, Bokeh, Folium, and Plotly.

I like to use charts to demonstrate my results on Medium’s articles but found it challenging to embed my interactive charts until I discovered Datapane. With Datapane, I can embed my charts in two lines of code.

What is Datapane?

Datapane is an API for people who analyze data in Python and need a way to share their results. Datapane makes it easy for data analysts or data scientists to generate reports from components such as plot, markdown, dataframe and publish on the web to send others. If you don’t know about Datapane, I wrote a short article introducing to Datapane

Besides its ease to create a report and deploy a script, Datapane also makes it easy to embed your charts or table.

Embed in Medium

Let’s say you created an interactive Plotly bubble chart with this code:

Using Datapane’s API, you can publish this Plotly chart to the web and embed it into Medium.

Firstly, install Datapane using pip:

pip3 install datapane

Then simply sign-up to Datapane to get your API token. Copy and use it to login through the Datapane CLI:

datapane login --token=[your_secret_token]

Once you have logged in, you can use the Datapane API to publish your plots.

Import Datapane into your script, and publish a new Report with a single Plot component in it.

In the example, we are also telling Datapane to set the visibility of our report to public, so anyone will the URL will be able to access it.

When you run this Python code, Datapane will upload your Plotly chart using the API and give you a URL which you can share!

https://datapane.com/khuyentran1401/reports/bubble_c7ac0e14/

Next, copy this link into your Medium post in Edit Mode, and — voila! — an embedded chart is automatically created for you inside your Medium post.

Because you’re in Edit Mode on Medium, you will first see your chart without its interactive mode, but as soon as you publish your article, you (and your readers) will be able to use it interactively.

For an example of a Medium post with some embeds, check out this post

Besides charts you could also embed a Dataframe like this

Embed in your Personal Website

With your personal website, you could apply the same technique or change the technique slightly based on the platform you use. With Wagtail, what I did is to simply click the embed button and paste the URL in the embed box.

Conclusion

Congratulation! You have learned how to embed your charts on Medium or personal website with Datapane. What can be better than to let your viewers or readers interact with the charts to observe your results themselves?

Feel free to fork and play with the code for this article in this Github repo.

I like to write about basic data science concepts and play with different algorithms and data science tools. You could connect with me on LinkedIn and Twitter.

Star this repo if you want to check out the codes for all of the articles I have written. Follow me on Medium to stay informed with my latest data science articles like these: