Certificate/data science-IBM

data visualization, dashboard, plotly기초

Olivia-BlackCherry 2023. 5. 23. 11:12

목차

    dash

    layout 

    -get ready 

    python3 -m pip install packaging
    python3 -m pip install pandas dash
    pip3 install httpx==0.20 dash plotly

    1. Dash Components

    1) html components를 가져오는 구문

    import dash_html_componets as html

    - component for every html tag

    - style, className, id

    import dash
    import dash_tml_components as html
    
    #app 인스턴스 생성하기
    app=dash.Dash()
    
    #layout을 만들기
    app.layout = html.Div([
    	html.H1('제목을 넣어요', style={'color':'blue', 'fontSize':40, 'border-style': 'outset'}),
    	html.P('제목을 넣어요', style={fontSize':30}),
    	html.Div(['제목을 넣어요'], style={'color':'red', 'fontSize':50, 'border-style':'double'})],
    	style={'border-style':'ridge', 'border-color':'blue'})
    
    if __name__=='__main__':
    	app.run_server(port=8002, host='127.0.0.1', debug=True)

     

    2) core components를 가져오는 구문

    import dash_core_components as dcc

    - higher-level components that are interactive and are generated with JavaScript, HTML, CSS through the React.js library.

    import dash
    import dash_tml_components as html
    
    #core컴포넌트 추가하기
    import dash_core_components as dcc
    
    app=dash.Dash()
    
    app.layout = html.Div([
    	html.H1('제목을 넣어요', style={'color':'blue', 'fontSize':40, 'border-style': 'outset'}),
    	html.P('제목을 넣어요', style={fontSize':30}),
    	html.Div(['제목을 넣어요'], style={'color':'red', 'fontSize':50, 'border-style':'double'})],
    	style={'border-style':'ridge', 'border-color':'blue'},
        
    	#텍스트라벨 넣기
    	html.Label('Dropdown'),
        #드롭다운 넣기
        dcc.Dropdown(
        options=[
        {'label': 'Option1', 'value':'1'},
        {'label': 'Option2', 'value':'2'},
        {'label': 'Option3', 'value':'3'}
        ], 
        value='3'),
        #슬라이더 넣기
        dcc.Slider(
        min=0, max=5, marks={i:'{}'.format(i) for i in range(5)}, value=2,
        )])
    
    if __name__=='__main__':
    	app.run_server(port=8002, host='127.0.0.1', debug=True)

    -save

    -execution

    python3 dash.py

     

     

     

    2. callbacks

    python3 -m pip install packaging
    python3 -m pip install pandas dash
    pip3 install httpx==0.20 dash plotly

    -automatically called by Dash whenever an input componet's property changes.

    @app.callback
    import pandas as pd
    import plotly.express as px
    import dash
    import dash_html_componets as html
    import dash_core_components as dss
    from dash.dependencies import Input, Output
    
    real_data = pd.read_csv('파일이름', encoding="ISO-8859-1",
    						dtype={'특정칼럼':str,
                            '특정칼럼2':str,
                            '특정칼럼3':str,
                            '특정칼럼4': str
                            })
                         
    app = dash.Dash(__name__)
    
    app.layout= thml.Div(children=[html.H1('Airline Dashboard', style={}),
    							html.Div(["Input:", dcc.Input(id='input-yr', value='2010', type='number', style={})],
                                style={}),
                                html.Br9),
                                html.Div(dcc.Graph(id='bar-plot')),])
                                
    # add callback decorator
    @app.callback( Output(component_id='line-plot', component_property='figure'),
                   Input(component_id='input-year', component_property='value'))
    
    # Add computation to callback function and return graph
    def get_graph(entered_year):
        # Select 2019 data
        df =  airline_data[airline_data['Year']==int(entered_year)]
        
        # Group the data by Month and compute average over arrival delay time.
        line_data = df.groupby('Month')['ArrDelay'].mean().reset_index()
    
        fig = go.Figure(data=go.Scatter(x=line_data['Month'], y=line_data['ArrDelay'], mode='lines', marker=dict(color='green')))
        fig.update_layout(title='Month vs Average Flight Delay Time', xaxis_title='Month', yaxis_title='ArrDelay')
        return fig
    
    # Run the app
    if __name__ == '__main__':
        app.run_server()

     

    실행

    pip3 install pandas dash
    python3 dash_interactivity.py
    python3 파일명