前提・実現したいこと
python dashを使ってダッシュボードアプリを作っています
dashの練習のためにコードを書いているのですが、hoverがうまく作動していないような気がするのですが、初心者なので、どこが問題なのかイマイチ理解できていません。
hoverを正しく使えるようにして、KeyErrorを解消したいです。
発生している問題・エラーメッセージ
KeyError: 'customdata' File "/Users/kawakamitatsuya/Documents/view_system/research.py", line 174, in createRubric3 dash.dependencies.Output('chart-three', 'figure'), # 入力先を決めるよ [(dash.dependencies.Input('scatter-chart', 'hoverData'))] ) def createRubric3(hoverdata): groupName = hoverdata['points'][0]['customdata'] dff = df[df['group'] == groupName] print(dff) return create_smallChart(dff, groupName) if __name__ == "__main__": KeyError: 'customdata'
該当のソースコード
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) df = pd.read_csv('tasktask.csv', index_col=0) app.layout = html.Div([ # 2つ目のDiv html.Div([ # 見出しを作ります html.H3('グループワークを分析します', style={ 'textAlign': 'center' }), # html.H3のカッコの終わり # 2つ目のDivのなかにDivがありますDiv2-1と命名 html.Div([ # グラフを作成したい dcc.Graph( id='scatter-chart', # ここを余裕があれば、selectedData?にして複数グループセレクトしたい hoverData={'points': [{'customdata': 'group1'}]}, ), # スライダーを作成する(余裕があれば、ドロップダウンにしたい) dcc.Slider( id='slider-one', min=df['ep'].min(), max=df['ep'].max(), marks={i: '{}'.format(i) for i in range( int(df['ep'].min()), int(df['ep'].max()))}, ) ], # Div2-1のスタイルを決める style={ 'display': 'inline-block', 'width': '60%', } ), # Div2-1の終わり # 2つ目のDivのなかにDivがありますDiv2-2と命名 html.Div([ dcc.Graph(id='chart-one'), dcc.Graph(id='chart-two'), dcc.Graph(id='chart-three'), ], # Div2-2のスタイルを決定 style={ 'display': 'inline-block', 'width': '30%', } ) # Div2-2の終わり ]) # 2つ目のDivの終わり ]) # 1つ目のDivの終わり # コールバックを作成する(アプリに動きを加える) @app.callback( # 出力先を決定 dash.dependencies.Output("scatter-chart", 'figure'), # 入力先を決定 [dash.dependencies.Input('slider-one', 'value')] ) # 関数を作るよ(でかいグラフについての関数にしたい) def update_graph(selected_ep): dff = df[df['ep'] == selected_ep] print(dff) dff1 = dff['group'] dff2 = dff['text_diff'] """ ここはどーするか考えなければいけません dffchar1 = dff[dff['text'] == 'text'] dffchar2 = dff[dff['tex_diff'] == 'text_diff'] dffchar3 = dff[dff[''] == 'text'] """ return{ 'data': [go.Scatter( x=dff1, y=dff2, mode='markers', customdata=[i], marker={ 'color': df['class'], 'size':df['class'] * 10 }, name=i, ) for i in dff.group.unique() ], 'layout': { 'height': 900, 'xaxis': { 'title': 'グループナンバー' }, 'yaxis': { 'title': '事前学習からの追加文字数(差分)' }, 'hovermode': 'closest', } } # 小さいグラフを指定していくよ def create_smallChart(df, group): print(df) return{ 'data': [go.Bar( x=df['ep'], y=df['rubric'] )], 'layout': { 'height': 300, 'title': '{}のデータ'.format(group) } } # コールバックを作るよ @app.callback( # 出力先を決めるよ dash.dependencies.Output('chart-one', 'figure'), # 入力先を決めるよ [(dash.dependencies.Input('scatter-chart', 'hoverData'))] ) def createRubric1(hoverdata): groupName = hoverdata['points'][0]['customdata'] dff = df[df['group'] == groupName] print(dff) return create_smallChart(dff, groupName) @app.callback( # 出力先を決めるよ dash.dependencies.Output('chart-two', 'figure'), # 入力先を決めるよ [(dash.dependencies.Input('scatter-chart', 'hoverData'))] ) def createRubric2(hoverdata): groupName = hoverdata['points'][0]['customdata'] dff = df[df['group'] == groupName] print(dff) return create_smallChart(dff, groupName) @app.callback( # 出力先を決めるよ dash.dependencies.Output('chart-three', 'figure'), # 入力先を決めるよ [(dash.dependencies.Input('scatter-chart', 'hoverData'))] ) def createRubric3(hoverdata): groupName = hoverdata['points'][0]['customdata'] dff = df[df['group'] == groupName] print(dff) return create_smallChart(dff, groupName) if __name__ == "__main__": app.run_server(debug=True)
補足CSVデータ
汚いですが、練習用で使用しているcsvデータです
ep group class rubric text edit time text_diff task_text
0 1 group1 2 20 1116 14 00:21:21 816 309
1 1 group2 2 20 1671 19 00:25:31 1371 348
2 1 group3 3 10 784 29 00:34:36 484 521
3 1 group4 3 15 670 11 00:21:48 370 618
4 1 group5 3 14 748 14 00:23:24 448 237
5 1 group6 3 19 1327 26 00:29:03 1027 383
6 1 group7 1 25 518 24 00:33:54 218 128
7 1 group8 3 10 1223 18 00:29:01 923 445
8 1 group9 2 4 361 17 00:24:17 61 537
9 1 group10 2 10 1294 12 00:25:18 994 422
10 1 group11 3 17 704 14 00:35:21 404 563
11 1 group12 3 19 1501 12 00:23:30 1201 245
12 1 group13 3 13 907 31 00:34:44 607 658
13 1 group14 3 11 1752 62 00:38:23 1452 278
14 1 group15 1 25 767 15 00:09:00 467 167
15 1 group16 3 25 1410 51 00:25:42 1110 254
16 1 group17 2 20 797 20 00:28:19 497 150
17 2 group1 2 20 808 7 00:11:22 508 763
18 2 group2 3 10 1326 11 00:16:13 1026 309
19 2 group3 3 15 879 42 00:40:54 579 348
20 2 group4 3 14 3400 40 00:41:10 3100 521
21 2 group5 3 19 1019 8 00:17:02 719 618
22 2 group6 1 25 737 27 00:19:37 437 237
23 2 group7 3 10 447 19 00:19:49 147 383
24 2 group8 2 4 1116 24 00:41:52 816 128
25 2 group9 2 10 1671 29 00:21:21 1371 445
26 2 group10 3 17 784 14 00:25:31 484 537
27 2 group11 3 19 670 19 00:34:36 370 422
28 2 group12 3 13 748 29 00:21:48 448 563
29 2 group13 3 11 1327 11 00:23:24 1027 245
30 3 group1 1 25 518 14 00:29:03 218 658
31 3 group2 3 25 1223 26 00:33:54 923 278
32 3 group3 2 20 361 24 00:29:01 61 167
33 3 group4 2 20 1294 18 00:24:17 994 254
34 3 group5 3 10 704 17 00:25:18 404 150
35 3 group6 3 15 1501 12 00:35:21 1201 763
36 3 group7 3 14 907 14 00:23:30 607 309
37 3 group8 3 19 1752 12 00:34:44 1452 348
38 3 group9 1 25 767 31 00:38:23 467 521
39 3 group10 3 10 1410 62 00:09:00 1110 618
40 3 group11 2 4 797 15 00:25:42 497 237
41 3 group12 2 10 808 51 00:28:19 508 383
42 3 group13 3 17 1326 20 00:11:22 1026 128
43 3 group14 3 19 879 7 00:16:13 579 445
あなたの回答
tips
プレビュー