Archives

PHP

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]: