Flask + jQuery + Plotly로 서버 측 계산 결과를 동적으로 교환
개요
Flask + jQuery + Plotly로 서버 측에서 계산 한 결과를 동적으로 시각화합니다.
Python의 이점인 데이터 처리의 편의성을 활용할 수 있기 때문에 간단한 프레임워크로 분석 시스템의 프로토타입을 만드는 데 도움이 됩니다.
경량의 프레임워크입니다만 그만큼 추가 라이브러리의 개발이 번성합니다.
이번은 html의 묘화와, GET에 대해서 계산을 실시해 json를 돌려주는 부분을 기능으로서 가지고 있습니다.
Flask에서 준비한 입구에 값을 던져 대응하는 처리를 실시해 json을 받아, 그것을 파스 해 Plotly로
에 묘화 합니다.
파이썬의 고기능 드로잉 라이브러리입니다.
내용
이번에는 HTML 측에서 값 (평균, 분산)을 보내 서버 측에서 그에 기초한 정규 분포를 생성하고 JavaScript로 동적으로 다시 씁니다.
각 언어 간의 상호 작용 흐름은 다음과 같습니다. html -> JavaScript -> Python -> JavaScript -> html
구현
html
index.html <!-- 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 %}
html측에서는 갱신하지 않기 위해 href에 #, 동작을 검지하기 위해서 id에 이름, 나중에 재기록하기 위해서 를 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
Reference
이 문제에 관하여(Flask + jQuery + Plotly로 서버 측 계산 결과를 동적으로 교환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/MorinibuTakeshi/items/eab2d5af65d698e52cd2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
html
index.html
<!-- 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 %}
html측에서는 갱신하지 않기 위해 href에 #, 동작을 검지하기 위해서 id에 이름, 나중에 재기록하기 위해서
를 id 첨부로 준비합니다.
visualize.js
자바스크립트 측에서는 id=visualize의 클릭을 검지하고, Flask에서 준비한 라우팅에 값을 던지고, 그 결과를 받아 파싱하여 Plotly에 건네줍니다.
main.py
Python 측에서는 request에서 값을 받아 stats에서 그것에 대응하는 확률 분포를 계산하고 Plotly 형식의 Json으로하고 Jsonify로 반환합니다. make_graph_data는 Plotly에 대한 데이터를 작성하기 위해 개별적으로 구현한 함수입니다.
ids는 리스트이므로 자바스크립트 측에서 퍼스는 필요하지 않습니다만, graphJSON은 json로 하고 있으므로 퍼스가 필요한 점만 주의가 필요합니다.
요약
소스 코드
References
Flask + Plotly Flask + Ajax
자바스크립트
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
Reference
이 문제에 관하여(Flask + jQuery + Plotly로 서버 측 계산 결과를 동적으로 교환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/MorinibuTakeshi/items/eab2d5af65d698e52cd2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
