Jupyter 위젯

개요

Jupyter Widgets를 사용하면 Leaflet, Plotly, threejs 같은 JavaScript 시각화 라이브러리를 Python에서 직접 사용할 수 있습니다.

Quarto에서 Jupyter 엔진을 사용한다면 JavaScript를 배우지 않고도 인터랙티비티를 추가할 수 있는 좋은 방법입니다.

Quarto는 렌더링 중에 Jupyter 커널을 사용하지만, 사이트가 배포된 뒤에는 Jupyter 커널이 없으므로 JavaScript 기반 인터랙티비티만 가능하고 Python은 동작하지 않습니다.

Leaflet 예시

Quarto 문서에 Jupyter 위젯을 포함하는 것은 플롯을 포함하는 것만큼 쉽습니다. 예를 들어 Leaflet 지도를 임베드하는 방법은 다음과 같습니다.

from ipyleaflet import Map, Marker, basemaps, basemap_to_tiles
m = Map(
  basemap=basemap_to_tiles(
    basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-04-08"
  ),
  center=(52.204793, 360.121558),
  zoom=4
)
m.add_layer(Marker(location=(52.204793, 360.121558)))
m

사용 가능한 Jupyter 위젯을 알아보려면 https://jupyter.org/widgets를 참고하세요.

Plotly

Plotly는 Jupyter 엔진과 함께 사용할 수 있는 인터랙티브 그래픽 라이브러리입니다. Plotly 사용 예시는 다음과 같습니다.

import plotly.express as px
import plotly.io as pio
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", 
                 color="species", 
                 marginal_y="violin", marginal_x="box", 
                 trendline="ols", template="simple_white")
fig.show()

Note

VS Code Notebook Editor에서 Plotly를 사용하는 경우, VS Code 안에서도 보이고 Quarto가 HTML로 렌더링할 때도 보이도록 한 줄의 코드를 추가해야 합니다. Plotly 기본 렌더러를 다음과 같이 설정하세요.

```{python}
import plotly.io as pio
pio.renderers.default = "plotly_mimetype+notebook_connected"
```

이 우회 방법은 VS Code에서 실행할 때 Plotly가 HTML로 쉽게 내보낼 수 없는 기본 렌더링을 선택하기 때문에 필요합니다(자세한 배경은 GitHub Issue 및 관련 논의를 참고하세요). 이 우회 방법은 VS Code Notebook Editor에서만 필요하며(Jupyter Lab을 사용하거나 일반 텍스트 .qmd 파일을 편집하는 경우에는 필요하지 않습니다).