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, 500]

trace = plotly.graph_objs.Pie(labels=labels, values=values)
plotly.offline.plot([trace], filename='basic-pie-chart')

Then I created the html as such:

print(plotly.offline.plot([trace], include_plotlyjs=False, output_type='div'))

Running the code above generates an .html file that I can view in my browser.

Is there a way to display the .html file in the middle of a markdown file on my GitHub Pages, so I can use the interactive features of plotly?

Here is a similar question that I asked

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.

Answer 2

I just published a browser extension xdoc, that adds plotly support to all GitHub pages (including READMEs etc.).

It works via JSON and is specified in markdown as

```plotly
{
  "data": [ ... ],
  "layout": { ... }
}
```

If you don't have the extension installed, you'll just see the markdown code block of course.