[Markdown] Jupyter notebook tab like r markdown(widgets)

주피터 노트북에서 tab 만들기

 

R 마크다운에서는 tabset으로 내용을 나누어 깔끔하게 만드는 것이 가능했다. 

주피터 노트북에서도 widget으로 해당 기능을 구현할 수 있는데, 그 방법을 알아보고자 한다.

 

최종 Output은 다음과 같다.

First, Second 두 개의 Tab을 만들고, 각각에 histogram 이미지를 넣어주었다.

 

 

---

먼저 필요한 Library를 import 한다.

ipywidgets의 widgets 가 핵심이다.

 

import matplotlib.pyplot as plt
import pandas as pd
import ipywidgets as widgets
import numpy as np

 

다음으로, 그래프를 그려 줄 예시 데이터를 만든다.

 

data1 = pd.DataFrame(np.random.normal(size = 50))
data2 = pd.DataFrame(np.random.normal(size = 100))

 

두 개의 widgets가 속한 Tab을 만들고 각각의 이름을 지정해준다. 

 

out1 = widgets.Output()
out2 = widgets.Output()

tab = widgets.Tab(children = [out1, out2])
tab.set_title(0, 'First')
tab.set_title(1, 'Second')
display(tab)

 

아직 각 Tab 안에 아무것도 넣어주지 않고 display() 했기 때문에 아래와 같이 Tab만 뜬다.

각 Tab의 이름도 First, Second로 잘 지정되었으며, 클릭 가능하다.

 

 

이제 with로 각 Tab안에 들어갈 이미지를 그려준다.

 

with out1:
    fig1, axes1 = plt.subplots()
    data1.hist(ax = axes1)
    plt.show(fig1)

with out2:
    fig2, axes2 = plt.subplots()
    data2.hist(ax = axes2)
    plt.show(fig2)

 

각각의 Tab을 클릭하면 data1과 data2의 histogram이 뜨는 것을 확인할 수 있다.

 

 

---

Jupyter widgets to html

 

단, 이 파일을 그대로 File -> Download as -> HTML 로 떨구면 위젯은 나타나지 않는데,

이는 embed_minimal_html() 로 따로 처리해주어야한다.

 

파일을 저장할 경로를 넣어주고, views에 보고싶은 위젯을 넣어주면 된다.

 

from ipywidgets.embed import embed_minimal_html

embed_minimal_html('export.html', views=[tab], title='Widgets export')

 

위 코드를 실행하면 export.html 파일이 생성되는데, 열어보면 아래와 같이 동작하는 위젯이 들어있다.

 

 

위젯을 html 파일로 떨구는 더 다양한 방법은 https://ipywidgets.readthedocs.io/en/latest/embedding.html 에 나와있다.