plotly dash
-
Flask route 추가하기plotly dash 2022. 5. 31. 19:34
from dash import Dash, html app = Dash( __name__, routes_pathname_prefix='/dash/' ) server = app.server @server.route('/') def index(): return 'Hello Flask app' app.layout = html.Div("My Dash app") if __name__ == '__main__': app.run_server(debug=True) 참고: https://stackoverflow.com/a/64491989
-
Dash routerplotly dash 2022. 5. 30. 21:57
문제 dash-2.5.0 이상 버전 부터 Dash Pages 기능을 제공하고 있다. - 참고 https://stackoverflow.com/a/62337544 에 언급된 것 처럼, 두개의 dcc.Location 를 이용해야 한다. dash-2.5.0 이상 버전의 Dash Pages 를 사용하면, 한개의 dcc.Location 으로 구현할 수 있다. fired when the url (dcc.Location) is changed and updates the selected tab: Dash Page 이용 fired when the selected tab changes (dcc.Tabs) and updates the displayed url: dcc.Location 이용 https://dash.plotly...
-
Grid Layoutplotly dash 2022. 5. 30. 11:09
문제 아래 처럼 2단으로 구성해 보자 코드 import dash_bootstrap_components as dbc from dash import Dash, html, dcc app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) app.layout = html.Div([ html.H1('Country City Dashboard'), dbc.Row([ dbc.Col( html.P(['Naver: ', html.A('Naver', href='https://www.naver.com', target='_blank')]), width=4 ), dbc.Col( [ html.Label('Korea City: '), dcc.Dropdown( options=['Seoul', ..
-
CSS 적용하기plotly dash 2022. 5. 30. 09:54
문제 Inline CSS 를 이용해 아래와 같이 꾸며보자. 코드 from dash import Dash, html, dcc import dash_bootstrap_components as dbc app = Dash() # app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) # app = Dash(__name__, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css']) app.layout = html.Div([ html.H1('Country City Dashboard', style={'textAlign': 'center', 'fontFamily': 'fantasy', 'fo..
-
Callbacks with Stateplotly dash 2022. 5. 29. 22:49
문제 Chained Callback 예제에서, radio 혹은 dropdown 선택을 변경하면 즉시 Output 결과에 반영되어 You selected country= ... 를 보게 된다. 여기서는 submit 버튼을 추가해, 버튼을 클릭했을 때 Output 결과에 반영되도록 수정해 보자 코드 from dash import Dash, html, dcc, Input, Output, State app = Dash() country_city = { 'Korea': ['Seoul', 'Pusan', 'Kwangju'], 'USA': ['New York', 'Los Angeles', 'Chicago'] } country_list = list(country_city.keys()) app.layout = html...
-
Chained Callbackplotly dash 2022. 5. 29. 22:23
문제 아래와 같이 데이터가 있을 때, 선택한 country 와 city 가 출력되도록 웹페이지를 개발해 보자 country_city = { 'Korea': ['Seoul', 'Pusan', 'Kwangju'], 'USA': ['New York', 'Los Angeles', 'Chicago'] } USA 가 선택되었다면, dropdown 에 ['New York', 'Los Angeles', 'Chicago'] 만 노출되어야 한다. 코드 from dash import Dash, html, dcc, Input, Output app = Dash() country_city = { 'Korea': ['Seoul', 'Pusan', 'Kwangju'], 'USA': ['New York', 'Los Angeles', ..
-
2개 이상 Variable 의 callback 연결plotly dash 2022. 5. 29. 20:31
문제 A, B 숫자를 읽어 operand 에 따라 계산하도록 웹페이지를 개발 코드 from dash import Dash, html, dcc, Input, Output app = Dash() a_number = dcc.Input(id='input-a', value=0, type='number') b_number = dcc.Input(id='input-b', value=0, type='number') operator_radio = dcc.RadioItems(id='operator-radio', options={'plus': '+', 'minus': '-'}, value='plus') result_text = html.Div(id='output-text', children='Result: 0') app.la..
-
Input callback 연결plotly dash 2022. 5. 28. 19:14
문제 input box 에 문자를 입력하면 자동으로 아래에 해당 입력이 출력되도록 callback 연결하도록 웹페이지 개발 방법1: ID 활용 from dash import Dash, html, dcc, Input, Output app = Dash() app.layout = html.Div([ dcc.Input(id='input-text', value='Change this text', type='text'), html.Div(children='', id='output-text') ]) @app.callback( Output(component_id='output-text', component_property='children'), Input(component_id='input-text', componen..