How to Display Plotly maps in Jekyll

Getting Plotly to work in markdown

If you use Plotly in your Code and try to convert to markdown for your blog like I did in this previous post, you may notice that the code does not transfer over well. In order to get your maps to display properly, follow these steps below:

1. Create your notebook as usual IN JUPYTER NOTEBOOK
2. Include the following, where fig=your plot and figure.html is what you will name the map html

   import plotly.io as pio
   pio.write_html(fig, file='figure.html', auto_open=True)
   

3. Convert the notebook to markdown using the the anaconda prompt

   jupyter nbconvert -–to markdown Example-Post.ipynb
   

4. Remove the actual plotly code from the markdown
5. Upload the figure.html file and commit it to _includes folder in the root of your site repository
6. In your markdown file for the most use an include tag where you want the map to appear.

   Paste this with percent marks instead of asterisks 
   {* include figure.html *}
   

I hope this helps!