Dashでドロップダウンメニューを設定します。
使用データは世界各国のGDP、寿命、人口データです。
csvデータ：gapminderDataFiveYear
ドロップダウンメニューは「年」を選択し、
各年度ごとのグラフが表示されるようにします。
|
1 2 3 4 5 6 7 8 |
year_options = [] for year in df['year'].unique(): year_options.append({'label':str(year),'value':year}) app.layout = html.Div([ dcc.Graph(id='graph'), dcc.Dropdown(id='year-picker',options=year_options,value=df['year'].min()) ]) |
データフレームに格納した後、yearカラムを.unique()で分別します。
これは重複する年度があるためです。
次にコールバックでドロップダウンメニューにて選択された値に応じた
データ表示の詳細を設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@app.callback(Output('graph', 'figure'), [Input('year-picker', 'value')]) def update_figure(selected_year): filtered_df = df[df['year'] == selected_year] traces = [] for continent_name in filtered_df['continent'].unique(): df_by_continent = filtered_df[filtered_df['continent'] == continent_name] traces.append(go.Scatter( x=df_by_continent['gdpPercap'], y=df_by_continent['lifeExp'], text=df_by_continent['country'], mode='markers', opacity=0.7, marker={'size': 15}, name=continent_name )) return { 'data': traces, 'layout': go.Layout( xaxis={'type': 'log', 'title': 'GDP Per Capita'}, yaxis={'title': 'Life Expectancy'}, hovermode='closest' ) } |
コールバックを使用してドロップダウンメニューを選べばすぐに
関数の内容が実行されます。
returnで帰ってきた値がグラフに反映されます。
実行結果：
コード全体：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import dash import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output import plotly.graph_objs as go import pandas as pd df = pd.read_csv('gapminderDataFiveYear.csv') app = dash.Dash() # # https://dash.plot.ly/dash-core-components/dropdown # # We need to construct a dictionary of dropdown values for the years year_options = [] for year in df['year'].unique(): year_options.append({'label':str(year),'value':year}) app.layout = html.Div([ dcc.Graph(id='graph'), dcc.Dropdown(id='year-picker',options=year_options,value=df['year'].min()) ]) @app.callback(Output('graph', 'figure'), [Input('year-picker', 'value')]) def update_figure(selected_year): filtered_df = df[df['year'] == selected_year] traces = [] for continent_name in filtered_df['continent'].unique(): df_by_continent = filtered_df[filtered_df['continent'] == continent_name] traces.append(go.Scatter( x=df_by_continent['gdpPercap'], y=df_by_continent['lifeExp'], text=df_by_continent['country'], mode='markers', opacity=0.7, marker={'size': 15}, name=continent_name )) return { 'data': traces, 'layout': go.Layout( xaxis={'type': 'log', 'title': 'GDP Per Capita'}, yaxis={'title': 'Life Expectancy'}, hovermode='closest' ) } if __name__ == '__main__': app.run_server() |
コメントを残す