Display interactive plotly chart (.html file) on GitHub Pages

Question

I\'ve created the following plotly plot like this:

import plotly
labels = [\'Oxygen\', \'Hydrogen\', \'Carbon_Dioxide\', \'Nitrogen\']
values = [4500, 2500, 1053         


        

Answer 1

If you use Jekyll in your GitHub pages site.

Prepare your data:

import plotly.graph_objects as go

labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
values = [4500, 2500, 1053, 500]
fig = go.Figure(data=[go.Pie(labels=labels, values=values)])
fig.show()

Generate HTML file:

import plotly.io as pio

pio.write_html(fig, file='figure.html', auto_open=True)

Upload the figure.html file and commit it to _includes folder in the root of your site repository.

Now if you are using markdown to create your posts, you can use include tag and call figure.html in your post with something like this:

{% include figure.html %}

Commit this line to your post .md file in the _posts folder. Check results.