PHP: nbconvert – A wordpress plugin for Jupyter notebooks

Intro

I decided to have a little fiddle around with WordPress by making some custom PHP and CSS for the first time. The outcome is a neat little shortcode plugin for WordPress that uses Jupyter Nbviewer to create your ipynb and add it to your blog. My next step is to get this onto the WordPress Plugins so that its properly documented, versioned and available for use by the WordPress community.

Shortcode’s +/-’s

+ Very easy to use
+ Your code can be version controlled and updated without having to log into your blog and edit the raw HTML
+ Other people can work on the code, for example contributors to your GitHub page
+ Very easy to create a easy to navigate Documentation page by using WordPress and nbconvert
+ No iframes! Which many people have suggested…

– Other people can change the notebooks (It’s a blessing and a curse!)
– Dependant on nbviewer’s servers (However if you wish the code is open source so you can host your own server!)
– Could potentially be slower to render as each time a user requests your page it will have to send requests to nbviewer.
– CSS that is included in the Notebook can overwrite the blog pages CSS (try using this URL https://github.com/plotly/python-user-guide/blob/master/s3_bubble-charts/s3_bubble-charts.ipynb)

How to use the shortcode

Step 1: Add my custom CSS (view by clicking on the button below) into Appearance -> Customize -> Additonal CSS

Step 2: In the the WordPress post editor simply enter the shortcode with the url to where the ipynb file is hosted. For example see Example 1 where we render a notebook that is stored on Folium’s GitHub page.

Example 1

[nbconvert url="https://github.com/python-visualization/folium/blob/master/examples/CheckZorder.ipynb"]

In [1]:
import os
import folium

print(folium.__version__)
0.5.0+27.g2d457b0.dirty
In [2]:
import pandas as pd


state_geo = os.path.join('data', 'us-states.json')
state_unemployment = os.path.join('data', 'US_Unemployment_Oct2012.csv')

state_data = pd.read_csv(state_unemployment)

m = folium.Map(
    location=[48, -102],
    zoom_start=3,
    tiles='Stamen Toner'
)

m.choropleth(
    state_geo,
    data=state_data,
    columns=['State', 'Unemployment'],
    key_on='feature.id',
    fill_color='YlGn',
    fill_opacity=0.7,
    line_opacity=0.2,
    legend_name='Unemployment Rate (%)'
)


popup = 'Must be on top of the choropleth'

folium.CircleMarker(
    location=[48, -102],
    radius=10,
    fill=True,
    popup=popup,
    weight=1,
).add_to(m)

m.save(os.path.join('results', 'CheckZorder.html'))

m
Out[2]:

Example 2

Heres another example, the shortcode in this case being:
[nbconvert url="https://github.com/python-visualization/folium/blob/master/examples/plugin-Draw.ipynb"]

In [1]:
import os
import folium


print(folium.__version__)
0.5.0+35.ge26b05f
In [2]:
from folium.plugins import Draw

m = folium.Map()

draw = Draw()

draw.add_to(m)

m.save(os.path.join('results', 'Draw0.html'))

m
Out[2]:
In [3]:
m = folium.Map(location=[-27.23, -48.36], zoom_start=12)

draw = Draw(export=True)

draw.add_to(m)

m.save(os.path.join('results', 'Draw1.html'))

m
Out[3]:

9 Comments

  1. Kevin McNeill February 10, 2018 at 4:13 pm

    First let me say, this is a great post. I followed the directions, but currently, WordPress simply displays the:
    [nbconvert url=”https://github.com/python-visualization/folium/blob/master/examples/CheckZorder.ipynb”]
    text.

    1. Andrew Challis February 13, 2018 at 8:03 am

      Hi Kevin,

      I haven’t added this into the plugin store yet! I’ll get around to it soon, there’s just a few hoops you have to go through to get a plugin on the store…

      Once it is on the store you can install it then the short code will work 🙂

  2. Nils March 6, 2018 at 2:08 pm

    Hi Andy,

    this looks really nice! We’d love to use it here: https://openrouteservice.org. Finally an easy way to integrate interactive notebooks.

    How’s the jumping going?;) Still planning on rolling this out?

    1. Nils March 6, 2018 at 2:10 pm

      Btw, I’m not that terrible at formatting posts, there’s a link hidden.

      1. Andrew Challis March 6, 2018 at 2:16 pm

        Hi Nils,

        I need to update my CSS it seems! 🙂 [it may be updated by the time you see this]

        I’ve not actually made a blog on how to get up and running with it yet, but it’s all on github (see below)
        https://github.com/ghandic/nbconvert

        1. Nils March 6, 2018 at 2:31 pm

          Right, I stalked you a bit after I posted, so I found it:) I’ll give it a shot sometime and let you know! You’re on Twitter? Very useful for marketing your side projects!

          Very nice homepage, mate!

          1. Andrew Challis March 6, 2018 at 3:23 pm

            Thanks! Feel free to send a PR if you have any changes you think would be neat.

    1. Andy Challis March 28, 2018 at 2:23 pm

      Awesome! Glad to see its come in useful 🙂

Leave a comment

Your email address will not be published. Required fields are marked *