Skip to content

Commit 697b786

Browse files
mazarimonomazarimono
committed
add 03
1 parent 803e69c commit 697b786

File tree

6 files changed

+240
-0
lines changed

6 files changed

+240
-0
lines changed

‎hands_on_03/app1.py

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import dash
2+
import dash_html_components as html
3+
import dash_core_components as dcc
4+
5+
from dash.dependencies import Input, Output
6+
7+
app = dash.Dash(__name__)
8+
9+
# テキストエリアへの入力をH1コンポーネントに出力するアプリ
10+
11+
app.layout = html.Div([dcc.Textarea(id="textarea"), html.H1(id="text_output")])
12+
13+
14+
@app.callback(Output("text_output", "children"), [Input("textarea", "value")])
15+
def update_text(textarea_value):
16+
return textarea_value
17+
18+
19+
if __name__ == "__main__":
20+
app.run_server(debug=True)

‎hands_on_03/app2.py

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import dash
2+
import dash_html_components as html
3+
import dash_core_components as dcc
4+
5+
from dash.dependencies import Input, Output, State
6+
7+
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
8+
9+
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
10+
11+
# テキストエリアへの入力をH1コンポーネントに出力するアプリ
12+
13+
app.layout = html.Div(
14+
[
15+
dcc.Textarea(id="textarea", style={"height": 300, "width": 800}),
16+
html.Button(id="my_button", n_clicks=0, children="おす"),
17+
html.H1(id="text_output"),
18+
]
19+
)
20+
21+
22+
@app.callback(
23+
Output("text_output", "children"),
24+
[Input("my_button", "n_clicks")],
25+
[State("textarea", "value")],
26+
)
27+
def update_text(n_clicks, textarea_value):
28+
return textarea_value
29+
30+
31+
if __name__ == "__main__":
32+
app.run_server(debug=True)

‎hands_on_03/app3.py

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import dash
2+
import dash_core_components as dcc
3+
import dash_html_components as html
4+
import plotly.express as px
5+
from dash.dependencies import Input, Output, State
6+
7+
gapminder = px.data.gapminder()
8+
gap_jp = gapminder[gapminder["country"] == "Japan"]
9+
10+
app = dash.Dash(__name__)
11+
12+
app.layout = html.Div(
13+
[
14+
dcc.Dropdown(
15+
id="drop",
16+
options=[{"label": i, "value": i} for i in gapminder.columns[3:6]],
17+
value="lifeExp",
18+
),
19+
dcc.Graph(id="my_graph"),
20+
]
21+
)
22+
23+
24+
@app.callback(Output("my_graph", "figure"), [Input("drop", "value")])
25+
def update_graph(selected_value):
26+
return px.line(gap_jp, x="year", y=selected_value, title=f"日本の{selected_value}")
27+
28+
29+
if __name__ == "__main__":
30+
app.run_server(debug=True)

‎hands_on_03/app4.py

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import dash
2+
import dash_core_components as dcc
3+
import dash_html_components as html
4+
import plotly.express as px
5+
from dash.dependencies import Input, Output, State
6+
7+
gapminder = px.data.gapminder()
8+
9+
app = dash.Dash(__name__)
10+
11+
app.layout = html.Div(
12+
[
13+
html.Div(
14+
[
15+
dcc.Dropdown(
16+
id="select_country",
17+
options=[
18+
{"value": i, "label": i} for i in gapminder.country.unique()
19+
],
20+
value="Japan",
21+
)
22+
],
23+
style={"width": "50%", "display": "inline-block"},
24+
),
25+
html.Div(
26+
[
27+
dcc.Dropdown(
28+
id="drop",
29+
options=[{"label": i, "value": i} for i in gapminder.columns[3:6]],
30+
value="lifeExp",
31+
)
32+
],
33+
style={"width": "50%", "display": "inline-block"},
34+
),
35+
dcc.Graph(id="my_graph"),
36+
]
37+
)
38+
39+
40+
@app.callback(
41+
Output("my_graph", "figure"),
42+
[Input("select_country", "value"), Input("drop", "value")],
43+
)
44+
def update_graph(selected_country, selected_value):
45+
dff = gapminder[gapminder.country == selected_country]
46+
return px.line(
47+
dff, x="year", y=selected_value, title=f"{selected_country}の{selected_value}"
48+
)
49+
50+
51+
if __name__ == "__main__":
52+
app.run_server(debug=True)

‎hands_on_03/app5.py

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import dash
2+
import dash_core_components as dcc
3+
import dash_html_components as html
4+
import plotly.express as px
5+
from dash.dependencies import Input, Output, State
6+
import json
7+
8+
gapminder = px.data.gapminder()
9+
10+
app = dash.Dash(__name__)
11+
12+
app.layout = html.Div(
13+
[
14+
dcc.Graph(
15+
id="my_graph",
16+
figure=px.scatter(
17+
gapminder,
18+
x="gdpPercap",
19+
y="lifeExp",
20+
size="pop",
21+
animation_frame="year",
22+
log_x=True,
23+
range_y=[20, 90],
24+
color="continent",
25+
size_max=70,
26+
hover_data=["country"],
27+
template={"layout": {"dragmode": "select"}},
28+
),
29+
),
30+
html.H1(id="show_text"),
31+
]
32+
)
33+
34+
# hoverData, clickData, selectedData属性
35+
# selectedData属性は
36+
# "layout": {"clickmode":"event"+select} を指定する必要 / pxの場合 templateに渡す
37+
# "dragmode" : "select" を指定すると、ドラッグで範囲が選択できる
38+
39+
40+
@app.callback(Output("show_text", "children"), [Input("my_graph", "selectedData")])
41+
def update_content(hoverData):
42+
return json.dumps(hoverData)
43+
44+
45+
if __name__ == "__main__":
46+
app.run_server(debug=True)

‎hands_on_03/app6.py

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import dash
2+
import dash_core_components as dcc
3+
import dash_html_components as html
4+
import plotly.express as px
5+
from dash.dependencies import Input, Output, State
6+
import json
7+
8+
gapminder = px.data.gapminder()
9+
10+
app = dash.Dash(__name__)
11+
12+
app.layout = html.Div(
13+
[
14+
dcc.Graph(
15+
id="my_graph",
16+
figure=px.scatter(
17+
gapminder,
18+
x="gdpPercap",
19+
y="lifeExp",
20+
size="pop",
21+
animation_frame="year",
22+
log_x=True,
23+
range_y=[20, 90],
24+
color="continent",
25+
size_max=70,
26+
hover_data=["country"],
27+
),
28+
),
29+
dcc.Graph(id="show_figure1", style={"width": "33%", "display": "inline-block"}),
30+
dcc.Graph(id="show_figure2", style={"width": "33%", "display": "inline-block"}),
31+
dcc.Graph(id="show_figure3", style={"width": "33%", "display": "inline-block"}),
32+
]
33+
)
34+
35+
# hoverData, clickData, selectedData属性
36+
# selectedData属性は
37+
# "layout": {"clickmode":"event"+select} を指定する必要 / pxの場合 templateに渡す
38+
# "dragmode" : "select" を指定すると、ドラッグで範囲が選択できる
39+
40+
41+
@app.callback(
42+
[
43+
Output("show_figure1", "figure"),
44+
Output("show_figure2", "figure"),
45+
Output("show_figure3", "figure"),
46+
],
47+
[Input("my_graph", "hoverData")],
48+
)
49+
def update_content(hoverData):
50+
if hoverData is None:
51+
raise dash.exceptions.PreventUpdate
52+
country = hoverData["points"][0]["customdata"][0]
53+
sele_data = gapminder[gapminder.country == country]
54+
return (px.line(sele_data, x="year", y="pop", title=f"{country}の人口データ"),
55+
px.line(sele_data, x="year", y="gdpPercap", title=f"{country}の1人当たりGDPデータ"),
56+
px.line(sele_data, x="year", y="lifeExp", title=f"{country}の平均余命データ"))
57+
58+
59+
if __name__ == "__main__":
60+
app.run_server(debug=True)

0 commit comments

Comments
 (0)