# Basic plotly figure

import plotly.express as px
import plotly.io as pio
from IPython.display import HTML

pio.templates.default = "seaborn"

gapminder = px.data.gapminder()

fig = px.violin(
    gapminder,
    x="continent",
    y="lifeExp",
    color="continent",
    labels={"lifeExp": "life expectancy at birth"},
)

Now that we have the figure, if we were to simply run fig.show() we would be able to see the figure locally but the jekyll build will fail when trying to render the page. In order to get the figure to show locally and on the blog post we have to use a workaround.

First you will need to add a hide tag at the beginning of the code block.

# #hide
fig.show()

This will tell jekyll (i think?) to ignore the output and not show any of it, because it is now being ignored the errors are gone. But, we now dont have a plot on the blog post, to get it to render will need to follow the next step.

To get the figure to render on the blog you will need to convert the figure to html, and specify the js (specifing the js is crucial, it will not work otherwise). Then use IPython to render the HTML. You can add a hide_input tag to hide this block but show the plot

# #hide_input
HTML(fig.to_html(include_plotlyjs='cdn'))