Plotly-Dash Environmental Testing

In [1]:

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# Load Data
df = px.data.tips()
# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("JupyterDash Demo"),
    dcc.Graph(id='graph'),
    html.Label([
        "colorscale",
        dcc.Dropdown(
            id='colorscale-dropdown', clearable=False,
            value='plasma', options=[
                {'label': c, 'value': c}
                for c in px.colors.named_colorscales()
            ])
    ]),
])
# Define callback to update graph
@app.callback(
    Output('graph', 'figure'),
    [Input("colorscale-dropdown", "value")]
)
def update_figure(colorscale):
    return px.scatter(
        df, x="total_bill", y="tip", color="size",
        color_continuous_scale=colorscale,
        render_mode="webgl", title="Tips"
    )
# Run app and display result inline in the notebook
# app.run_server(mode='inline')
app.run_server(debug=False)

 

Dash app running on http://127.0.0.1:8050/

In [2]:

# jupyter dash app의 run_server 종료모드
app._terminate_server_for_port("localhost", 8050)

In [3]:

# 주의 : 처음에 시작할 떄 아예 포트 번호를 독립적으로 부여해야 할듯
# 그렇지 않고 모든 포트를 8050으로 사용하면
# 그 다음 코드 실행시 앞선 코드랑 충돌 or 에러 혹은 새로운 코드가 묻히기도 함
# 그리고 무엇보다, 다음 코드 실행을 위해 8050을 종료 시, tistory에서의 코드도 연결불가로 뜸

Dash와 Plotly를 사용해서 Interactive Dashboard를 제작하기 전, 

전초 단계에서 환경 테스트를 미리 해보았다. 

 

Dash와 Plotly의 단점은, localhost를 이용해야만 미리 볼 수 있다는 것이다.

특히, Plotly의 경우에는 export to html이 가능했지만 Dash의 경우에는 불가능하다.

 

Jupyter notebook에는 띄울 수 있는데,

이 부분이 tistory로 오면 반응형 그래프가 뜨지 않는 경우가 있어서 방법을 찾아봐야 할 것 같다.

Heroku로 배포를 해서 링크로 포함하는 게 최선일 것 같기도 하다.