Skip to content

Commit 1ee60dc

Browse files
Jacq4nnJacq4nn
committed
Removed comments, changed dash title, removed spacing after =
1 parent 5083027 commit 1ee60dc

File tree

1 file changed

+53
-61
lines changed

1 file changed

+53
-61
lines changed

‎src/app.py‎

Lines changed: 53 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,19 @@
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,
@@ -32,38 +30,31 @@
3230

3331
}
3432

35-
CONTENT_STYLE = {
33+
CONTENT_STYLE={
3634
"margin-left": "20rem",
3735
"z-index": -1,
3836
}
39-
# Structure of app, including selection criteria components
4037

41-
# Formatting NavBar
42-
navbar = dbc.Navbar(
38+
navbar=dbc.Navbar(
4339
dbc.Container(
4440
[
4541
html.A(
46-
# Use row and col to control vertical alignment of logo / brand
4742
dbc.Row(
4843
[
49-
# dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
5044
dbc.Col(dbc.NavbarBrand("Tsunami Events Dashboard")),
5145
],
5246
align="center",
5347
className="g-0",
5448
),
55-
# href="https://plotly.com",
56-
# style={"textDecoration": "none"},
5749
),
5850
dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
5951
dbc.Collapse(
60-
# search_bar,
6152
id="navbar-collapse",
6253
is_open=False,
6354
navbar=True,
6455
),
6556
],
66-
style = {
57+
style={
6758
'margin-left': '1.2rem',
6859
'font-weight': "600"
6960
}
@@ -72,97 +63,97 @@
7263
dark=True,
7364
)
7465

75-
world_plot_card = dbc.Card(
66+
world_plot_card=dbc.Card(
7667
dbc.CardBody(
77-
[html.H6('Total Tsunami Hits by Country with Origin Points', className = 'card-title',
78-
style = {'margin-bottom': '0px'}),
68+
[html.H6('Total Tsunami Hits by Country with Origin Points', className='card-title',
69+
style={'margin-bottom': '0px'}),
7970
html.Iframe(
8071
id='map_plot',
8172
style={'border-width': '0', 'height': '390px', 'width': '100%'},
8273
srcDoc=create_map_plot(year_start=1800, year_end=2022, countries=[]))
83-
], style = {'padding': '15px', 'padding-bottom': '0px'}
74+
], style={'padding': '15px', 'padding-bottom': '0px'}
8475
),
85-
style = {'padding': 0}
76+
style={'padding': 0}
8677
)
8778

88-
scatter_plot_card = dbc.Card(
79+
scatter_plot_card=dbc.Card(
8980
dbc.CardBody(
90-
[html.H6('Top 10 Countries\' Total Deaths by Earthquake Magnitude', className = 'card-title',
91-
style = {'margin-bottom': '0px'}),
81+
[html.H6('Top 10 Countries\' Total Deaths by Earthquake Magnitude', className='card-title',
82+
style={'margin-bottom': '0px'}),
9283
html.Iframe(
93-
id = 'scatter_plot',
84+
id='scatter_plot',
9485
style={'border-width': '0', 'height': '250px','width': '100%'},
9586
srcDoc=create_scatter_plot(year_start=1800, year_end=2022, countries=[])
96-
)], style = {'padding': '15px', 'padding-bottom': '0px'}
87+
)], style={'padding': '15px', 'padding-bottom': '0px'}
9788
),
98-
style = {'padding': 0}
89+
style={'padding': 0}
9990
)
10091

101-
bar_chart_card = dbc.Card(
92+
bar_chart_card=dbc.Card(
10293
dbc.CardBody(
103-
[html.H6('10 Most Intense Tsunamis by Country', className = 'card-title',
104-
style = {'margin-bottom': '0px'}),
94+
[html.H6('10 Most Intense Tsunamis by Country', className='card-title',
95+
style={'margin-bottom': '0px'}),
10596
html.Iframe(
106-
id = 'bar_plot',
97+
id='bar_plot',
10798
style={'border-width': '0', 'height': '250px','width': '100%'},
10899
srcDoc=create_bar_plot(year_start=1800, year_end=2022)
109-
)], style = {'padding': '15px', 'padding-bottom': '0px'}
100+
)], style={'padding': '15px', 'padding-bottom': '0px'}
110101
),
111-
style = {'padding': 0}
102+
style={'padding': 0}
112103
)
113104

114-
app.layout = dbc.Container([
105+
app.layout=dbc.Container([
115106
navbar,
116107
dbc.Row([
117108
dbc.Col([
118-
html.H5('Years and Countries Selection', className = 'form-label'),
109+
html.H5('Years and Countries Selection', className='form-label'),
119110
html.Hr(),
120-
html.H6('Years of Interest (1800 - 2022)', className = 'form-label'),
111+
html.H6('Years of Interest (1800 - 2022)', className='form-label'),
121112
dcc.RangeSlider(
122-
min = 1800,
123-
max = 2022,
124-
value = [tsunami_df['year'].min(), tsunami_df['year'].max()],
125-
marks = None,
113+
min=1800,
114+
max=2022,
115+
value=[tsunami_df['year'].min(), tsunami_df['year'].max()],
116+
marks=None,
126117
id='year_slider',
127-
allowCross = False, # Prevent handles from crossing each other
128-
tooltip = {'placement': 'bottom',
118+
allowCross=False,
119+
tooltip={'placement': 'bottom',
129120
'always_visible': True}),
130121
html.Br(),
131122
html.Br(),
132-
html.H6('Countries of Interest', className = 'form-label'),
123+
html.H6('Countries of Interest', className='form-label'),
133124
dcc.Dropdown(
134125
id='country_select',
135-
multi = True,
136-
value = [],
137-
options = [{'label': country, 'value': country} for country in country_list],
138-
className = 'text-dark'),
126+
multi=True,
127+
value=[],
128+
options=[{'label': country, 'value': country} for country in country_list],
129+
className='text-dark'),
139130
html.Hr(),
140131
html.P(
141132
"A data visualisation app that allows viewers to observe the number and intensity of tsunamis based on years and countries",
142-
className = 'form-label'
133+
className='form-label'
143134
)
144135
],
145-
style = SIDEBAR_STYLE,
146-
className = "btn btn-secondary"
136+
style=SIDEBAR_STYLE,
137+
className="btn btn-secondary"
147138
),
148139
dbc.Col([
149140
dbc.Row([
150141
world_plot_card
151-
], style = {'margin': 'auto', 'width': '820px', 'padding':'0px'}),
142+
], style={'margin': 'auto', 'width': '820px', 'padding':'0px'}),
152143
html.Br(),
153144
dbc.Row([
154145
dbc.Col([
155146
scatter_plot_card
156-
], style = {'margin': 'auto', 'width': '400px'}),
147+
], style={'margin': 'auto', 'width': '400px'}),
157148
dbc.Col([
158149
bar_chart_card
159-
], style = {'margin': 'auto', 'width': '400px'})
160-
],style = {'margin': 'auto', 'width': '1020px'})
150+
], style={'margin': 'auto', 'width': '400px'})
151+
],style={'margin': 'auto', 'width': '1020px'})
161152
],
162-
style = CONTENT_STYLE)
153+
style=CONTENT_STYLE)
163154
])
164-
], fluid = True,
165-
style = {
155+
], fluid=True,
156+
style={
166157
'backgroundColor': 'black',
167158
'padding': '0px',
168159
'height': '100vh',
@@ -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")],

0 commit comments

Comments
 (0)