D3.jsで、以下のようなグラフを描くプログラムを作ってみました。定期的に、東京、ロンドン、ニューヨークの3大都市の気温を取得しグラフを更新していきます。「OpenWeatherMap」のAPIを利用して気温データを取得します。
技術的なポイント：
- D3.jsでリアルタイムに更新するグラフを描く
- サーバ側にWebサーバとしてお手軽なFlask(Python)を採用する
- OpenWeatherMapのAPIをrequestsで叩く
- 取得した気温データはPostgreSQL(SQLAlchemy)に保存する
#１．サーバ (Flask + PostgreSQL) の設定
サーバ側は、AWS(Chalice)を使えば良いのですが、しょぼい話ですが、私のAWSアカウントが無料枠を超えてしまっているようなので、今回は手元のCentos7サーバで、Flaskを立てます。
Flaskについての基本的なところは以下のサイトを参照してください。
「Flask - 公式サイト」
「View Decorators - @wrapsについての説明」
「Pythonのデコレータについて」
「PythonのFlaskで学ぶWebアプリケーション制作講座 第6章 〜セッション〜」
##１－１．ライブラリのインストール
まず必要なライブラリをインストールしておきます。
pip install flask SQLAlchemy flask-sqlalchemy
pip install psycopg2
pip install psycopg2-binary # 不要かも。
##１－２．SQLAlchemyの設定
pythonのORMモジュールであるSQLAlchemyを使います。基本的な説明は以下のサイトを参照してください。
「Flask-SQLAlchemy - 公式サイト」
「Flask-SQLAlchemyの使い方」
「Flask by Example – Setting up Postgres, SQLAlchemy, and Alembic」
以下のように設定ファイルを作成します。flask_weatherというDBを利用する予定です。
config.py
SQLALCHEMY_DATABASE_URI = 'postgresql://postgres:postgres@localhost:5432/flask_weather'
SQLALCHEMY_TRACK_MODIFICATIONS = True
##１－３．PostgreSQLの設定
PostgreSQL自体はインストール済みであることを前提とします。まだ、インストールしていない場合は、以下のサイトをご参照してください。
「PostgreSQL 10 を CentOS 7 に yum インストールする手順」
「CentOS7にErlangとElixir、Phoenixをインストールしてみる」
「centOS7 でpostgreSQLがアンインストールできない」
まずflask_weatherというDBを作成します。
sudo -u postgres psql -U postgres
postgres=# create database flask_weather;
Pythonインタープリタから、server.py（後で説明）を使ってテーブルを作成します。（Pythonってこういう使い方するんだ～。）
python
>>> from server import db
>>> db.create_all()
PostgreSQLの設定はこれで終わりです。最後に、忘れやすいので、PostgreSQLの設定を確認するために便利なコマンドを挙げておきます。PostgreSQLコマンドチートシート
sudo -u postgres psql
postgres=# \l # DB一覧
postgres=# \c flask_weather # DB接続
flask_weather=# \z # テーブル一覧
flask_weather=# \d entries # テーブル定義
flask_weather=# select * from temp; # テーブル表示
##１－４．サーバプログラム server.pyの説明
server.pyは基本的には「OpenWeatherMap」のAPIを使って気温データを取得してDBに保存します。
Flaskアプリとして以下の3つのパスを定義します。
- "/" - トップページ。D3.jsアプリが動作する。
- "/weather_list/＜length＞" - D3.jsアプリがデータを取得するパス。length個のデータを要求
- "/weather" - cronから15分おきにアクセス。気温データを取得しDBに保存。前に取得した時間データが同じなら保存しない。
以下が全ソースです。
server.py
# server.py
from flask import Flask, render_template, jsonify
from flask_sqlalchemy import SQLAlchemy, get_debug_queries
import requests
import json, pprint
# APIキーの指定
apikey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
# 都市の一覧
cities = ["Tokyo,JP", "London,UK", "New York,US"]
# cnames = map(lambda str: str[:-3], cities) # render()の中に入れないとダメ
cnames = ["Tokyo", "London", "New York"]
# APIのテンプレート
api = "https://api.openweathermap.org/data/2.5/weather?q={city}&APPID={key}"
# 温度変換(ケルビン -> 摂氏)
k2c = lambda k: k - 273.15
# 前回の時間 - データ更新判定に利用
lastdt = [0,0,0]
app = Flask(__name__, static_folder="./build/static", template_folder="./build")
# SQLAlchemyのお決りの定義。テーブルとオブジェクトの関連付け
#------------------------------------------------------
app.config.from_object('config')
db = SQLAlchemy(app)
class Temp(db.Model):
id = db.Column(db.Integer, primary_key=True)
city = db.Column(db.String(10))
utime = db.Column(db.Integer)
temp = db.Column(db.Float)
def __init__(self, city, utime, temp):
self.city = city
self.utime = utime
self.temp = temp
def __repr__(self):
return '<Temp %r>' % self.temp
# app.config.update(dict( #debug
# SQLALCHEMY_RECORD_QUERIES = True,
# ))
#------------------------------------------------------
# トップページ
@app.route("/")
def index():
return render_template("index.html")
# ブラウザからデータを要求(Rest API)
@app.route("/weather_list/<length>")
def get_weather_list(length=1):
global cnames
print(cnames)
resall = []
for cname in cnames:
print(cname)
res = Temp.query.filter_by(city=cname).order_by(Temp.utime.desc()).limit(length).all()
# info = get_debug_queries()[0] #debug
# pprint.pprint(info) #debug
res2 = []
for r in res:
res2.append( { "city":r.city, "dt":r.utime, "temp":r.temp} )
pprint.pprint(res2)
resall.append(res2)
return jsonify(resall)
# cronからアクセス。気温データを取得してDBに保存(Rest API)
@app.route("/weather")
def get_weather():
i = -1
res = []
for name in cities:
i = i+1
# APIのURL
url = api.format(city=name, key=apikey)
# APIにリクエストを送信
r = requests.get(url)
# JSON形式をデコード
jdata = json.loads(r.text)
if( lastdt[i] == int(jdata["dt"]) ):
break
else:
res.append(jdata)
if( len(res) == 3 ) :
i = -1
for kdata in res :
i = i + 1
lastdt[i] = int(kdata["dt"])
temp = Temp( kdata["name"], lastdt[i], k2c(kdata["main"]["temp"]))
db.session.add(temp)
db.session.commit()
return jsonify(res)
if __name__ == "__main__":
app.debug = True
app.run(host='0.0.0.0', port=8080)
#２．クライアント(D3.js)の設定
##２－１．ソースコードツリー
今回のサーバとクライアントのソースコードツリーです。
ソースコードツリー
config.py
server.py
build - index.html
|- static - modal.html
|- js - d3.js
|- css - styles.css
##２－２．modal画面のHTML
都市名一覧を表示するmodal画面用のhtmlです。2列のテーブルですが、今のところ1列しか使っていません
build/static/modal.html
<table>
<tr>
<th>世界の気温</th>
</tr>
<tr class="city"><td class="city">東京</td><td class="data"></td></tr>
<tr class="city"><td class="city">ロンドン</td><td class="data"></td></tr>
<tr class="city"><td class="city">ニューヨーク</td><td class="data"></td></tr>
</table>
##２－３．index.html(D3.js)
以下がメインのD3.jsのプログラムです。ちょっと長いです。
build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Line Chart</title>
<link rel="stylesheet" type="text/css" href="/static/css/styles.css"/>
<script type="text/javascript" src="/static/js/d3.js"></script>
<style>
#modal {
position:fixed;
left:150px;
top:20px;
z-index:1;
background: white;
border: 1px black solid;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<script type="text/javascript">
// ********************************************************************
// **** D3.jsが扱うDOMツリー
// **
// ** svg
// ** g.axes
// ** g.x .axes -- translate(xStart,yStart)
// ** g.y .axes -- translate(xStart,yEnd)
// ** defs
// ** g.body -- translate(xStart,yEnd)
// ** path.line
// ** path.line
// ** circle.dot(11個)
// ** circle.dot(11個)
// **
// **** g.bodyのハミダシタlineやdotはclipPath(defs)で切り取られる
// ********************************************************************
function lineChart() {
var _chart = {};
var _width = 700, _height = 500,
_margins = {top: 30, left: 30, right: 30, bottom: 30},
_x, _y,
_data = [],
_colors = d3.scaleOrdinal(d3.schemeCategory10),
_svg,
_modal,
_bodyG,
_line;
_chart.render = function () {
if(_data[0].length < numberOfDataPoint) return;
var startEnd = d3.extent(_data[0], d => d.x);
// ** X軸のscale、時間軸
_x = d3.scaleTime().domain(startEnd).range([0, quadrantWidth()])
// ** y軸のscale,rangeがinvertedであることに注意
_y = d3.scaleLinear().domain([min_y, max_y]).range([quadrantHeight(), 0])
if (!_svg) {
_svg = d3.select("body").append("svg")
.attr("height", _height)
.attr("width", _width);
renderModal(); // ** 最初の1回だけ描画
defineBodyClip(_svg);
}
renderAxes(_svg); // ** render()が呼ばれるごとに描画
renderBody(_svg);
};
function renderModal() {
d3.text("/static/modal.html", data => {
if(!_modal) {
_modal = d3.select("body").append("div").attr("id", "modal");
}
_modal.html(data);
d3.selectAll("tr.city")
.each(function (d,i) {
d3.select(this)
.style("color", function (d) {
return _colors(i);
})
})
});
};
function renderAxes(svg) {
svg.select("g.axes").remove() // ** 前回のDOMをクリアー
var axesG = svg.append("g")
.attr("class", "axes");
renderXAxis(axesG);
renderYAxis(axesG);
}
// ** X座標
function renderXAxis(axesG){
var xAxis = d3.axisBottom()
.scale(_x);
axesG.append("g")
.attr("class", "x axis")
.attr("transform", function () {
return "translate(" + xStart() + "," + yStart() + ")"; // ** ＠左下
})
.call(xAxis);
// ** y座標軸に平行なgrid line
d3.selectAll("g.x g.tick")
.append("line")
.classed("grid-line", true)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", - quadrantHeight());
}
// ** Y座標
function renderYAxis(axesG){
var yAxis = d3.axisLeft()
.scale(_y);
axesG.append("g")
.attr("class", "y axis")
.attr("transform", function () {
return "translate(" + xStart() + "," + yEnd() + ")"; // ** ＠左上 Invertedだから。
})
.call(yAxis);
// ** x座標軸に平行なgrid line
d3.selectAll("g.y g.tick")
.append("line")
.classed("grid-line", true)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", quadrantWidth())
.attr("y2", 0);
}
// ** Bodyを切り取るRect(body-clip)を定義
function defineBodyClip(svg) {
var padding = 5;
svg.append("defs")
.append("clipPath")
.attr("id", "body-clip")
.append("rect")
.attr("x", 0 - padding)
.attr("y", 0)
.attr("width", quadrantWidth() + 2 * padding)
.attr("height", quadrantHeight());
}
// ** Body描画
function renderBody(svg) {
if (!_bodyG)
_bodyG = svg.append("g")
.attr("class", "body")
.attr("transform", "translate("
+ xStart() + ","
+ yEnd() + ")") // <-2E
.attr("clip-path", "url(#body-clip)");
// ** Rect(body-clip)でBodyを切り取る。点や線がはみ出したらキロ取る。
renderLines();
renderDots();
}
// ** data = [d1, d2]
// ** d1 = [a1,b1,c1,..], d2 = [a2,b2,c2,...]
// ** lineはdataレベルのbindであり、dotはd1,d2レベルのbindである。
// ** line描画
function renderLines() {
_line = d3.line()
.x(function (d) { return _x(d.x); })
.y(function (d) { return _y(d.y); });
var pathLines = _bodyG.selectAll("path.line")
.data(_data);
pathLines
.enter() // ** ２個のdata setで未バインドなもの
.append("path")
.merge(pathLines) // ** enter + update
.style("stroke", function (d, i) { // ** i はdata set番号
return _colors(i);
})
.attr("class", "line")
// ** transition()行は無くとも最終的なグラフ描画は変わらないが、
// ** transition()行でupdate時のdotの動作（前回->今回）がスムーズになる。
.transition()
.attr("d", function (d) { return _line(d); });
}
// ** Dot描画
function renderDots() {
_data.forEach(function (list, i) { // ** iはdata set番号
var circle = _bodyG.selectAll("circle._" + i)
.data(list);
circle.enter()
.append("circle")
.merge(circle)
.attr("class", "dot _" + i)
.style("stroke", function (d) {
return _colors(i);
})
// ** transition()行は無くとも最終的なグラフ描画は変わらないが、
// ** transition()行でupdate時のdotの動作（前回->今回）がスムーズになる。
.transition()
.attr("cx", function (d) { return _x(d.x); })
.attr("cy", function (d) { return _y(d.y); })
.attr("r", 4.5);
});
}
function xStart() {
return _margins.left;
}
function yStart() {
return _height - _margins.bottom;
}
function xEnd() {
return _width - _margins.right;
}
function yEnd() {
return _margins.top;
}
function quadrantWidth() {
return _width - _margins.left - _margins.right;
}
function quadrantHeight() {
return _height - _margins.top - _margins.bottom;
}
_chart.width = function (w) {
if (!arguments.length) return _width;
_width = w;
return _chart;
};
_chart.height = function (h) { // <-1C
if (!arguments.length) return _height;
_height = h;
return _chart;
};
_chart.margins = function (m) {
if (!arguments.length) return _margins;
_margins = m;
return _chart;
};
_chart.colors = function (c) {
if (!arguments.length) return _colors;
_colors = c;
return _chart;
};
_chart.x = function (x) {
if (!arguments.length) return _x;
_x = x;
return _chart;
};
_chart.y = function (y) {
if (!arguments.length) return _y;
_y = y;
return _chart;
};
_chart.setData = function (data) {
_data = []
data.forEach(function(series,i) {
var temp = []
series.forEach( function(ds) {
temp.push({x: new Date(ds["dt"]*1000), y:ds["temp"]});
} )
_data.push(temp)
} )
}
return _chart;
}
function update() {
d3.json("http://www.mypress.jp:8080/weather_list/"+numberOfDataPoint, function(error, data) {
chart.setData(data);
chart.render();
});
}
var numberOfSeries = 3,
numberOfDataPoint = 11,
min_y = -5,
max_y = 15;
var chart = lineChart()
update();
setInterval(function () {
update();
}, 1000*60*15);
</script>
<div class="control-group">
<button onclick="update()">Update</button>
</div>
</body>
</html>
clippathについては以下のサイトを参考にしました。
「Clipped Paths in d3.js (AKA clipPath)」
http://www.d3noob.org/2015/07/clipped-paths-in-d3js-aka-clippath.html
今回は以上です。
#付録：D3.js関連の過去記事
D3.jsで気温グラフを描く - Flask + PostgreSQL
D3.jsで日本地図を描くときの基本(geojson)
D3.jsで埼玉県地図を描くときの基本（topojson)
D3.jsで埼玉県の地図上に市町村ラベルを描く
React+D3.jsアプリ作成の基本
埼玉県の市町村別人口をD3.jsのツリーマップで表現してみる
D3.jsの enter-updata-exit パタンでLive Data表示