Python plotly.js bubble chart included in Jekyll content

Rstat is great in creating data visualizations even in interactive ones. However, publishing the results in Jekyll can be a challenge# and sometimes easier to work directly with python and javascripts. Look at this simple example.

Python part

import plotly.express as px
df = px.data.gapminder()

fig2 = px.scatter(df.query("year==2007"), x="gdpPercap", y="lifeExp",
	         size="pop", color="continent",
                  hover_name="country", log_x=True, size_max=60,
                  labels={"gdpPercap": "GDP per capita (on log scale)",
                          "pop": "Population size",
                          "lifeExp": "Life expectancy"},
                  title="A gapminder classic: bubble chart")

# fig2.show()
fig2.write_html("bubble-chart.html", include_plotlyjs="cdn")

include_plotlyjs="cdn" ensures that plotly.js will be served externally as:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Jekyll include

{% include plots/bubble-chart.html %}

The above snippet look for bubble-chart.html in _includes/plots folder and Jekyll generates the plot:

Notes

# Cf. “Using htmlwidgets with knitr and Jekyll” by Brendan Rocks.