Implement Ploty into your Blog Posts

Code Snippet Repository

In this short post, we are looking at how to implement plotly graphs into your own blog posts. For this, I am assuming that you use a site-generating framework that is based on either markdown or html files. For DS-Econ I am using Hexo.

As a first step, we need to create our plotly graph. Here, we use a very simple example based on the gapminder data and visualize the life-expectancy and GDP per capita of different countries in a scatterplot.

We specify the color and size of our points to resemble the continent and the population of a country, respectively. This is a very frequent example for a more “complex” graph and you might have seen it before, for example here or here.

To use this graph in our HTML page later on, we need to save it as a html-file by using the plotly method fig.write_html.

import plotly.graph_objects as go
import plotly.io as pio
import plotly.express as px
import src.ds_econ_ploty

pio.templates.default = "ds_econ"  # ds-econ template

df = px.data.gapminder()  # load the data
df_2007 = df.query("year==2007")  # subset to the year of 2008

# specify the labels of the plot
labels = {'gdpPercap':'GDP per Capita', 
          'lifeExp':'Life Expectancy', 
          'pop':'Population',
          'continent':'Continent'}

# create the scatterplot with log-xaxis
fig = px.scatter(df_2007,
                 x="gdpPercap", y="lifeExp", size="pop", color="continent",
                 log_x=True, size_max=60,
                 title="Gapminder",
                 labels=labels)

# safe the figure as html file
fig.write_html('../source/first_figure.html', auto_open=False)

Great! Now that we have implemented the plot and saved it to a html, we can actually load it again as an html object and implement it into our notebook. For this, we use HTML inside display both from the IPython.display module.

from IPython.display import HTML, display
display(HTML(filename='../source/first_figure.html'))

Finally, we can make use of the nbconvert module to convert our notebook to e.g. a markdown file. I implemented this as the CLI command in the cell below.

For my purposes, I also added additional options that exclude cells that allow me to exclude cells in the final output, based on a cell tag. Read more about cell tags here and the nbconvert module and its capabilities here.

Note for Hexo users: The hexo-renderer-pandoc package seems to cause trouble when it comes to rendering those plotly graphs. Uninstalling it with npm uninstall hexo-renderer-pandoc, fixed the problem for me.

Code Snippet Repository

This post is part of the Code Snippet Repository, a collection of short posts designed to make your everyday coding easier. These are based on public content from forums like stackoverflow and package documentations. You can find the code also in this repo on github!

Photo by Brooke Cagle on Unsplash