<!-- Form -->
    <p> Mean = <input type=text size=5 name=mean>
        Var = <input type=text size=5 name=var>
    <p><a href=# id=visualize>Visualize</a>

    <!-- Graph -->
    {% for id in ids %}
    <h3>{{id}}</h3>
    <div id="{{id}}"></div>
    {% endfor %}

를 id 첨부로 준비합니다.

자바스크립트

visualize.js

$('a#visualize').bind('click', function() {
    $.getJSON($SCRIPT_ROOT + '/_calc_dist', {
      mean: $('input[name="mean"]').val(),
      var: $('input[name="var"]').val()
    }, function(data) {
      // Recieve data from python as json and json.dumped.
      var ids = data.ids;
      var graphs = JSON.parse(data.graphJ);

      // Plot by plotly.
      Plotly.newPlot(ids[0],
                  graphs[0].data,
                  graphs[0].layout || {});
    });
    return false;
  });

자바스크립트 측에서는 id=visualize의 클릭을 검지하고, Flask에서 준비한 라우팅에 값을 던지고, 그 결과를 받아 파싱하여 Plotly에 건네줍니다.

파이썬

main.py

# API for calculation.
@app.route('/_calc_dist')
def calc_dist():
    # Make Gaussian data.
    mean = request.args.get('mean', 0, type=float)
    var = request.args.get('var', 0, type=float)
    x = np.linspace(mean - 10, mean + 10, 1000)
    y = stats.norm.pdf(x=x, loc=mean, scale=np.sqrt(var))
    graphs = make_graph_data(x, y)

    # Convert data to json
    graphJSON = json.dumps(graphs, cls=plotly.utils.PlotlyJSONEncoder)
    ids = ['graph-{}'.format(i) for i, _ in enumerate(graphs)]
    return jsonify(graphJ=graphJSON, ids=ids)

@app.route('/', methods=["GET", "POST"])
def index():
    return render_template('index.html', ids=ids)

if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port=18888, threaded=True)

Python 측에서는 request에서 값을 받아 stats에서 그것에 대응하는 확률 분포를 계산하고 Plotly 형식의 Json으로하고 Jsonify로 반환합니다. make_graph_data는 Plotly에 대한 데이터를 작성하기 위해 개별적으로 구현한 함수입니다.
ids는 리스트이므로 자바스크립트 측에서 퍼스는 필요하지 않습니다만, graphJSON은 json로 하고 있으므로 퍼스가 필요한 점만 주의가 필요합니다.

def make_graph_data(x, y):
    graphs = [
        dict(
            data=[
                dict(
                    x=x,
                    y=y,
                    type='scatter'
                ),
            ],
            layout=dict(
                title='Interactive Gaussian',
                xaxis=dict(range=[min(x), max(x)])
            )
        )
    ]
    return graphs

요약

서버 측에 Python을 사용하면 데이터 조작을 쉽게 할 수 있으므로 편리합니다. 교환도 Json이므로 친화성이 높고 구현도 간단하고, 또한 Plotly라는 고기능 라이브러리도 그들을 뒷받침 해줍니다.

소스 코드는 아래에서 공개합니다.

소스 코드

References

Flask + Plotly

Flask + Ajax