Import File Jupyter Notebook Pada WordPress

Home » Blog » Import File Jupyter Notebook Pada WordPress

Import File Jupyter Notebook Pada WordPress

Pada artikel kali ini kita akan mencoba mengimport file jupyter notebook (.ipynb) untuk dapat ditampilkan pada WordPress. Yang ingin kita lakukan adalah mencoba menampilkan file jupyter notebook tersebut agar dapat langsung dirender pada WordPress.

Adapun langkah-langkahnya adalah sebagai berikut:

1. Install plugin WP Pusher dan lalu aktifkan pada WordPress. Plugin ini dapat membantu kita untuk menginstall plugin yang bersumber dari Github.

2. Copy file custom CSS menuju wordpress.

3. Untuk menambahkan file CSS tersebut, buka wordpress lalu menuju Appearance -> Customize -> Additional CSS.

4. Install plugin nbconvert pada WP Pusher lalu aktifkan.

5. Gunakan shortcode berikut untuk memanggil nbconvert.

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

6. Contoh .ipynb yang sukses dirender pada wordpress ini adalah sebagai berikut. File .ipynb berikut mencoba menampilkan webmap unemployment rate di Amerika Serikat.

In [1]:
import folium
import pandas as pd


url = (
    "https://raw.githubusercontent.com/python-visualization/folium/main/examples/data"
)
state_geo = f"{url}/us-states.json"
state_unemployment = f"{url}/US_Unemployment_Oct2012.csv"

state_data = pd.read_csv(state_unemployment)

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

folium.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 (%)",
).add_to(m)


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
Out[1]:
Make this Notebook Trusted to load map: File -> Trust Notebook

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.