data visualization, dashboard, plotly기초

목차

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 파일명