[PYTHON] Create a layout by combining Dash and Bootstrap
It also serves as a memorandum for amateurs. Please pardon.
Last time https://qiita.com/Naoya_Study/items/507cf063a9300e9e41f6
Today's completed form is here ↓ ↓
1. Install Dash Bootstrap Components
There is a library that allows you to use Bootstrap within the Python framework Dash. This time I will use it to make a very simple 2x2 layout.
The library used is Dash Bootstrap Components. https://dash-bootstrap-components.opensource.faculty.ai/ Install it.
pip install dash-bootstrap-components
The basic template looks like this. Create a layout by adding elements to dbc.Container.
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container("""I will add various elements here""")
if __name__ == "__main__":
app.run_server(debug=True)
2. Make a simple layout
Now let's actually write a 2x2 layout.
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[ dbc.Row(
[
dbc.Col(
html.H1("Title here!"),
style={"background-color": "pink"}
)
],
className="h-30"
),
dbc.Row(
[
dbc.Col(
html.P("world map!"),
width=7,
style={"height": "100%", "background-color": "red"},
),
dbc.Col(
html.P("List of infected people by country!"),
width=5,
style={"height": "100%", "background-color": "green"},
),
],
className="h-50"
),
dbc.Row(
[
dbc.Col(
html.P("Map of Japan!"),
width=7,
style={"height": "100%", "background-color": "blue"},
),
dbc.Col(
html.P("Bar graph of changes in the number of infected people in Japan!"),
width=5,
style={"height": "100%", "background-color": "cyan"},
),
],
className="h-50",
),
],
style={"height": "90vh"},
)
if __name__ == "__main__":
app.run_server(debug=True)
className="h-50"
This 50 means 50 percent of the height.
style={"height": "90vh"}
vh stands for "viewport height" and means 90% of the screen height (maybe)
3. Insert the graph
We will insert the previously created figure according to this layout. Basically just replace html.P () with the created dcc.Graph ().
#rewrite
html.P()
↓
dcc.Graph()
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import requests, io, re
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
from datetime import datetime as dt
import dash_table
import dash_core_components as dcc
from corona_def import Get_Df, Df_Merge, Df_Count_by_Date, Df_Globe_Merge
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[ dbc.Row(
[
dbc.Col(
html.H1("Novel Coronavirus (COVID-19) Situation"),
style = {
"size": "30px",
"background-color": "#1b1935",
"color": "white",
"textAlign": "center",
}
)
],
className = "h-30"
),
dbc.Row(
[
dbc.Col(
html.H4("Number of infected people in the world"),
width = 7,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "left",
"padding": "10px"
},
),
dbc.Col(
html.H4(""),
width = 5,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "center"
},
),
],
className = "h-8"
),
dbc.Row(
[
dbc.Col(
dcc.Graph(
id = 'WorldMap',
figure = {
'data' : [
go.Choropleth(
locations = df_globe_merge['code'],
z = df_globe_merge['Confirmed'],
text = df_globe_merge['COUNTRY'],
colorscale = 'Plasma',
marker_line_color ='darkgray',
marker_line_width = 0.5,
colorbar_title = 'Number of infected people',
)
],
'layout' : go.Layout(
template = "ggplot2",
width = 600,
height = 270,
title = {
'font': {'size': 25},
'y': 0.9,
'x': 0.5,
'xanchor': 'center',
'yanchor': 'top'
},
margin={'b': 5, 'l': 5, 'r': 5, 't': 5},
geo={"projection_type": 'equirectangular'}
)
}
),
width = 7,
style = {
"height": "100%",
"background-color": "white",
"border-color": "white",
"border-width":"10px"
},
),
dbc.Col(
dash_table.DataTable(
columns = [{"name": i, "id": i} for i in df_globe.columns],
data = df_globe.to_dict('records'),
style_header = {'backgroundColor': '#eae6e8'},
style_cell = {
'backgroundColor': '#fbf9f7',
'color': 'black',
'font-size': '15px',
'textAlign': 'center'
},
style_table = {
'maxHeight': '300px',
'overflowY': 'scroll',
'overflowX': 'hidden',
},
),
width = 5,
style = {"height": "100%"}
),
],
className = "h-50"
),
dbc.Row(
[
dbc.Col(
html.H4("Domestic infected person distribution"),
width = 7,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "left",
"padding":"10px"
},
),
dbc.Col(
html.H4("Cumulative number of infected people in Japan"),
width = 5,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "left",
"padding":"13px"
},
),
],
className = "h-30"
),
dbc.Row(
[
dbc.Col(
dcc.Graph(
id = 'JapMap',
figure = {
'data' : [
go.Scattergeo(
lat = df_merge["latitude"],
lon = df_merge["longitude"],
mode = 'markers',
marker = {
"color": 'red',
"size": df_merge['China']/5+6,
"opacity": 0.8,
"reversescale": True,
"autocolorscale": False
},
hovertext = df_merge['text'],
hoverinfo = "text"
)
],
'layout' : go.Layout(
width = 600,
height = 270,
template = "ggplot2",
title = {
'font': {'size':25},
'y': 0.9,
'x': 0.5,
'xanchor': 'center',
'yanchor': 'top'},
margin = {'b': 1, 'l': 1, 'r': 1, 't': 1},
geo = dict(
resolution = 50,
landcolor = 'rgb(204, 204, 204)',
coastlinewidth = 1,
lataxis = dict(range = [28, 47]),
lonaxis = dict(range = [125, 150]),
)
)
}
),
width = 7,
style = {"height": "100%",},
),
dbc.Col(
dcc.Graph(
id = 'Number of infected people by prefecture',
figure = {
'data' : [
go.Bar(
name='Cumulative number up to the previous day',
x=df_count_by_date.index,
y=df_count_by_date['gap'],
),
go.Bar(
name='New number',
x=df_count_by_date.index,
y=df_count_by_date['China']
)
],
'layout' : go.Layout(
width = 450,
height = 270,
legend = {
'x': 0.05,
'y': 0.9,
'bordercolor': 'black',
'borderwidth': 1
},
barmode = 'stack',
template = "ggplot2",
margin = {'b': 5, 'l': 5, 'r': 5, 't': 5},
xaxis_title = None,
yaxis_title = "Number of infected people"
)
}
),
width = 5,
style = {"height": "100%"},
),
],
className = "h-50",
),
],
style = {"height": "90vh"},
)
if __name__ == "__main__":
app.run_server(debug=True)
For the time being, I was able to insert the graph as I drew it. The graph also moves interactively and is interesting. However, the appearance is still unfinished, so we will improve the visuals from the next time onwards.
Recommended Posts