Skip to content

Commit 246ad95

Browse files
vtaskaev1vtaskaev1
authored
Merge pull request #43 from UBC-MDS/feature/structure
Updated figure sizes
2 parents 6d7cf5d + 4674802 commit 246ad95

File tree

4 files changed

+70
-74
lines changed

4 files changed

+70
-74
lines changed

‎src/app.py‎

Lines changed: 62 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -7,166 +7,157 @@
77
import dash_bootstrap_components as dbc
88
import pandas as pd
99

10-
# Read in data
11-
tsunami_df = pd.read_csv('data/processed/tsunami-events.csv')
10+
tsunami_df=pd.read_csv('data/processed/tsunami-events.csv')
1211

13-
years = tsunami_df['year'].dropna().unique() # need to add start and end year
14-
countries = tsunami_df['country'].dropna().unique()
15-
country_list = sorted(list(countries)) # countries are listed alphabetically
12+
years=tsunami_df['year'].dropna().unique()
13+
countries=tsunami_df['country'].dropna().unique()
14+
country_list=sorted(list(countries))
1615

17-
app = dash.Dash(
18-
__name__, title = "Tsunami History", external_stylesheets=[dbc.themes.QUARTZ]
16+
app=dash.Dash(
17+
__name__, title="🌊 Tsunami Events 🌊", external_stylesheets=[dbc.themes.QUARTZ]
1918
)
2019

21-
server = app.server
20+
server=app.server
2221

23-
# Creating style for both sidebar and plots
24-
SIDEBAR_STYLE = {
22+
SIDEBAR_STYLE={
2523
"position": "fixed",
2624
"top": '62px',
2725
"left": 0,
2826
"bottom": 0,
2927
"width": "20rem",
30-
"padding": "2rem 1rem",
3128
"z-index": 4000000,
3229
'background-color': 'rgba(255,255,255,.25)'
3330

3431
}
3532

36-
CONTENT_STYLE = {
33+
CONTENT_STYLE={
3734
"margin-left": "20rem",
38-
"margin-right": "2rem",
3935
"z-index": -1,
4036
}
41-
# Structure of app, including selection criteria components
4237

43-
# Formatting NavBar
44-
navbar = dbc.Navbar(
38+
navbar=dbc.Navbar(
4539
dbc.Container(
4640
[
4741
html.A(
48-
# Use row and col to control vertical alignment of logo / brand
4942
dbc.Row(
5043
[
51-
# dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
52-
dbc.Col(dbc.NavbarBrand("Tsunami Events Dashboard", className="ms-2")),
44+
dbc.Col(dbc.NavbarBrand("Tsunami Events Dashboard")),
5345
],
5446
align="center",
5547
className="g-0",
5648
),
57-
# href="https://plotly.com",
58-
# style={"textDecoration": "none"},
5949
),
6050
dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
6151
dbc.Collapse(
62-
# search_bar,
6352
id="navbar-collapse",
6453
is_open=False,
6554
navbar=True,
6655
),
6756
],
68-
style = {
69-
'margin-left': '15px',
70-
'font-weight': "600"}
57+
style={
58+
'margin-left': '1.2rem',
59+
'font-weight': "600"
60+
}
7161
),
7262
color="dark",
7363
dark=True,
7464
)
7565

76-
world_plot_card = dbc.Card(
66+
world_plot_card=dbc.Card(
7767
dbc.CardBody(
78-
[html.H6('Total Tsunami Hits by Country with Origin Points', className = 'card-title',
79-
style = {'margin-bottom': '0px'}),
68+
[html.H6('Total Tsunami Hits by Country with Origin Points', className='card-title',
69+
style={'margin-bottom': '0px'}),
8070
html.Iframe(
8171
id='map_plot',
82-
style={'border-width': '0', 'height': '380px', 'width': '100%'},
72+
style={'border-width': '0', 'height': '390px', 'width': '100%'},
8373
srcDoc=create_map_plot(year_start=1800, year_end=2022, countries=[]))
84-
], style = {'padding': '15px', 'padding-bottom': '0px'}
74+
], style={'padding': '15px', 'padding-bottom': '0px'}
8575
),
86-
style = {'padding': 0}
76+
style={'padding': 0}
8777
)
8878

89-
scatter_plot_card = dbc.Card(
79+
scatter_plot_card=dbc.Card(
9080
dbc.CardBody(
91-
[html.H6('Total Deaths by Earthquake Magnitude', className = 'card-title',
92-
style = {'margin-bottom': '0px'}),
81+
[html.H6('Top 10 Countries\' Total Deaths by Earthquake Magnitude', className='card-title',
82+
style={'margin-bottom': '0px'}),
9383
html.Iframe(
94-
id = 'scatter_plot',
95-
style={'border-width': '0', 'height': '220px','width': '100%'},
84+
id='scatter_plot',
85+
style={'border-width': '0', 'height': '250px','width': '100%'},
9686
srcDoc=create_scatter_plot(year_start=1800, year_end=2022, countries=[])
97-
)], style = {'padding': '15px', 'padding-bottom': '0px'}
87+
)], style={'padding': '15px', 'padding-bottom': '0px'}
9888
),
99-
style = {'padding':0}
89+
style={'padding': 0}
10090
)
10191

102-
bar_chart_card = dbc.Card(
92+
bar_chart_card=dbc.Card(
10393
dbc.CardBody(
104-
[html.H6('Top 10 most intense tsunami in given years', className = 'card-title',
105-
style = {'margin-bottom': '0px'}),
94+
[html.H6('10 Most Intense Tsunamis by Country', className='card-title',
95+
style={'margin-bottom': '0px'}),
10696
html.Iframe(
107-
id = 'bar_plot',
108-
style={'border-width': '0', 'height': '220px','width': '100%'},
97+
id='bar_plot',
98+
style={'border-width': '0', 'height': '250px','width': '100%'},
10999
srcDoc=create_bar_plot(year_start=1800, year_end=2022)
110-
)], style = {'padding': '15px', 'padding-bottom': '0px'}
100+
)], style={'padding': '15px', 'padding-bottom': '0px'}
111101
),
112-
style = {'padding':0}
102+
style={'padding': 0}
113103
)
114104

115-
app.layout = dbc.Container([
105+
app.layout=dbc.Container([
116106
navbar,
117107
dbc.Row([
118108
dbc.Col([
119-
html.H5('Years and Countries Selection', className = 'form-label'),
109+
html.H5('Years and Countries Selection', className='form-label'),
120110
html.Hr(),
121-
html.H6('Years of Interest (1800 - 2022)', className = 'form-label'),
111+
html.H6('Years of Interest (1800 - 2022)', className='form-label'),
122112
dcc.RangeSlider(
123-
min = 1800,
124-
max = 2022,
125-
value = [tsunami_df['year'].min(), tsunami_df['year'].max()],
126-
marks = None,
113+
min=1800,
114+
max=2022,
115+
value=[tsunami_df['year'].min(), tsunami_df['year'].max()],
116+
marks=None,
127117
id='year_slider',
128-
allowCross = False, # Prevent handles from crossing each other
129-
tooltip = {'placement': 'bottom',
118+
allowCross=False,
119+
tooltip={'placement': 'bottom',
130120
'always_visible': True}),
131121
html.Br(),
132122
html.Br(),
133-
html.H6('Countries of Interest', className = 'form-label'),
123+
html.H6('Countries of Interest', className='form-label'),
134124
dcc.Dropdown(
135125
id='country_select',
136-
multi = True,
137-
value = [],
138-
options = [{'label': country, 'value': country} for country in country_list],
139-
className = 'text-dark'),
126+
multi=True,
127+
value=[],
128+
options=[{'label': country, 'value': country} for country in country_list],
129+
className='text-dark'),
140130
html.Hr(),
141131
html.P(
142132
"A data visualisation app that allows viewers to observe the number and intensity of tsunamis based on years and countries",
143-
className = 'form-label'
133+
className='form-label'
144134
)
145135
],
146-
style = SIDEBAR_STYLE,
147-
className = "btn btn-secondary"
136+
style=SIDEBAR_STYLE,
137+
className="btn btn-secondary"
148138
),
149139
dbc.Col([
150140
dbc.Row([
151141
world_plot_card
152-
], style = {'margin': 'auto', 'width': '800px', 'padding':'0px'}),
142+
], style={'margin': 'auto', 'width': '820px', 'padding':'0px'}),
153143
html.Br(),
154144
dbc.Row([
155145
dbc.Col([
156146
scatter_plot_card
157-
], style = {'margin': 'auto', 'width': '400px'}),
147+
], style={'margin': 'auto', 'width': '400px'}),
158148
dbc.Col([
159149
bar_chart_card
160-
], style = {'margin': 'auto', 'width': '400px'})
161-
],style = {'margin': 'auto', 'width': '1020px'})
150+
], style={'margin': 'auto', 'width': '400px'})
151+
],style={'margin': 'auto', 'width': '1020px'})
162152
],
163-
style = CONTENT_STYLE)
153+
style=CONTENT_STYLE)
164154
])
165-
], fluid = True,
166-
style = {
155+
], fluid=True,
156+
style={
167157
'backgroundColor': 'black',
168158
'padding': '0px',
169-
'height': '100vh'
159+
'height': '100vh',
160+
"overflow": "hidden"
170161
})
171162

172163
# App callback for map_plot
@@ -195,6 +186,7 @@ def update_scatter_plot(value, value_country):
195186
def update_bar_plot(value):
196187
return create_bar_plot(value[0], value[1])
197188

189+
# App callback for navbar
198190
@app.callback(
199191
Output("navbar-collapse", "is_open"),
200192
[Input("navbar-toggler", "n_clicks")],

‎src/components/dropdown.py‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@ def create_bar_plot(year_start, year_end):
5353
y=alt.Y('tsunami_instance:N', sort = '-x', title = 'Country', axis = alt.Axis(labelExpr="datum.country")),
5454
color=alt.Color('country:O'),
5555
tooltip=("country:O", "location_name:O", "tsunami_intensity:Q", "earthquake_magnitude:Q", "year:Q", "month:O")
56-
).properties(width=240, height=160)
57-
tooltip=("country:O", "location_name:O", "tsunami_intensity:Q", "earthquake_magnitude:Q", "year:Q", "month:O"))
56+
).properties(width=250, height=180)
5857

5958
text = chart.mark_text(align="left", baseline="middle", dx = 3).encode(
6059
text= 'combine:O')

‎src/components/map_plot.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ def create_map_plot(year_start, year_end, countries):
3030
tooltip=[alt.Tooltip("name:N", title="Country"),
3131
alt.Tooltip("count:Q", title="Total Tsunami Hits")])
3232
.project("naturalEarth1")
33-
.properties(width=700, height=350)
33+
.properties(width=730, height=350)
3434
)
3535

3636
tsunami_events["legend"] = "Tsunami Origin"

‎src/components/scatter_plot.py‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,12 @@ def create_scatter_plot(year_start=1900, year_end=2022, countries=[]):
1515
color='country',
1616
tooltip=['year', 'mercalli_intensity', 'country', 'total_deaths']
1717
).interactive(
18-
).properties(width=180, height=150)
18+
).properties(
19+
width=200, height=175
20+
).configure_legend(
21+
titleFontSize=10,
22+
labelFontSize=7
23+
)
1924
return chart.to_html()
2025

2126

0 commit comments

Comments
 (0)