この記事でしたこと
僕はデータ分析などを学び始めています。そしてPythonフレームワークの１つであるDashを学んだので、Dashを用いて何かデータを可視化するサイトを作ってみようと思いました。その経緯をこの記事でまとめてみます！
GDPデータの可視化
GDPデータを可視化してみることに決めてみました。別にGDPデータを可視化したいわけではないのですが、何のデータを可視化しようかすごい考えたのですが何も思いつかなかったので、日本・アメリカ・中国に加えて今住んでるオランダのGDPのデータを可視化してみることにしました。
データ収集
GDPデータはこのサイトから収集しました。GLOBAL NOTE(https://www.globalnote.jp/post-1409.html)
本当はBeutiful Soupを使ってスクレイピングしたデータをCSVデータとかに落として可視化するのをしたかったのですが、オープンデータで可視化したいようなまとまったデータがほんっっっっとうに見つかりませんでした。
なのでこのサイトから、Excelに１つずつデータを書き出してCSVデータを構築しました。
データをJupyter Notebookで確認
import pandas as pd
gdp_data = pd.read_csv('GDP_data.csv', sep=';')
gdp_data.head()
データ情報
・単位は百万米ドル。
・IMF統計に基づく名目ベースのGDP（国内総生産）総額。
・米ドルへの換算は各年の平均為替レートベース
gdp_data['Japan']
このようにするとJapan列の中に格納されたデータが取り出せるようになっています。
DASHの準備
Dashの準備は非常に簡単である。以下のサイトの指示にしたがってやる。と言ってもpip install するだけなのだが...
https://dash.plot.ly/installation
visualise.pyのコーディング
ここからはDashを使ってデータを可視化するファイルを作っていきます。
以下のものがDashを使う際に必要となるライブラリたちでimportしておかないといけません。
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
if __name__ == '__main__':
app.run_server(debug=True)
external_stylesheetsでは外部のCSSの場所を指定します。
appに生成したインスタンスを入れています。
if分以降ではサーバーを立てる関数を実行していますが、debugをTrueにしておくと、このファイルに変更を加えながら表示されるサイトを確認することができるので便利です。
ここにデータを与えてそれを可視化していきます。
DASHにデータを渡す。
gdp_data = pd.read_csv('GDP_data.csv', sep=';')
これをimportした後に入れることでデータをcsvからデータフレームに変換します。
app.layout = html.Div([
dcc.Graph(
id='gdp_graph',
figure = {
'data': [
go.Scatter(
x=gdp_data['Time'],
y=gdp_data['Japan'],
mode='lines',
opacity=0.7,
marker={
'size':15,
'color':'red'
},
name='Japan'
),
go.Scatter(
x=gdp_data['Time'],
y=gdp_data['USA'],
mode='lines',
opacity=0.7,
marker={
'size':15,
'color':'blue'
},
name='USA'
),
go.Scatter(
x=gdp_data['Time'],
y=gdp_data['China'],
mode='lines',
opacity=0.7,
marker={
'size':15,
'color':'yellow'
},
name='China'
),
go.Scatter(
x=gdp_data['Time'],
y=gdp_data['Netherlands'],
mode='lines',
opacity=0.7,
marker={
'size':15,
'color':'black'
},
name='Netherlands'
)
]
}
)
])
app変数の後にこれらを入れます。appの中のレイアウトとしてgo.Scatterの用いてグラフを使うことを明示しています。go.Scaterの中でx軸y軸のデータを入れることでデータの可視化をすることができます。早速みてみましょう。
$ python3 visualise.py
現段階ではこのようなグラフが出来上がっています。非常に見栄えもいいし、簡単ですよね！？すでにいくつかのグラフを便利に使える機能が実装されている点が非常に良いです。(Japanのところ押したらJapanのグラフだけ消えるとか)
レイアウトを少し調整
'layout': go.Layout(
xaxis = {'title': 'Time'},
yaxis = {'title': 'GDP'},
width = 1000,
height = 500
)
'data'の後に'layout'を加えると、表示したデータに対するレイアウトを表示することも可能になります。
Y軸とX軸に名前をつけることができました！
さらに...
html.H1(
children='GDP Graph',
style = {
'textAlign': 'center',
'color': 'black',
}),
html.Div(
children='''
You can easily visualise data by using DASH framework.
Here, you can understand the flow of GDP change in graph.
''',
style = {
'textAlign': 'center',
'color': 'black',
}),
このようにhtml要素をappに追加することもできます。
簡単に説明などを追加することもできますね。くるうしゅうない
最後に
今回はちょこっとデータ可視化サイトを作ってみました。まだまだ始めたてて簡単なものですが、こんな知識でも割といいデータ可視化ができるのがpythonの強いところですね。
あと、Herokuで公開しようと思ったのですが、なかなかうまくいかなかったのでここまでを記事にしました。
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
gdp_data = pd.read_csv('GDP_data.csv', sep=';')
gdp_data = gdp_data.rename(columns = {'Unnamed: 0': 'Time'})
gdp_data = gdp_data.drop('Unnamed: 5', axis=1)
gdp_data = gdp_data.drop('Unnamed: 6', axis=1)
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.layout = html.Div(children=[
html.H1(
children='GDP Graph',
style = {
'textAlign': 'center',
'color': 'black',
}),
html.Div(
children='''
You can easily visualise data by using DASH framework.
Here, you can understand the flow of GDP change in graph.
''',
style = {
'textAlign': 'center',
'color': 'black',
}),
dcc.Graph(
id='gdp_graph',
figure = {
'data': [
go.Scatter(
x=gdp_data['Time'],
y=gdp_data['Japan'],
mode='lines',
opacity=0.7,
marker={
'size':15,
'color':'red'
},
name='Japan'
),
go.Scatter(
x=gdp_data['Time'],
y=gdp_data['USA'],
mode='lines',
opacity=0.7,
marker={
'size':15,
'color':'blue'
},
name='USA'
),
go.Scatter(
x=gdp_data['Time'],
y=gdp_data['China'],
mode='lines',
opacity=0.7,
marker={
'size':15,
'color':'yellow'
},
name='China'
),
go.Scatter(
x=gdp_data['Time'],
y=gdp_data['Netherlands'],
mode='lines',
opacity=0.7,
marker={
'size':15,
'color':'black'
},
name='Netherlands'
)
],
'layout': go.Layout(
xaxis = {'title': 'Time'},
yaxis = {'title': 'GDP'},
width = 1000,
height = 500
)
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)