77999


経験者の皆様に、タイトルの事について、識者の皆様の意見を伺わせて頂けないでしょうか。  
あれこれ考えたり検証している時間が無く、周りに気軽に聞ける経験者がいないため、投稿させて頂きました。  
どうぞ宜しくお願いします。

### 要件

下記のWebアプリを新しく作りたい。

  * できればpythonだけで実現し、JavaScript HTML CSSを使う事は避けたい
  * クライアント領域は左右2つに分け、 
    * 左にリストボックスやボタン等のウィジェットを付けたい
    * 右に任意の地図画像(png)を描き、その上に点や線も描きたい  
この描画物は、マウスクリックに反応する=ヒットテストを行うようにしたい。

  * 長く使う=保守し続ける事になりそう。

### 私の状況

  * Webアプリ作成経験ナシ
  * pythonは初心者
  * VC++とMFCとDirect3DとOpenGLでWinのGUIツールを作った事はある
  * 素早い実装を要求されてる

### 検証中の事

開発速度を重視し下記を試している。しかし適切といえるか確信できなくなった。

  * streamlit  
Webアプリ作成をpythonで行うための基本ライブラリ。  
コード量は少ないが、シバリ・できない事が多い。敷かれたレールの範囲内の処理しかできない。  
例えば、プログラムからリロード=画面再描画ができない。

  * plotly  
streamlitと連携し、描画するライブラリ。グラフ描画用で、自由な描画には向かないかも。

  * streamlit-drawable-canvas  
<https://pypi.org/project/streamlit-drawable-canvas/>
のサンプルコードを実行して調べようとした。がpython3.9の環境ではエラーで実行不能だった。

### 環境

  * Python 3.9
  * Windows 10 Pro. x64 20H2
  * Docker等の仮想環境は未使用

**過去の関連質問:**  
[plotly には、自由に点や線や画像を描画する機能はあるでしょうか？](https://ja.stackoverflow.com/q/77980)


CC BY-SA 4.0
2021-07-05T17:28:19.633
77996
2021-07-06T11:00:13.683
2021-07-06T11:00:13.683
3060
question
python python3
python で、あるWebアプリを早く作る必要がある時の、お勧めのライブラリの組み合わせはあるでしょうか？


[The Bokeh Visualization Library](https://bokeh.org/) を使うのはどうでしょうか。

ただし、

> できればpythonだけで実現し、JavaScript HTML CSSを使う事は避けたい

クリックイベントを検出してコールバックを実行するので `JavaScript` や `CSS` を使用しています。

[code]

    import os
    import random
    from bokeh.plotting import figure, output_file, show
    from bokeh.models.widgets import Select, Button, Div
    from bokeh.models.layouts import Spacer
    from bokeh.models.callbacks import CustomJS
    from bokeh.layouts import Column, Row
    from bokeh.io import curdoc
    
    # data view
    width, height = 800, 800
    num_range = (0, 100)
    plot = figure(
      title='東京23区',
      plot_width=width, plot_height=height,
      x_range=num_range, y_range=num_range,
      tools='pan,wheel_zoom,reset', toolbar_location='above',
      active_scroll='wheel_zoom')
    
    # background image
    plot.image_url(
      url=['https://livedoor.blogimg.jp/unnyas31-sougou/imgs/8/b/8bcba2f3.gif'],
      x=0, y=0, w=num_range[1], h=num_range[1], anchor='bottom_left')
    
    # draw 20 circles
    k = 40
    c = random.sample(range(*num_range), k=k)
    plot.circle(
      x=c[:k//2], y=c[k//2:], size=15, color='blue', alpha=0.5)
    
    # draw 20 lines
    p = random.sample(range(*num_range), k=2*k)
    for i in range(0, 2*k, 4):
      plot.line(
        x=p[i:i+2], y=p[i+2:i+4],
        line_width=2, line_color='red', line_alpha=0.5)
    
    # callback on click event
    def callback(div):
      return CustomJS(args=dict(div=div), code="""
        var line = "<span>" +
          "x=" + Number(cb_obj.x).toFixed(2) + ", " +
          "y=" + Number(cb_obj.y).toFixed(2) +
          "</span>\\n";
        var text = div.text.concat(line);
        var lines = text.split("\\n")
        if (lines.length > 10) lines.shift();
        div.text = lines.join("\\n");
      """)
    click_pos = Div(style={
      'width': '120px', 'height':'170px', 'background': '#E2DCF4',
      'text-align': 'center'
    })
    plot.js_on_event('tap', callback(click_pos))
    
    # selection box
    select = Select(
      title='Option:', value='午前',
      options=['午前', '午後', '深夜'])
    
    # button
    button = Button(label='Push me', button_type='success')
    
    # layout     
    layout = Row(
      Column(Spacer(height=50), button, select, click_pos, width=100),
      Spacer(width=50),
      plot
    )
    curdoc().add_root(layout)
    
    os.environ['BOKEH_LOG_LEVEL'] = 'error'
    output_file('plot.html')
    show(layout)
    
[/code]

以下は `Bokeh` の `output_file` で出力した HTML+JavaScript
ファイルになりますが、地図上のポイントをクリックすると左側の表示領域にその座標が表示されます(最新10ポイント分)。

**plot.html**  

[code]

    <!DOCTYPE html>
    <html lang="en">
      <head>
          <meta charset="utf-8">
          <title>Bokeh Plot</title>
            <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.js" integrity="sha384-XypntL49z55iwGVUW4qsEu83zKL3XEcz0MjuGOQ9SlaaQ68X/g+k1FcioZi7oQAc" crossorigin="anonymous"></script>
            <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.2.min.js" integrity="sha384-TX0gSQTdXTTeScqxj6PVQxTiRW8DOoGVwinyi1D3kxv7wuxQ02XkOxv0xwiypcAH" crossorigin="anonymous"></script>
            <script type="text/javascript">
                Bokeh.set_log_level("error");
            </script>
      </head>
      <body>
                  <div class="bk-root" id="7765f21b-c784-43ae-9371-9e005d5ffef7" data-root-id="1145"></div>
            <script type="application/json" id="1605">
              {"b1a4274d-e7bb-42ce-ab03-d72628b910ed":{"defs":[],"roots":{"references":[{"attributes":{"data_source":{"id":"1063"},"glyph":{"id":"1064"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1065"},"view":{"id":"1067"}},"id":"1066","type":"GlyphRenderer"},{"attributes":{"data_source":{"id":"1133"},"glyph":{"id":"1134"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1135"},"view":{"id":"1137"}},"id":"1136","type":"GlyphRenderer"},{"attributes":{"source":{"id":"1063"}},"id":"1067","type":"CDSView"},{"attributes":{"children":[{"id":"1142"},{"id":"1141"},{"id":"1140"},{"id":"1138"}],"width":100},"id":"1143","type":"Column"},{"attributes":{"source":{"id":"1068"}},"id":"1072","type":"CDSView"},{"attributes":{},"id":"1185","type":"UnionRenderers"},{"attributes":{"args":{"div":{"id":"1138"}},"code":"\n    var line = \"&lt;span&gt;\" +\n      \"x=\" + Number(cb_obj.x).toFixed(2) + \", \" +\n      \"y=\" + Number(cb_obj.y).toFixed(2) +\n      \"&lt;/span&gt;\\n\";\n    var text = div.text.concat(line);\n    var lines = text.split(\"\\n\")\n    if (lines.length &gt; 10) lines.shift();\n    div.text = lines.join(\"\\n\");\n  "},"id":"1139","type":"CustomJS"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1069","type":"Line"},{"attributes":{"data":{"x":[55,52],"y":[90,16]},"selected":{"id":"1170"},"selection_policy":{"id":"1169"}},"id":"1068","type":"ColumnDataSource"},{"attributes":{"source":{"id":"1133"}},"id":"1137","type":"CDSView"},{"attributes":{"options":["\u5348\u524d","\u5348\u5f8c","\u6df1\u591c"],"title":"Option:","value":"\u5348\u524d"},"id":"1140","type":"Select"},{"attributes":{"source":{"id":"1073"}},"id":"1077","type":"CDSView"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1074","type":"Line"},{"attributes":{"height":50},"id":"1142","type":"Spacer"},{"attributes":{"data":{"x":[5,51],"y":[10,93]},"selected":{"id":"1172"},"selection_policy":{"id":"1171"}},"id":"1073","type":"ColumnDataSource"},{"attributes":{},"id":"1186","type":"Selection"},{"attributes":{"button_type":"success","icon":null,"label":"Push me"},"id":"1141","type":"Button"},{"attributes":{"data_source":{"id":"1068"},"glyph":{"id":"1069"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1070"},"view":{"id":"1072"}},"id":"1071","type":"GlyphRenderer"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1070","type":"Line"},{"attributes":{"width":50},"id":"1144","type":"Spacer"},{"attributes":{"source":{"id":"1078"}},"id":"1082","type":"CDSView"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1079","type":"Line"},{"attributes":{"data":{"x":[37,88],"y":[23,94]},"selected":{"id":"1174"},"selection_policy":{"id":"1173"}},"id":"1078","type":"ColumnDataSource"},{"attributes":{"children":[{"id":"1143"},{"id":"1144"},{"id":"1002"}]},"id":"1145","type":"Row"},{"attributes":{"formatter":{"id":"1152"},"major_label_policy":{"id":"1151"},"ticker":{"id":"1018"}},"id":"1017","type":"LinearAxis"},{"attributes":{"data_source":{"id":"1033"},"glyph":{"id":"1034"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1035"},"view":{"id":"1037"}},"id":"1036","type":"GlyphRenderer"},{"attributes":{"data_source":{"id":"1073"},"glyph":{"id":"1074"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1075"},"view":{"id":"1077"}},"id":"1076","type":"GlyphRenderer"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1075","type":"Line"},{"attributes":{"source":{"id":"1083"}},"id":"1087","type":"CDSView"},{"attributes":{},"id":"1187","type":"UnionRenderers"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1084","type":"Line"},{"attributes":{"axis":{"id":"1017"},"dimension":1,"ticker":null},"id":"1020","type":"Grid"},{"attributes":{"data":{"x":[30,67],"y":[43,44]},"selected":{"id":"1176"},"selection_policy":{"id":"1175"}},"id":"1083","type":"ColumnDataSource"},{"attributes":{},"id":"1018","type":"BasicTicker"},{"attributes":{"data_source":{"id":"1078"},"glyph":{"id":"1079"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1080"},"view":{"id":"1082"}},"id":"1081","type":"GlyphRenderer"},{"attributes":{"source":{"id":"1043"}},"id":"1047","type":"CDSView"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1080","type":"Line"},{"attributes":{},"id":"1188","type":"Selection"},{"attributes":{},"id":"1022","type":"WheelZoomTool"},{"attributes":{"source":{"id":"1088"}},"id":"1092","type":"CDSView"},{"attributes":{},"id":"1021","type":"PanTool"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1089","type":"Line"},{"attributes":{},"id":"1023","type":"ResetTool"},{"attributes":{"data":{"x":[69,89],"y":[24,84]},"selected":{"id":"1178"},"selection_policy":{"id":"1177"}},"id":"1088","type":"ColumnDataSource"},{"attributes":{"data_source":{"id":"1083"},"glyph":{"id":"1084"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1085"},"view":{"id":"1087"}},"id":"1086","type":"GlyphRenderer"},{"attributes":{},"id":"1014","type":"BasicTicker"},{"attributes":{"data":{"x":[98,34],"y":[77,66]},"selected":{"id":"1158"},"selection_policy":{"id":"1157"}},"id":"1038","type":"ColumnDataSource"},{"attributes":{"text":"\u6771\u4eac23\u533a"},"id":"1003","type":"Title"},{"attributes":{"style":{"background":"#E2DCF4","height":"170px","text-align":"center","width":"120px"}},"id":"1138","type":"Div"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1085","type":"Line"},{"attributes":{"axis":{"id":"1013"},"ticker":null},"id":"1016","type":"Grid"},{"attributes":{"source":{"id":"1093"}},"id":"1097","type":"CDSView"},{"attributes":{"data_source":{"id":"1038"},"glyph":{"id":"1039"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1040"},"view":{"id":"1042"}},"id":"1041","type":"GlyphRenderer"},{"attributes":{"anchor":"bottom_left","h":{"value":100},"url":{"field":"url"},"w":{"value":100},"x":{"value":0},"y":{"value":0}},"id":"1029","type":"ImageURL"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1094","type":"Line"},{"attributes":{"below":[{"id":"1013"}],"center":[{"id":"1016"},{"id":"1020"}],"height":800,"js_event_callbacks":{"tap":[{"id":"1139"}]},"left":[{"id":"1017"}],"renderers":[{"id":"1031"},{"id":"1036"},{"id":"1041"},{"id":"1046"},{"id":"1051"},{"id":"1056"},{"id":"1061"},{"id":"1066"},{"id":"1071"},{"id":"1076"},{"id":"1081"},{"id":"1086"},{"id":"1091"},{"id":"1096"},{"id":"1101"},{"id":"1106"},{"id":"1111"},{"id":"1116"},{"id":"1121"},{"id":"1126"},{"id":"1131"},{"id":"1136"}],"title":{"id":"1003"},"toolbar":{"id":"1024"},"toolbar_location":"above","width":800,"x_range":{"id":"1005"},"x_scale":{"id":"1009"},"y_range":{"id":"1007"},"y_scale":{"id":"1011"}},"id":"1002","subtype":"Figure","type":"Plot"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"blue"},"line_alpha":{"value":0.1},"line_color":{"value":"blue"},"size":{"value":15},"x":{"field":"x"},"y":{"field":"y"}},"id":"1035","type":"Circle"},{"attributes":{"data":{"x":[53,0],"y":[80,50]},"selected":{"id":"1180"},"selection_policy":{"id":"1179"}},"id":"1093","type":"ColumnDataSource"},{"attributes":{},"id":"1189","type":"UnionRenderers"},{"attributes":{"data_source":{"id":"1088"},"glyph":{"id":"1089"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1090"},"view":{"id":"1092"}},"id":"1091","type":"GlyphRenderer"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1039","type":"Line"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1044","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1090","type":"Line"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1059","type":"Line"},{"attributes":{"source":{"id":"1098"}},"id":"1102","type":"CDSView"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1099","type":"Line"},{"attributes":{"data":{"x":[41,13],"y":[62,21]},"selected":{"id":"1182"},"selection_policy":{"id":"1181"}},"id":"1098","type":"ColumnDataSource"},{"attributes":{},"id":"1190","type":"Selection"},{"attributes":{"fill_alpha":{"value":0.5},"fill_color":{"value":"blue"},"line_alpha":{"value":0.5},"line_color":{"value":"blue"},"size":{"value":15},"x":{"field":"x"},"y":{"field":"y"}},"id":"1034","type":"Circle"},{"attributes":{"data_source":{"id":"1093"},"glyph":{"id":"1094"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1095"},"view":{"id":"1097"}},"id":"1096","type":"GlyphRenderer"},{"attributes":{"data":{"x":[56,71],"y":[97,60]},"selected":{"id":"1166"},"selection_policy":{"id":"1165"}},"id":"1058","type":"ColumnDataSource"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1095","type":"Line"},{"attributes":{"source":{"id":"1033"}},"id":"1037","type":"CDSView"},{"attributes":{"source":{"id":"1103"}},"id":"1107","type":"CDSView"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1050","type":"Line"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1104","type":"Line"},{"attributes":{"data_source":{"id":"1048"},"glyph":{"id":"1049"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1050"},"view":{"id":"1052"}},"id":"1051","type":"GlyphRenderer"},{"attributes":{"data":{"x":[76,33],"y":[18,38]},"selected":{"id":"1184"},"selection_policy":{"id":"1183"}},"id":"1103","type":"ColumnDataSource"},{"attributes":{"data_source":{"id":"1098"},"glyph":{"id":"1099"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1100"},"view":{"id":"1102"}},"id":"1101","type":"GlyphRenderer"},{"attributes":{"data":{"x":[79,26],"y":[81,58]},"selected":{"id":"1164"},"selection_policy":{"id":"1163"}},"id":"1053","type":"ColumnDataSource"},{"attributes":{"data":{"x":[0,78,90,10,15,49,45,17,47,48,69,3,70,98,92,96,35,58,46,56],"y":[79,50,9,34,77,2,40,27,81,8,26,64,43,65,28,32,62,25,24,36]},"selected":{"id":"1156"},"selection_policy":{"id":"1155"}},"id":"1033","type":"ColumnDataSource"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1100","type":"Line"},{"attributes":{"source":{"id":"1108"}},"id":"1112","type":"CDSView"},{"attributes":{},"id":"1191","type":"UnionRenderers"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1054","type":"Line"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1109","type":"Line"},{"attributes":{"source":{"id":"1053"}},"id":"1057","type":"CDSView"},{"attributes":{"data":{"x":[65,59],"y":[86,63]},"selected":{"id":"1186"},"selection_policy":{"id":"1185"}},"id":"1108","type":"ColumnDataSource"},{"attributes":{},"id":"1148","type":"AllLabels"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1045","type":"Line"},{"attributes":{"data_source":{"id":"1043"},"glyph":{"id":"1044"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1045"},"view":{"id":"1047"}},"id":"1046","type":"GlyphRenderer"},{"attributes":{"data_source":{"id":"1103"},"glyph":{"id":"1104"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1105"},"view":{"id":"1107"}},"id":"1106","type":"GlyphRenderer"},{"attributes":{"end":100},"id":"1007","type":"Range1d"},{"attributes":{},"id":"1149","type":"BasicTickFormatter"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1105","type":"Line"},{"attributes":{},"id":"1192","type":"Selection"},{"attributes":{"data":{"x":[36,35],"y":[48,78]},"selected":{"id":"1162"},"selection_policy":{"id":"1161"}},"id":"1048","type":"ColumnDataSource"},{"attributes":{"source":{"id":"1113"}},"id":"1117","type":"CDSView"},{"attributes":{},"id":"1009","type":"LinearScale"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1049","type":"Line"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1114","type":"Line"},{"attributes":{},"id":"1151","type":"AllLabels"},{"attributes":{"source":{"id":"1048"}},"id":"1052","type":"CDSView"},{"attributes":{"data":{"x":[40,4],"y":[85,82]},"selected":{"id":"1188"},"selection_policy":{"id":"1187"}},"id":"1113","type":"ColumnDataSource"},{"attributes":{},"id":"1152","type":"BasicTickFormatter"},{"attributes":{"data_source":{"id":"1108"},"glyph":{"id":"1109"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1110"},"view":{"id":"1112"}},"id":"1111","type":"GlyphRenderer"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1110","type":"Line"},{"attributes":{"source":{"id":"1028"}},"id":"1032","type":"CDSView"},{"attributes":{"source":{"id":"1118"}},"id":"1122","type":"CDSView"},{"attributes":{"data_source":{"id":"1028"},"glyph":{"id":"1029"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1030"},"view":{"id":"1032"}},"id":"1031","type":"GlyphRenderer"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1119","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1040","type":"Line"},{"attributes":{"data":{"x":[39,72],"y":[28,8]},"selected":{"id":"1190"},"selection_policy":{"id":"1189"}},"id":"1118","type":"ColumnDataSource"},{"attributes":{},"id":"1193","type":"UnionRenderers"},{"attributes":{"data_source":{"id":"1113"},"glyph":{"id":"1114"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1115"},"view":{"id":"1117"}},"id":"1116","type":"GlyphRenderer"},{"attributes":{"anchor":"bottom_left","global_alpha":0.1,"h":{"value":100},"url":{"field":"url"},"w":{"value":100},"x":{"value":0},"y":{"value":0}},"id":"1030","type":"ImageURL"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1115","type":"Line"},{"attributes":{"source":{"id":"1123"}},"id":"1127","type":"CDSView"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1124","type":"Line"},{"attributes":{"source":{"id":"1038"}},"id":"1042","type":"CDSView"},{"attributes":{"data":{"x":[61,46],"y":[27,32]},"selected":{"id":"1192"},"selection_policy":{"id":"1191"}},"id":"1123","type":"ColumnDataSource"},{"attributes":{},"id":"1194","type":"Selection"},{"attributes":{"data_source":{"id":"1118"},"glyph":{"id":"1119"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1120"},"view":{"id":"1122"}},"id":"1121","type":"GlyphRenderer"},{"attributes":{"data":{"x":[6,83],"y":[11,14]},"selected":{"id":"1160"},"selection_policy":{"id":"1159"}},"id":"1043","type":"ColumnDataSource"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1120","type":"Line"},{"attributes":{"formatter":{"id":"1149"},"major_label_policy":{"id":"1148"},"ticker":{"id":"1014"}},"id":"1013","type":"LinearAxis"},{"attributes":{"source":{"id":"1128"}},"id":"1132","type":"CDSView"},{"attributes":{},"id":"1011","type":"LinearScale"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1129","type":"Line"},{"attributes":{"active_multi":null,"active_scroll":{"id":"1022"},"tools":[{"id":"1021"},{"id":"1022"},{"id":"1023"}]},"id":"1024","type":"Toolbar"},{"attributes":{"data":{"url":["https://livedoor.blogimg.jp/unnyas31-sougou/imgs/8/b/8bcba2f3.gif"]},"selected":{"id":"1154"},"selection_policy":{"id":"1153"}},"id":"1028","type":"ColumnDataSource"},{"attributes":{"data":{"x":[73,75],"y":[57,54]},"selected":{"id":"1194"},"selection_policy":{"id":"1193"}},"id":"1128","type":"ColumnDataSource"},{"attributes":{"data_source":{"id":"1053"},"glyph":{"id":"1054"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1055"},"view":{"id":"1057"}},"id":"1056","type":"GlyphRenderer"},{"attributes":{"data_source":{"id":"1123"},"glyph":{"id":"1124"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1125"},"view":{"id":"1127"}},"id":"1126","type":"GlyphRenderer"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1055","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1125","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1065","type":"Line"},{"attributes":{},"id":"1195","type":"UnionRenderers"},{"attributes":{"source":{"id":"1058"}},"id":"1062","type":"CDSView"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1134","type":"Line"},{"attributes":{"data":{"x":[1,47],"y":[95,49]},"selected":{"id":"1168"},"selection_policy":{"id":"1167"}},"id":"1063","type":"ColumnDataSource"},{"attributes":{"data":{"x":[91,42],"y":[15,22]},"selected":{"id":"1196"},"selection_policy":{"id":"1195"}},"id":"1133","type":"ColumnDataSource"},{"attributes":{"line_alpha":0.5,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1064","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1135","type":"Line"},{"attributes":{"data_source":{"id":"1128"},"glyph":{"id":"1129"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1130"},"view":{"id":"1132"}},"id":"1131","type":"GlyphRenderer"},{"attributes":{"data_source":{"id":"1058"},"glyph":{"id":"1059"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1060"},"view":{"id":"1062"}},"id":"1061","type":"GlyphRenderer"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1060","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"red","line_width":2,"x":{"field":"x"},"y":{"field":"y"}},"id":"1130","type":"Line"},{"attributes":{},"id":"1196","type":"Selection"},{"attributes":{},"id":"1173","type":"UnionRenderers"},{"attributes":{"end":100},"id":"1005","type":"Range1d"},{"attributes":{},"id":"1174","type":"Selection"},{"attributes":{},"id":"1163","type":"UnionRenderers"},{"attributes":{},"id":"1164","type":"Selection"},{"attributes":{},"id":"1175","type":"UnionRenderers"},{"attributes":{},"id":"1153","type":"UnionRenderers"},{"attributes":{},"id":"1176","type":"Selection"},{"attributes":{},"id":"1154","type":"Selection"},{"attributes":{},"id":"1165","type":"UnionRenderers"},{"attributes":{},"id":"1166","type":"Selection"},{"attributes":{},"id":"1177","type":"UnionRenderers"},{"attributes":{},"id":"1155","type":"UnionRenderers"},{"attributes":{},"id":"1178","type":"Selection"},{"attributes":{},"id":"1156","type":"Selection"},{"attributes":{},"id":"1167","type":"UnionRenderers"},{"attributes":{},"id":"1168","type":"Selection"},{"attributes":{},"id":"1179","type":"UnionRenderers"},{"attributes":{},"id":"1157","type":"UnionRenderers"},{"attributes":{},"id":"1180","type":"Selection"},{"attributes":{},"id":"1158","type":"Selection"},{"attributes":{},"id":"1169","type":"UnionRenderers"},{"attributes":{},"id":"1170","type":"Selection"},{"attributes":{},"id":"1181","type":"UnionRenderers"},{"attributes":{},"id":"1159","type":"UnionRenderers"},{"attributes":{},"id":"1182","type":"Selection"},{"attributes":{},"id":"1160","type":"Selection"},{"attributes":{},"id":"1171","type":"UnionRenderers"},{"attributes":{},"id":"1172","type":"Selection"},{"attributes":{},"id":"1183","type":"UnionRenderers"},{"attributes":{},"id":"1161","type":"UnionRenderers"},{"attributes":{},"id":"1184","type":"Selection"},{"attributes":{},"id":"1162","type":"Selection"}],"root_ids":["1145"]},"title":"Bokeh Application","version":"2.3.2"}}
            </script>
            <script type="text/javascript">
              (function() {
                var fn = function() {
                  Bokeh.safely(function() {
                    (function(root) {
                      function embed_document(root) {
                      var docs_json = document.getElementById('1605').textContent;
                      var render_items = [{"docid":"b1a4274d-e7bb-42ce-ab03-d72628b910ed","root_ids":["1145"],"roots":{"1145":"7765f21b-c784-43ae-9371-9e005d5ffef7"}}];
                      root.Bokeh.embed.embed_items(docs_json, render_items);
                      }
                      if (root.Bokeh !== undefined) {
                        embed_document(root);
                      } else {
                        var attempts = 0;
                        var timer = setInterval(function(root) {
                          if (root.Bokeh !== undefined) {
                            clearInterval(timer);
                            embed_document(root);
                          } else {
                            attempts++;
                            if (attempts > 100) {
                              clearInterval(timer);
                              console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
                            }
                          }
                        }, 10, root)
                      }
                    })(window);
                  });
                };
                if (document.readyState != "loading") fn();
                else document.addEventListener("DOMContentLoaded", fn);
              })();
            </script>
      </body>
    </html>
[/code]


CC BY-SA 4.0
2021-07-05T23:01:18.153
77999
2021-07-06T10:34:36.157
2021-07-06T10:34:36.157
47127
47127
77996
answer