Menu
I want to build a site using github pages and I'm having issues as I'm currently trying to embed the following interactive plot in my markdown file (map obtained using plotly.express.choropleth). I've tried multiple options already, such as saving my figure into an html file and then trying to add the html file to my markdown file with the following options :
- {% include_relative figure.html %}
- {% include figure.html %}
- <embed type="text/html" src="figure.html" width="600" height="400"></embed>
- <iframe>
- <object>
- <div>
None of these lines ended up with my figure showing up on the markdown file. I might be using them wrong as I'm not the most familiar with this, but I hope someone can find what I've been doing wrong or how to tackle this issue.
If it is of any use, here is the code for the figure I'm trying to display and how I save it :
fig = px.choropleth(feat_df, geojson=counties, locations='id', color='hurr_tot',
color_continuous_scale="viridis",
range_color=(0, 40), center = {"lat": 38, "lon": -100},
scope="usa",
hover_name="county", hover_data=['code','hurr_tot'],
labels={'hurr_tot':'Hurricanes'}
)
fig.update_traces(hovertemplate="County : %{hovertext} <br>State : %{customdata[0]}, <br>Hurricanes : %{customdata[1]}")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0}, width=650, height=400, newshape_line_color='#000000')
fig.show()
pio.write_html(fig, file='figure.html')
Here is my html file :
<html>
<head><meta charset="utf-8" /></head>
<body>
<div> <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
<script type="text/javascript">/**
!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:" ...
</body>
</html>
483
asked Apr 26 '26 19:04
I'm sorry to tell you that inserting interactive plots is not possible in 'raw' README.md GitHub. Luckily, there is another GitHub alternative for this: GitHub Pages. Here I attach a quite good tutorial about how to easily prepare your repository to obtain a webpage to load your interactive plots and to navigate through all the interactive plots that you save in your repository.
Hope it helps you! Happy plotting!
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
