Dash

eurostat統計データAPIをRESTで取得

2018年10月13日 by 河副太智 Leave a Comment

HS指定できるデータベース候補

データベース一覧からほしいデータベースを探す
PDF版のデータベース一覧

現時点では以下の２つを候補とする

(DS-016890)EU trade by CN8

HS6桁プラス２桁(CN8桁)で指定する必要があり、それ以下は不可
年間データ取得可能

(DS-575274)EU trade by HS2,4,6 and CN8

HS２桁レベルからの参照が可能
但し、年間データ取得ができないので注意
DS-575274の個別データベース
 パラメータ一覧（大容量）
※ここにあるパラメータが必ず使えるわけではないわけではない

リクエストが可能なパラメータを調べる

データベース一覧の各パラメータをみるとAPIでどの値を取得できるかを
判断する事が可能

以下の例はPERIODでAとMどちらを指定できるかを判別している
”Jan.-Dec. 2018”の表示があれば年間データの取得が可能

左がDS-575274で右がDS-016890
右だけが年間データの取得が可能

REST クエリーの基本設定

http://ec.europa.eu/eurostat/SDMX/diss-web/rest/resource/flowRef
/key[?[startPeriod=yyyy[mmdd]&]endPeriod=yyyy[mmdd]]

1 2	http://ec.europa.eu/eurostat/SDMX/diss-web/rest/resource/flowRef /key[?[startPeriod=yyyy[mmdd]&]endPeriod=yyyy[mmdd]]

クエリ設定方法の詳細解説

クエリの例

HS(cn8)でChampagneを指定2204101100

http://ec.europa.eu/eurostat/SDMX/diss-web/rest/data/DS-575274
/M.003.0001.22041011..1
.VALUE_1000EURO+QUANTITY_TON+SUP_QUANTITY/
?startperiod=2015-01
&endPeriod=2017-12

http://ec.europa.eu/eurostat/SDMX/diss-web/rest/data/DS-575274

/M.003.0001.22041011..1

.VALUE_1000EURO+QUANTITY_TON+SUP_QUANTITY/

?startperiod=2015-01

&endPeriod=2017-12

import xml.etree.ElementTree as ET
import pandas as pd
from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker, scoped_session
import urllib.request, urllib.error
import urllib.request as req
import requests
import xml.etree.ElementTree as ET
import pandas as pd
from bs4 import BeautifulSoup

url = 'http://ec.europa.eu/eurostat/SDMX/diss-web/rest/data/DS-575274/M.003.0001.22041011..1.VALUE_1000EURO/?startperiod=2015-01'
xml_data = requests.get(url).content

soup = BeautifulSoup(xml_data,"lxml-xml")

import xml.etree.ElementTree as ET

import pandas as pd

from sqlalchemy import create_engine

from sqlalchemy.orm import sessionmaker, scoped_session

import urllib.request, urllib.error

import urllib.request as req

import requests

import xml.etree.ElementTree as ET

import pandas as pd

from bs4 import BeautifulSoup

url = 'http://ec.europa.eu/eurostat/SDMX/diss-web/rest/data/DS-575274/M.003.0001.22041011..1.VALUE_1000EURO/?startperiod=2015-01'

xml_data = requests.get(url).content

soup = BeautifulSoup(xml_data,"lxml-xml")

動画解説

DEMOTOURS

複数のグラフを重ねる

2018年10月11日 by 河副太智 Leave a Comment

ヒートマップを使用して複数のグラフを重ねる

tools.make_subplots
でrows=1, cols=3,と設定

shared_yaxes = True
でy軸の値を複数のグラフで共通で使用できる

次に各グラフの位置をappend_tradeで指定
先ほどのtools.make_subplotsでrows=1, cols=3,と設定したので
これに対応した位置指定をします。

fig.append_trace(trace1, 1, 1)
はtrace1のグラフを1行目の1列と指定（行は元々1しかない)
fig.append_trace(trace2, 1, 2)
はtrace2のグラフを1行目の2列と指定
fig.append_trace(trace3, 1, 3)
はtrace3のグラフを1行目の3列と指定

これでfigに３つのグラフが挿入された事になる

#######
# Side-by-side heatmaps for Sitka, Alaska,
# Santa Barbara, California and Yuma, Arizona
# using a shared temperature scale.
######
import plotly.offline as pyo
import plotly.graph_objs as go
from plotly import tools
import pandas as pd

df1 = pd.read_csv('../data/2010SitkaAK.csv')
df2 = pd.read_csv('../data/2010SantaBarbaraCA.csv')
df3 = pd.read_csv('../data/2010YumaAZ.csv')

trace1 = go.Heatmap(
    x=df1['DAY'],
    y=df1['LST_TIME'],
    z=df1['T_HR_AVG'],
    colorscale='Jet',
    zmin = 5, zmax = 40 # add max/min color values to make each plot consistent
)
trace2 = go.Heatmap(
    x=df2['DAY'],
    y=df2['LST_TIME'],
    z=df2['T_HR_AVG'],
    colorscale='Jet',
    zmin = 5, zmax = 40
)
trace3 = go.Heatmap(
    x=df3['DAY'],
    y=df3['LST_TIME'],
    z=df3['T_HR_AVG'],
    colorscale='Jet',
    zmin = 5, zmax = 40
)

fig = tools.make_subplots(rows=1, cols=3,
    subplot_titles=('Sitka, AK','Santa Barbara, CA', 'Yuma, AZ'),
    shared_yaxes = True,  # this makes the hours appear only on the left
)
fig.append_trace(trace1, 1, 1)
fig.append_trace(trace2, 1, 2)
fig.append_trace(trace3, 1, 3)

fig['layout'].update(      # access the layout directly!
    title='Hourly Temperatures, June 1-7, 2010'
)
pyo.plot(fig, filename='AllThree.html')

#######

# Side-by-side heatmaps for Sitka, Alaska,

# Santa Barbara, California and Yuma, Arizona

# using a shared temperature scale.

######

import plotly.offline as pyo

import plotly.graph_objs as go

from plotly import tools

import pandas as pd

df1 = pd.read_csv('../data/2010SitkaAK.csv')

df2 = pd.read_csv('../data/2010SantaBarbaraCA.csv')

df3 = pd.read_csv('../data/2010YumaAZ.csv')

trace1 = go.Heatmap(

x=df1['DAY'],

y=df1['LST_TIME'],

z=df1['T_HR_AVG'],

colorscale='Jet',

zmin = 5, zmax = 40 # add max/min color values to make each plot consistent

)

trace2 = go.Heatmap(

x=df2['DAY'],

y=df2['LST_TIME'],

z=df2['T_HR_AVG'],

colorscale='Jet',

zmin = 5, zmax = 40

)

trace3 = go.Heatmap(

x=df3['DAY'],

y=df3['LST_TIME'],

z=df3['T_HR_AVG'],

colorscale='Jet',

zmin = 5, zmax = 40

)

fig = tools.make_subplots(rows=1, cols=3,

subplot_titles=('Sitka, AK','Santa Barbara, CA', 'Yuma, AZ'),

shared_yaxes = True, # this makes the hours appear only on the left

)

fig.append_trace(trace1, 1, 1)

fig.append_trace(trace2, 1, 2)

fig.append_trace(trace3, 1, 3)

fig['layout'].update( # access the layout directly!

title='Hourly Temperatures, June 1-7, 2010'

)

pyo.plot(fig, filename='AllThree.html')

Dashをデプロイして簡単なグラフを表示

2018年10月11日 by 河副太智 Leave a Comment

Flaskをdigitalocean(ubuntu18)にインストールの続き
前回の作業でipアドレスをブラウザに打ち込んだ結果
以下のように作動するようになったので今回は
実際にdashグラフを動かしてみる

dashのコンポーネント等をインストールする

sudo pip3.6 install dash dash-renderer dash-html-components 
dash-core-components plotly

1 2	sudo pip3.6 install dash dash-renderer dash-html-components dash-core-components plotly

■pythonプログラムを書く

cd /var/www/FlaskApp/FlaskApp
へ移動し

nano __init__.py
に以下を書き込む

server = app.serverを必ず記述する

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Dash Tutorials'),
        dcc.Graph(
        id='example',
        figure={
            'data': [
                {'x': [1, 2, 3, 4, 5], 'y': [9, 6, 2, 1, 5], 'type': 'line', 'name': 'Boats'},
                {'x': [1, 2, 3, 4, 5], 'y': [8, 7, 2, 7, 3], 'type': 'bar', 'name': 'Cars'},
            ],
            'layout': {
                'title': 'Basic Dash Example'
            }
        }
    )
])

server = app.server

if __name__ == '__main__':
    app.run_server(debug=True)

import dash

import dash_core_components as dcc

import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[

html.H1(children='Dash Tutorials'),

dcc.Graph(

id='example',

figure={

'data': [

{'x': [1, 2, 3, 4, 5], 'y': [9, 6, 2, 1, 5], 'type': 'line', 'name': 'Boats'},

{'x': [1, 2, 3, 4, 5], 'y': [8, 7, 2, 7, 3], 'type': 'bar', 'name': 'Cars'},

'layout': {

'title': 'Basic Dash Example'

}

)

])

server = app.server

if __name__ == '__main__':

app.run_server(debug=True)

cd var/www/FlaskApp
へ移動し

nano FlaskApp.wsgi
で最後の一行をfrom FlaskApp import server as applicationに変更
元はfrom FlaskApp import app as applicationとなっていた

#!/usr/bin/python3.6
import sys
import logging
logging.basicConfig(stream=sys.stderr)
sys.path.insert(0,"/var/www/FlaskApp/")

from FlaskApp import server as application

#!/usr/bin/python3.6

import sys

import logging

logging.basicConfig(stream=sys.stderr)

sys.path.insert(0,"/var/www/FlaskApp/")

from FlaskApp import server as application

■python実行

service apache2 reload
cd /var/www/FlaskApp/FlaskApp
python3.6 __init__.py

Dashで複数のインプット

2018年10月1日 by 河副太智 Leave a Comment

複数のドロップダウンメニューを設置して
それぞれの選択項目によってグラフが変わるパターンを紹介します。

コード

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd

df = pd.read_csv('mpg.csv')

app= dash.Dash()
features = df.columns

app.layout = html.Div([
    html.Div([
        dcc.Dropdown(id="xaxis",options=[{"label":i,"value":i}for i in features],value="displacement")
    ],style={"width":"48%","display":"inline-block"}),
    html.Div([
        dcc.Dropdown(id="yaxis",options=[{"label":i,"value":i}for i in features],value="mpg")
    ],style={"width":"48%","display":"inline-block"}),
    dcc.Graph(id="feature-graphic")
],style={"padding":10})

@app.callback(Output("feature-graphic","figure"),
             [Input("xaxis","value"),
             Input("yaxis","value")])


def update_graph(xaxis_name,yaxis_name):
    return{"data":[go.Scatter(x=df[xaxis_name],
                             y=df[yaxis_name],
                             text=df["name"],
                             mode="markers",
                             marker={"size":15,
                                    "opacity":0.5,
                                    "line":{"width":0.5,"color":"white"}})
                             ]
           ,"layout":go.Layout(title="My Dashboard for MPG",
          xaxis={"title":xaxis_name},
          yaxis={"title":yaxis_name},
                              hovermode="closest"),
          }

if __name__ == '__main__':
    app.run_server()

import dash

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output

import plotly.graph_objs as go

import pandas as pd

df = pd.read_csv('mpg.csv')

app= dash.Dash()

features = df.columns

app.layout = html.Div([

html.Div([

dcc.Dropdown(id="xaxis",options=[{"label":i,"value":i}for i in features],value="displacement")

],style={"width":"48%","display":"inline-block"}),

html.Div([

dcc.Dropdown(id="yaxis",options=[{"label":i,"value":i}for i in features],value="mpg")

],style={"width":"48%","display":"inline-block"}),

dcc.Graph(id="feature-graphic")

],style={"padding":10})

@app.callback(Output("feature-graphic","figure"),

[Input("xaxis","value"),

Input("yaxis","value")])

def update_graph(xaxis_name,yaxis_name):

return{"data":[go.Scatter(x=df[xaxis_name],

y=df[yaxis_name],

text=df["name"],

mode="markers",

marker={"size":15,

"opacity":0.5,

"line":{"width":0.5,"color":"white"}})

]

,"layout":go.Layout(title="My Dashboard for MPG",

xaxis={"title":xaxis_name},

yaxis={"title":yaxis_name},

hovermode="closest"),

}

if __name__ == '__main__':

app.run_server()

Dashでドロップダウンメニュー

2018年9月28日 by 河副太智 Leave a Comment

Dashでドロップダウンメニューを設定します。

使用データは世界各国のGDP、寿命、人口データです。
csvデータ：gapminderDataFiveYear

ドロップダウンメニューは「年」を選択し、
各年度ごとのグラフが表示されるようにします。

year_options = []
for year in df['year'].unique():
    year_options.append({'label':str(year),'value':year})

app.layout = html.Div([
    dcc.Graph(id='graph'),
    dcc.Dropdown(id='year-picker',options=year_options,value=df['year'].min())
])

year_options = []

for year in df['year'].unique():

year_options.append({'label':str(year),'value':year})

app.layout = html.Div([

dcc.Graph(id='graph'),

dcc.Dropdown(id='year-picker',options=year_options,value=df['year'].min())

])

データフレームに格納した後、yearカラムを.unique()で分別します。
これは重複する年度があるためです。

次にコールバックでドロップダウンメニューにて選択された値に応じた
データ表示の詳細を設定します。

@app.callback(Output('graph', 'figure'),
              [Input('year-picker', 'value')])
def update_figure(selected_year):
    filtered_df = df[df['year'] == selected_year]
    traces = []
    for continent_name in filtered_df['continent'].unique():
        df_by_continent = filtered_df[filtered_df['continent'] == continent_name]
        traces.append(go.Scatter(
            x=df_by_continent['gdpPercap'],
            y=df_by_continent['lifeExp'],
            text=df_by_continent['country'],
            mode='markers',
            opacity=0.7,
            marker={'size': 15},
            name=continent_name
        ))

    return {
        'data': traces,
        'layout': go.Layout(
            xaxis={'type': 'log', 'title': 'GDP Per Capita'},
            yaxis={'title': 'Life Expectancy'},
            hovermode='closest'
        )
    }

@app.callback(Output('graph', 'figure'),

[Input('year-picker', 'value')])

def update_figure(selected_year):

filtered_df = df[df['year'] == selected_year]

traces = []

for continent_name in filtered_df['continent'].unique():

df_by_continent = filtered_df[filtered_df['continent'] == continent_name]

traces.append(go.Scatter(

x=df_by_continent['gdpPercap'],

y=df_by_continent['lifeExp'],

text=df_by_continent['country'],

mode='markers',

opacity=0.7,

marker={'size': 15},

name=continent_name

))

return {

'data': traces,

'layout': go.Layout(

xaxis={'type': 'log', 'title': 'GDP Per Capita'},

yaxis={'title': 'Life Expectancy'},

hovermode='closest'

)

}

コールバックを使用してドロップダウンメニューを選べばすぐに
関数の内容が実行されます。
returnで帰ってきた値がグラフに反映されます。

実行結果：

コード全体：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd

df = pd.read_csv('gapminderDataFiveYear.csv')



app = dash.Dash()


# # https://dash.plot.ly/dash-core-components/dropdown
# # We need to construct a dictionary of dropdown values for the years
year_options = []
for year in df['year'].unique():
    year_options.append({'label':str(year),'value':year})

app.layout = html.Div([
    dcc.Graph(id='graph'),
    dcc.Dropdown(id='year-picker',options=year_options,value=df['year'].min())
])

@app.callback(Output('graph', 'figure'),
              [Input('year-picker', 'value')])
def update_figure(selected_year):
    filtered_df = df[df['year'] == selected_year]
    traces = []
    for continent_name in filtered_df['continent'].unique():
        df_by_continent = filtered_df[filtered_df['continent'] == continent_name]
        traces.append(go.Scatter(
            x=df_by_continent['gdpPercap'],
            y=df_by_continent['lifeExp'],
            text=df_by_continent['country'],
            mode='markers',
            opacity=0.7,
            marker={'size': 15},
            name=continent_name
        ))

    return {
        'data': traces,
        'layout': go.Layout(
            xaxis={'type': 'log', 'title': 'GDP Per Capita'},
            yaxis={'title': 'Life Expectancy'},
            hovermode='closest'
        )
    }

if __name__ == '__main__':
    app.run_server()

import dash

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output

import plotly.graph_objs as go

import pandas as pd

df = pd.read_csv('gapminderDataFiveYear.csv')

app = dash.Dash()

# # https://dash.plot.ly/dash-core-components/dropdown

# # We need to construct a dictionary of dropdown values for the years

year_options = []

for year in df['year'].unique():

year_options.append({'label':str(year),'value':year})

app.layout = html.Div([

dcc.Graph(id='graph'),

dcc.Dropdown(id='year-picker',options=year_options,value=df['year'].min())

])

@app.callback(Output('graph', 'figure'),

[Input('year-picker', 'value')])

def update_figure(selected_year):

filtered_df = df[df['year'] == selected_year]

traces = []

for continent_name in filtered_df['continent'].unique():

df_by_continent = filtered_df[filtered_df['continent'] == continent_name]

traces.append(go.Scatter(

x=df_by_continent['gdpPercap'],

y=df_by_continent['lifeExp'],

text=df_by_continent['country'],

mode='markers',

opacity=0.7,

marker={'size': 15},

name=continent_name

))

return {

'data': traces,

'layout': go.Layout(

xaxis={'type': 'log', 'title': 'GDP Per Capita'},

yaxis={'title': 'Life Expectancy'},

hovermode='closest'

)

}

if __name__ == '__main__':

app.run_server()

Dashのコールバック

2018年9月28日 by 河副太智 Leave a Comment

Dashのコールバックを使ってテキストフィールドに入力された
値を別の場所にリアルタイムに表示してみます。

レイアウトを以下のように設定し、インプットするフォームに
“my-id”と名前を付けます。
また、空のhtmlフィールドを用意して”my-div”と名前を付けます。

app.layout = html.Div([
    dcc.Input(id="my-id",value="Inisitoa Text",type="text"),
    html.Div(id="my-div")
    
])

app.layout = html.Div([

dcc.Input(id="my-id",value="Inisitoa Text",type="text"),

html.Div(id="my-div")

])

次にコールバックの設定です。

@app.callback(Output(component_id="my-div",component_property="children"),
             [Input(component_id="my-id",component_property="value")])
def updata_output_div(input_value):
    return "You enterd:{}".format(input_value)

@app.callback(Output(component_id="my-div",component_property="children"),

[Input(component_id="my-id",component_property="value")])

def updata_output_div(input_value):

return "You enterd:{}".format(input_value)

Output、つまり出力先は先ほど指定したhtmlの空フィールド”my-div”に
向けているのでテキスト入力フォームの直下にアウトプットされた値が
表示されるという意味になります。

Inputはdcc.Input()で設定した”my-id”から来たものがインプットである
と定義します。

このように設定すると表示されたテキストフォームに文字列を
入力すると、フォーム直下の空htmlフィールドに入力した文字列が
即座に反映されます。

コード

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id="my-id",value="Inisitoa Text",type="text"),
    html.Div(id="my-div")
    
])

@app.callback(Output(component_id="my-div",component_property="children"),
             [Input(component_id="my-id",component_property="value")])
def updata_output_div(input_value):
    return "You enterd:{}".format(input_value)


if __name__ == '__main__':
    app.run_server()

import dash

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input,Output

app = dash.Dash()

app.layout = html.Div([

dcc.Input(id="my-id",value="Inisitoa Text",type="text"),

html.Div(id="my-div")

])

@app.callback(Output(component_id="my-div",component_property="children"),

[Input(component_id="my-id",component_property="value")])

def updata_output_div(input_value):

return "You enterd:{}".format(input_value)

if __name__ == '__main__':

app.run_server()