I created a visualization site for GDP (Gross Domestic Product) using DASH!
What was this article
I'm starting to learn data analysis and so on. And since I learned Dash, which is one of the Python frameworks, I decided to create a site that visualizes some data using Dash. I will summarize the process in this article!
Visualization of GDP data
** I decided to visualize the GDP data. ** I don't want to visualize GDP data separately, but I thought about what kind of data to visualize, but I couldn't think of anything, so ** Japan ** / ** America ** / ** China In addition to **, I decided to visualize the GDP data of ** Netherlands ** where I live now.
Data collection
** GDP data was collected from this site. GLOBAL NOTE ** (https://www.globalnote.jp/post-1409.html) Actually, I wanted to visualize the data scraped using Beutiful Soup by dropping it into CSV data, but I couldn't really find the data that I wanted to visualize with open data.
So, from this site, ** I wrote the data one by one to Excel and built the CSV data. ** **
Check the data with Jupyter Notebook
python
import pandas as pd
gdp_data = pd.read_csv('GDP_data.csv', sep=';')
gdp_data.head()
Data information
・ The unit is one million US dollars. -Total nominal GDP (gross domestic product) based on IMF statistics. ・ Conversion to US dollars is based on the average exchange rate for each year
python
gdp_data['Japan']
By doing this, the data stored in the Japan column can be retrieved.
Preparing for DASH
Preparing Dash is very easy. Follow the instructions on the site below. That said, I just do pip install ... https://dash.plot.ly/installation
Coding visualise.py
From here, we will create a file that visualizes the data using Dash. The following must be imported with the libraries required to use Dash.
visualise.py
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 specifies the location of external CSS. I put the generated instance in the app. After the if minute, the function to set up the server is executed, but if debug is set to True, it is convenient because you can check the displayed site while making changes to this file.
We will give data here and visualize it.
Pass the data to DASH.
visualise.py
gdp_data = pd.read_csv('GDP_data.csv', sep=';')
By inserting this after importing it, the data will be converted from csv to a data frame.
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'
)
]
}
)
])
Put these after the app variable. It is clearly stated that the graph is used as the layout in the app by using go.Scatter. You can visualize the data by putting the x-axis and y-axis data in go.Scater. Let's take a look.
$ python3 visualise.py
At this stage, such a graph has been completed. It looks very good and it's easy! ?? It is very good that some graphs have already been implemented with useful functions. (If you press Japan, only the graph of Japan disappears)
Adjust the layout a little
'layout': go.Layout(
xaxis = {'title': 'Time'},
yaxis = {'title': 'GDP'},
width = 1000,
height = 500
)
You can also add a'layout' after the'data' to see the layout for the displayed data.
I was able to name the Y and X axes!
further...
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',
}),
You can also add html elements to the app like this.
You can easily add explanations, etc. Kurushunai
Finally
This time I made a little data visualization site. It's still easy to get started, but the strong point of python is that you can visualize data relatively well even with this kind of knowledge.
Also, I thought I'd publish it on Heroku, but it didn't work so I wrote this article.
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)
Recommended Posts