Added Temp Diff Feature

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+klimainsights/data/biodiversity.geojson filter=lfs diff=lfs merge=lfs -text
+klimainsights/data/disaster.geojson filter=lfs diff=lfs merge=lfs -text
+klimainsights/data/temperature.geojson filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,4 @@
+**/EDA_temperature/*
+**/EDA_biodiversity/*
+**/EDA_disaster/*
+**/raw_data/*

Dockerfile

@@ -0,0 +1,35 @@
+FROM python:3.11.8
+
+# Create non-root group and user
+RUN addgroup --system dash_app \
+  && adduser --system --home /var/cache/dash_app --ingroup dash_app --uid 1001 dashuser
+
+USER dashuser
+
+WORKDIR /dash_app/
+
+COPY --chown=dashuser requirements.txt /dash_app/
+
+# Elegantly activating a venv in Dockerfile: https://pythonspeed.com/articles/activate-virtualenv-dockerfile/
+ENV VIRTUAL_ENV=/dash_app/venv
+RUN python3 -m venv $VIRTUAL_ENV
+ENV PATH="$VIRTUAL_ENV/bin:$PATH"
+
+# Install requirements
+RUN pip install --trusted-host pypi.python.org -r requirements.txt
+
+COPY --chown=dashuser /klimainsights/ /dash_app/klimainsights/
+
+WORKDIR /dash_app/klimainsights/
+
+# set enviroment variables
+# This prevent Python from writing out pyc files
+ENV PYTHONDONTWRITEBYTECODE=1
+# This keeps Python from buffering stdin/stdout
+ENV PYTHONUNBUFFERED=1
+
+ENV ENV_FILE=".env"
+
+EXPOSE 7000
+
+ENTRYPOINT ["gunicorn", "index:server", "-b", "0.0.0.0:7860", "--workers=1"]

README.md

@@ -1,10 +1,65 @@
 ---
 title: Klima Insights
-emoji: 🏢
-colorFrom: blue
-colorTo: green
+emoji: 🌳
+colorFrom: green
+colorTo: indigo
 sdk: docker
 pinned: false
 ---
 
+# DATA101 Final Application
+
+This is the repository for the data visualization application made from Plotly Dash for the DATA101 Final Project
+
+## Consolidated EDA Files
+
+All files that are used to do Exploratory Data Analysis is stored in this [Google Drive Link](https://drive.google.com/drive/folders/16gl_XkzblRBFiXGtehRJmr24hS63GvAw?usp=sharing)
+
+## How to Run the Application
+
+### Prerequisites:
+
+- Preferred if Python and Anaconda is installed in the system
+- Can run `pip` and `conda` commands
+- Can create a virtual environment to ensure no dependency errors (optional)
+
+### Creating a Virtual Environment with Conda
+
+- Open Command Line Interface `cmd`
+- Create a conda environment by running:
+
+```bash
+  conda create --name <name of your choice> python=3.11.8
+```
+
+- Activate the environment if it is not yet activated. It should show "(name of your choice)" before the path in your CLI.
+
+```bash
+  conda activate <name of your choice>
+```
+
+### Installing Dependencies for the application
+
+- In your CLI, go to the root directory of the repository. There should be a requirements.txt file there.
+- Install dependencies by running the following commands: (Note that you should still be inside your virtual environment)
+  ```bash
+  conda install -c conda-forge gdal
+  ```
+  ```bash
+  pip install -r requirements.txt
+  ```
+- If there are no errors, you should be able to run the app smoothly along with the EDA files.
+- Remember to run everything inside your virtual environment.
+
+### Running the Application
+
+- go to the `/klimainsights` directory
+- Run:
+
+```bash
+python index.py
+```
+
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+App deployed using Docker and Hugging Face.

klimainsights/app.py

@@ -0,0 +1,11 @@
+from dash import Dash, html, page_container
+import dash_bootstrap_components as dbc
+
+APP_TITLE = "Klima Insights"
+
+app = Dash(__name__,
+            title=APP_TITLE,
+            update_title='Loading...',
+            suppress_callback_exceptions=True,
+            use_pages=True,
+            external_stylesheets=[dbc.themes.SOLAR, 'styles.css'])

klimainsights/assets/styles.css

@@ -0,0 +1,283 @@
+html, body  {
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    width: 100%;
+    max-width: 100%;
+    background: #222;
+    margin: 0;
+    padding: 0;           
+}
+
+#main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    justify-content: start;
+    align-items: center;
+}
+
+@media (max-width: 767px) {
+    .card {
+      width: 95%;
+    }
+    .scale-button {
+        transform: scale(1);
+    }
+    .full-width-container {
+      width: 85vw;
+    }
+    #temp-map {
+      width: 90vw;
+      height: 95vh;
+      margin: 0;
+      padding: 0;
+    }
+}
+@media (min-width: 768px) {
+    .card {
+      width: 70%;
+    }
+    .card:hover span {
+        top: 0;
+        font-size: 1.2em;
+    }
+    .card:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+    .card:hover>div,.card:hover>strong {
+        opacity: 0;
+    }
+    .scale-button {
+        transform: scale(0);
+    }
+    #temp-map {
+      width: 100%;
+      height: 95vh;
+      margin: 0;
+      padding: 0;
+    }
+}
+
+.card {
+    --hover-bg: white;
+    --hover-text: black;
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(5px);
+    text-align: center;
+    padding: 1.5em;
+    padding-block: 1.8em;
+    border-radius: 5px;
+    position: relative;
+    overflow: hidden;
+    transition: .3s cubic-bezier(.6,.4,0,1),transform .15s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+  }
+
+  .card__body {
+    color: #d8d8d8;
+    line-height: 1.5em;
+    font-size: 1.2em;
+  }
+  
+  .card > :not(span) {
+    transition: .3s cubic-bezier(.6,.4,0,1);
+  }
+  
+  .card > strong {
+    display: block;
+    font-size: 1.5rem;
+    letter-spacing: -.035em;
+  }
+  
+  .card span {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--hover-text);
+    border-radius: 5px;
+    font-weight: bold;
+    top: 100%;
+    transition: all .3s cubic-bezier(.6,.4,0,1);
+  }
+
+.full-height {
+    height: 100%;
+}
+
+.pt-5 {
+  padding-top: 5rem;
+}
+
+.full-width {
+  width: 95%;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.flex-gap-20 {
+  display: flex;
+  gap: 20px;
+}
+
+.temp-bar-container {
+  height: 800px;
+  min-height: 800px;
+}
+
+.disaster-map-height {
+  height: 55rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+/* BACKGROUND */
+#leaves {position:fixed;width:100%;height:100%;text-align: right;}
+
+#leaves i {
+    display: inline-block;
+    width: 200px;
+    height: 150px;
+    background: linear-gradient(to bottom right, #309900, #005600);
+    transform: skew(20deg);
+    border-radius: 5% 40% 70%;
+    box-shadow: inset 0px 0px 1px #222;
+    border: 1px solid #333;
+    z-index: 1;
+    -webkit-animation: falling 5s 0s infinite;
+}
+
+#leaves i:nth-of-type(2n) { -webkit-animation: falling2 5s 0s infinite; }
+#leaves i:nth-of-type(3n) { -webkit-animation: falling3 5s 0s infinite; }
+
+#leaves i:before {
+  position: absolute;
+  content: '';
+  top: 117px;
+  right: 9px;
+  height: 27px;
+  width: 32px;
+  transform: rotate(49deg);
+  border-radius: 0% 15% 15% 0%;
+  border-top: 1px solid #222;
+  border-bottom: 1px solid #222;
+  border-left: 0px solid #222;
+  border-right: 1px solid #222;
+  background: linear-gradient(to right, rgba(0,100,0,1), #005600);
+  z-index: 1;
+}
+
+#leaves i:after {
+  content: '';
+  height: 125px;
+  width: 10px;
+  background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0));
+  display: block;
+  transform: rotate(125deg);
+  position: absolute;
+  left: 85px;
+  border-radius:50%;
+}
+
+
+#leaves i:nth-of-type(n)    { height:23px; width:30px; }
+#leaves i:nth-of-type(n):before { width:7px; height:5px; top:17px; right:1px; }
+#leaves i:nth-of-type(n):after { width:2px; height:17px; left: 12px; top:0px; }
+
+#leaves i:nth-of-type(2n+1)    { height:11px; width:16px; }
+#leaves i:nth-of-type(2n+1):before { width:4px; height:3px; top:7px; right:0px; }
+#leaves i:nth-of-type(2n+1):after { width:2px; height:6px; left: 5px; top:1px; }
+
+#leaves i:nth-of-type(3n+2)  { height:17px; width:23px; }
+#leaves i:nth-of-type(3n+2):before  { height:4px; width:4px; top:12px; right:1px; }
+#leaves i:nth-of-type(3n+2):after  { height:10px; width:2px; top:1px; left:8px; }
+
+#leaves i:nth-of-type(n)   { -webkit-animation-delay: 1.9s;}
+#leaves i:nth-of-type(2n)  { -webkit-animation-delay: 3.9s;}
+#leaves i:nth-of-type(3n)  { -webkit-animation-delay: 2.3s;}
+#leaves i:nth-of-type(4n)  { -webkit-animation-delay: 4.4s;}
+#leaves i:nth-of-type(5n)  { -webkit-animation-delay: 5s;  }
+#leaves i:nth-of-type(6n)  { -webkit-animation-delay: 3.5s;}
+#leaves i:nth-of-type(7n)  { -webkit-animation-delay: 2.8s;}
+#leaves i:nth-of-type(8n)  { -webkit-animation-delay: 1.5s;}
+#leaves i:nth-of-type(9n)  { -webkit-animation-delay: 3.3s;}
+#leaves i:nth-of-type(10n) { -webkit-animation-delay: 2.5s;}
+#leaves i:nth-of-type(11n) { -webkit-animation-delay: 1.2s;}
+#leaves i:nth-of-type(12n) { -webkit-animation-delay: 4.1s;}
+#leaves i:nth-of-type(13n) { -webkit-animation-delay: 1s;  }
+#leaves i:nth-of-type(14n) { -webkit-animation-delay: 4.7s;}
+#leaves i:nth-of-type(15n) { -webkit-animation-delay: 3s;  }
+
+#leaves i:nth-of-type(n)    { background: linear-gradient(to bottom right, #309900, #005600); }
+#leaves i:nth-of-type(2n+2)  { background: linear-gradient(to bottom right, #5e9900, #2b5600); }
+#leaves i:nth-of-type(4n+1)  { background: linear-gradient(to bottom right, #990, #564500); }
+
+#leaves i:nth-of-type(n)    { opacity: .7;}
+#leaves i:nth-of-type(3n+1)  { opacity: .5;}
+#leaves i:nth-of-type(3n+2)  { opacity: .3;}
+
+#leaves i:nth-of-type(n)    {transform: rotate(180deg);}
+
+
+#leaves i:nth-of-type(n) { -webkit-animation-timing-function:ease-in-out;}
+
+@-webkit-keyframes falling {
+    
+    0% {
+        -webkit-transform:
+            translate3d(300,0,0)
+            rotate(0deg);
+    }
+    
+    100% {
+        -webkit-transform:
+            translate3d(-350px,700px,0)
+            rotate(90deg);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes falling3 {
+     0% {
+        -webkit-transform:
+            translate3d(0,0,0)
+            rotate(-20deg);
+    }
+    
+    100% {
+        -webkit-transform:
+            translate3d(-230px,640px,0)
+            rotate(-70deg);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes falling2 {
+     0% {
+        -webkit-transform:
+            translate3d(0,0,0)
+            rotate(90deg);
+    }
+    
+    100% {
+        -webkit-transform:
+            translate3d(-400px,680px,0)
+            rotate(0deg);
+        opacity: 0;
+    }
+}

klimainsights/data/biodiversity.geojson

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2108d044af326308e6800b1fc0a91a842b907f2a8682628f5c6091301d0d0ed2
+size 58413480

klimainsights/data/disaster.geojson

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c11fa6c413a768e9055b089a8aca275650d3b010a0636a2525668b43405f33a3
+size 24675297

klimainsights/data/temperature.geojson

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5ade3a8756ca96695f1a74cfc50ed356176dfaebd91ff66f21b4f347ac9d6697
+size 24702277

klimainsights/environment/.env

@@ -0,0 +1,4 @@
+HOST=127.0.0.1
+PORT=7000
+DEBUG=True
+MAPBOX_TOKEN=pk.eyJ1Ijoicml1LXJkIiwiYSI6ImNsc3NybmFvNzFwZTkybG93bHA1djNidGMifQ.G8s9vUxBpIxg-xqBvbgBHg

klimainsights/environment/settings.py

@@ -0,0 +1,12 @@
+import os
+from dotenv import load_dotenv
+
+env_path = os.path.join(os.path.dirname(__file__), os.getenv('ENV_FILE') or ".env")
+load_dotenv(dotenv_path=env_path, override=True)
+
+VERSION = os.environ.get("VERSION")
+
+APP_HOST = os.environ.get("HOST")
+APP_PORT = os.environ.get("PORT")
+APP_DEBUG = bool(os.environ.get("DEBUG"))
+MAPBOX_TOKEN = os.environ.get("MAPBOX_TOKEN")

klimainsights/index.py

@@ -0,0 +1,44 @@
+from dash import Dash, html, page_container
+import dash_bootstrap_components as dbc
+
+from app import app
+from environment.settings import APP_HOST, APP_PORT, APP_DEBUG
+
+server = app.server
+
+def serve_content():
+    navbar = dbc.NavbarSimple(className='container-fluid z-3', brand="Klima Insights", brand_href="/", color="primary", dark=True, children=[
+            dbc.NavItem(dbc.NavLink("Climate History", href="/temperature")),
+            dbc.NavItem(dbc.NavLink("Biodiversity Insights", href="/biodiversity")),
+            dbc.NavItem(dbc.NavLink("Disaster Occurrences", href="/disaster")),
+    ])
+
+    return html.Main(id='main', children=[
+            html.Div(
+                id="leaves",
+                children=[
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I(),
+                    html.I()
+                ]),
+            navbar,
+            page_container
+    ])
+
+app._favicon = ("icon.svg")
+app.layout = serve_content()
+
+if __name__ == '__main__':
+    app.run_server(debug=APP_DEBUG, host=APP_HOST, port=APP_PORT)

klimainsights/pages/biodiversity.py

@@ -0,0 +1,23 @@
+# Setup Folders, Tokens, and Dependencies
+from dash import Dash, html, dcc, callback, Output, Input, register_page
+import dash_bootstrap_components as dbc
+import plotly.express as px
+import pandas as pd
+import numpy as np
+import geopandas as gpd
+from pathlib import Path
+from environment.settings import MAPBOX_TOKEN
+
+datasets_folder = Path('./data')
+px.set_mapbox_access_token(MAPBOX_TOKEN)
+
+# Import Data
+biodiversity_gdf = gpd.read_file(datasets_folder / 'biodiversity.geojson')
+
+# Initialize Page
+register_page(__name__, path='/biodiversity', name='Biodiversity', title='Klima Insights | Biodiversity')
+
+layout = html.Div(children=[
+  html.H1(["BIODIVERSITY"])
+
+])

klimainsights/pages/disaster.py

@@ -0,0 +1,325 @@
+# Setup Folders, Tokens, and Dependencies
+from dash import html, dcc, callback, Output, Input, State, register_page
+import dash_bootstrap_components as dbc
+import plotly.express as px
+import pandas as pd
+import numpy as np
+import geopandas as gpd
+from pathlib import Path
+from environment.settings import MAPBOX_TOKEN
+
+datasets_folder = Path('./data')
+px.set_mapbox_access_token(MAPBOX_TOKEN)
+
+# Import Data
+temperature_gdf = gpd.read_file(datasets_folder / "temperature.geojson")
+disaster_gdf = gpd.read_file(datasets_folder / 'disaster.geojson')
+Region_gdf = disaster_gdf.copy()
+Region_tot_ave = Region_gdf.drop(columns=['geometry']).groupby('Region').sum()
+def region_count(disaster_type,col_name):
+    Region_gdf[col_name] = np.nan #Create a new column that contains the number of disasters per region
+
+    for i1,r1 in Region_gdf.iterrows():
+        for i2,r2 in Region_tot_ave.iterrows():
+            if r1['Region'] == i2:
+                Region_gdf.at[i1, col_name] = r2[disaster_type]
+            else:
+                continue
+region_count('Total Disaster Count','Region_tot')
+region_count('Storm Count','Region_storm')
+region_count('Flood Count','Region_flood')
+region_count('Earthquake Count','Region_earth')
+region_count('Volcanic Activity Count','Region_vol')
+region_count('Mass Movement Count','Region_mass')
+region_count('Drought Count','Region_drought')
+
+melt_value = temperature_gdf.drop(columns=[col for col in temperature_gdf.columns if 'TempDiff' in col])
+melt_value.columns = [col.split('_')[0] if '_value' in col else col for col in melt_value.columns]
+melt_value = melt_value.melt(id_vars=['name', 'geometry', 'admin_div', 'island_group', 'Region'], 
+                            var_name='decade', 
+                            value_name='value')
+melt_tempdiff = temperature_gdf.drop(columns=[col for col in temperature_gdf.columns if 'value' in col])
+melt_tempdiff.columns = [col.split('_')[0] if '_TempDiff' in col else col for col in melt_tempdiff.columns]
+melt_tempdiff = melt_tempdiff.melt(id_vars=['name', 'geometry', 'admin_div', 'island_group', 'Region'], 
+                            var_name='decade', 
+                            value_name='TempDiff')
+temp_melted_gdf = pd.merge(melt_value, melt_tempdiff, on=['name', 'geometry', 'admin_div', 'island_group', 'Region', 'decade'])
+
+# Initialize Page
+register_page(__name__, path='/disaster', name='Disaster', title='Klima Insights | Disaster')
+
+layout = dbc.Container(className="d-flex justify-content-center align-items-center full-width my-3 z-3", fluid=True, children=[
+  dbc.Row(className="align-items-stretch", children=[
+      dbc.Col(className="bg-light rounded z-3 d-flex flex-col justify-content-center align-items-center", width=12, md=4, children=[
+          html.Div(className='full-width-container text-dark', children=[
+              html.Div(className='d-flex flex-row justify-content-start align-items-center mt-2 flex-gap-20', children=[
+                  html.H5(className='mt-1', children=["Divide By: "]),
+                  dcc.RadioItems(id='division-radio', options=['Region', 'Province'], value='Region', inline=True, labelStyle={"margin-right": "20px"})
+              ]),
+              html.H4(className="mt-2", children=[
+                  "Unveiling the Interplay of Temperature and Disaster Vulnerability in the Philippines"
+              ]),
+              html.P(className="", children=[
+                  "The Philippines, situated along the Pacific Ring of Fire, has long been highly susceptible to a range of disasters, including seismic and volcanic events. However, it's crucial to recognize that the nation's vulnerability to such calamities is not solely attributable to its geographical location. By utilizing the dropdown menu provided, one can explore the occurrences of each disaster type. Furthermore, clicking on specific areas in the map facilitates a deeper visualization of temperature changes in those regions."
+              ]),
+              dcc.Loading(type="circle", children=[dcc.Graph(id="disaster-line")])
+          ])
+      ]),
+      dbc.Col(className="rounded z-3 disaster-map-height overflow-hidden", width=12, md=8, children=[
+          html.Div(className="text-dark z-3 align-self-start", children=[
+            html.Div(className='d-flex flex-row justify-content-between align-items-center', children=[
+              html.Div(className='w-100', children=[
+                  dcc.Dropdown(options=['Total Disaster', 'Storm', 'Flood', 'Earthquake', 'Volcanic Activity', 'Mass Movement', 'Drought'], value='Total Disaster', id='disaster-type-dropdown', multi=False, searchable=False, clearable=False)
+              ]),
+              dbc.Button("Compare", color="primary z-3", id="open-disaster-modal", n_clicks=0)
+            ]),
+            html.Div(children=[
+                dcc.Loading(type="circle", children=[dcc.Graph(id="disaster-map")])
+            ])
+          ])
+      ]),
+      dbc.Modal(
+          [
+              dbc.ModalHeader(dbc.ModalTitle(className="text-secondary", children=["Disaster Count per Area"])),
+              dbc.ModalBody(children=[
+                  dbc.Row(children=[
+                      dbc.Col(width=12, md=4, children=[
+                        html.Div(children=[
+                          html.H4(className="mt-2 text-light", children=[
+                              "Deeper Insights into Disaster Trends"
+                          ]),
+                          html.P(className="text-light", children=[
+                              "Taking a closer look, we can compare the frequency of disasters in each province or region within a specific island group using the bar graph provided on the right. Noticing the disparity in disaster occurrences among different areas raises awareness of the necessity to take proactive measures, regardless of their scale, to mitigate and minimize future disasters."
+                          ]),
+                        ])
+                      ]),
+                      dbc.Col(width=12, md=8, children=[
+                        dcc.Dropdown(options=['Luzon', 'Visayas', 'Mindanao'], value='Luzon', id='disaster-bar-dropdown',
+                                      multi=False, searchable=False, clearable=False),
+                        dcc.Loading(type="circle", children=[dcc.Graph(id="disaster-bar")])
+                      ])
+                  ])
+              ]),
+          ],
+          id="disaster-modal",
+          size="xl",
+          is_open=False,
+      )
+  ])
+])
+
+# Compare Modal
+@callback(
+    Output("disaster-modal", "is_open"),
+    Input("open-disaster-modal", "n_clicks"),
+    State("disaster-modal", "is_open"),
+)
+def toggle_modal(n1, is_open):
+    if n1:
+        return not is_open
+    return is_open
+
+# Click Data
+@callback(
+    Output("disaster-line", "figure"),
+    [Input('division-radio', 'value'), Input("disaster-map", "clickData")]
+)
+def update_line(division, click_data):
+    if click_data is not None:
+      data = click_data['points'][0]['customdata'][0] 
+    else:
+      match division:
+            case 'Region':
+                data = 'RegionI'
+            case 'Province':
+                data = 'Abra'
+
+    curr_div = ''
+    if division == 'Region':
+        curr_div = 'Region'
+    elif division == 'Province':
+        curr_div = 'name'
+    else:
+        return
+    
+    island_gdf = temp_melted_gdf[(temp_melted_gdf[curr_div].isin([data]) == True)].drop(columns=['geometry'])
+
+    line_fig = px.line(island_gdf, x='decade', y='value',color='name')
+    line_fig.update_layout(
+        autosize=True,  
+        height=500,
+        title='Change in Avg Temperature in ' + data,
+        yaxis=dict(
+            range=[25, 32],
+            tickmode='linear',
+            dtick=0.5
+        ),
+        margin=dict(l=20, r=20, t=100, b=100),
+        updatemenus=[{
+            'direction': 'left',  
+            'pad': {'t': 0, 'b': 0, 'l': 0, 'r': 0},  
+            'showactive': False,
+            'type': 'buttons',
+            'x': 0.06,  
+            'xanchor': 'right',
+            'y': -0.46,  
+            'yanchor': 'top'
+        }],
+        xaxis_tickangle=-45 
+    )
+    hover_template = '<b>' + data + '</b><br>Average Temperature in<br>the %{x}:<br>%{y:.2f}°C<extra></extra>'
+    line_fig.update_traces(hovertemplate=hover_template)
+
+    return line_fig            
+
+# Map Figure
+@callback(
+    Output('disaster-map', 'figure'),
+    [Input('division-radio', 'value'), Input('disaster-type-dropdown', 'value')]
+)
+def update_map(division, disaster_type):
+    curr_division = ''
+    curr_disaster = ''
+    if division == 'Region':
+        curr_division = 'Region'
+        match disaster_type:
+            case 'Total Disaster':
+                curr_disaster = 'Region_tot'
+            case 'Storm':
+                curr_disaster = 'Region_storm'
+            case 'Flood':
+                curr_disaster = 'Region_flood'
+            case 'Earthquake':
+                curr_disaster = 'Region_earth'
+            case 'Volcanic Activity':
+                curr_disaster = 'Region_vol'
+            case 'Mass Movement':
+                curr_disaster = 'Region_mass'
+            case 'Drought':
+                curr_disaster = 'Region_drought'
+            case _:
+                return
+    elif division == 'Province':
+        curr_division = 'Area Name'
+        match disaster_type:
+            case 'Total Disaster':
+                curr_disaster = 'Total Disaster Count'
+            case 'Storm':
+                curr_disaster = 'Storm Count'
+            case 'Flood':
+                curr_disaster = 'Flood Count'
+            case 'Earthquake':
+                curr_disaster = 'Earthquake Count'
+            case 'Volcanic Activity':
+                curr_disaster = 'Volcanic Activity Count'
+            case 'Mass Movement':
+                curr_disaster = 'Mass Movement Count'
+            case 'Drought':
+                curr_disaster = 'Drought Count'
+            case _:
+                return
+    else:
+        return
+
+    map_fig = px.choropleth_mapbox(Region_gdf,
+                                height=845,
+                                geojson=Region_gdf.geometry,
+                                locations=Region_gdf.index,
+                                color=curr_disaster, # Change based on dropdown value
+                                color_continuous_scale='amp',
+                                range_color=[Region_gdf[curr_disaster].min(), Region_gdf[curr_disaster].max()],  
+                                mapbox_style='streets',  
+                                zoom=5,  
+                                center={"lat": 12.8797, "lon": 122.7740}, 
+                                opacity=0.6,
+                                )
+
+    map_fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
+
+    map_fig.update_layout(coloraxis_colorbar=dict(title= disaster_type + "<br>Count",yanchor="top",xanchor='left',
+                                y=1, x=0, ticks="outside", ticklabelposition="outside left", thickness=10, title_font_color='#0c232c',  
+                                tickfont=dict(
+                                size=12,
+                                color='#0c232c')
+                            )
+                        )
+
+    hover_template = '<b>%{customdata[0]}</b><br>' + disaster_type + ' Count: %{customdata[1]:.0f}<extra></extra>'
+
+    map_fig.update_traces(hovertemplate=hover_template,
+                    customdata=Region_gdf[[curr_division, curr_disaster]])
+
+    return map_fig
+
+# Bar Figure
+@callback(
+    Output('disaster-bar', 'figure'),
+    [Input('division-radio', 'value'), Input('disaster-type-dropdown', 'value'), Input('disaster-bar-dropdown', 'value')]
+)
+def update_disaster_bar(division, disaster_type, island_group):
+    curr_division = ''
+    curr_disaster = ''
+    if division == 'Region':
+        curr_division = 'Region'
+        match disaster_type:
+            case 'Total Disaster':
+                curr_disaster = 'Region_tot'
+            case 'Storm':
+                curr_disaster = 'Region_storm'
+            case 'Flood':
+                curr_disaster = 'Region_flood'
+            case 'Earthquake':
+                curr_disaster = 'Region_earth'
+            case 'Volcanic Activity':
+                curr_disaster = 'Region_vol'
+            case 'Mass Movement':
+                curr_disaster = 'Region_mass'
+            case 'Drought':
+                curr_disaster = 'Region_drought'
+            case _:
+                return
+        island_disaster = Region_gdf[Region_gdf['Island Group'] == island_group].groupby('Region')[curr_disaster].sum().sort_values(ascending=True)
+        x = island_disaster.values
+        y = island_disaster.index
+    elif division == 'Province':
+        curr_division = 'Area Name'
+        match disaster_type:
+            case 'Total Disaster':
+                curr_disaster = 'Total Disaster Count'
+            case 'Storm':
+                curr_disaster = 'Storm Count'
+            case 'Flood':
+                curr_disaster = 'Flood Count'
+            case 'Earthquake':
+                curr_disaster = 'Earthquake Count'
+            case 'Volcanic Activity':
+                curr_disaster = 'Volcanic Activity Count'
+            case 'Mass Movement':
+                curr_disaster = 'Mass Movement Count'
+            case 'Drought':
+                curr_disaster = 'Drought Count'
+            case _:
+                return
+        island_disaster = Region_gdf[(Region_gdf['Island Group'] == island_group)].sort_values(by='Total Disaster Count', ascending=True)
+        x = curr_disaster
+        y = curr_division
+    else:
+        return
+    # Create stacked bar plot using Plotly Express
+    bar_fig = px.bar(island_disaster,
+                x=x,  
+                y=y,  
+                title=disaster_type + " in " + island_group + " per " + division,
+                orientation='h',  
+                height=750,  
+                color_discrete_sequence=['lightblue'], 
+                )
+    bar_fig.update_layout(
+        xaxis_title=disaster_type, 
+        yaxis_title=division,
+    )
+    hover_template = '<b>%{customdata[0]}</b><br>' + disaster_type + ' Count: %{x}<extra></extra>'
+    bar_fig.update_traces(hovertemplate=hover_template,
+                    customdata=Region_gdf[[curr_division]])
+
+    return bar_fig

klimainsights/pages/initial.py

@@ -0,0 +1,32 @@
+# Setup Folders, Tokens, and Dependencies
+from dash import  html, register_page
+import dash_bootstrap_components as dbc
+
+# Initialize Page
+register_page(__name__, path='/', name='Start', title='Klima Insights')
+
+layout = dbc.Container(className='d-flex justify-content-center align-items-center full-height full-width py-5 z-3', fluid=True, children=[
+  html.Div(className='card', children=[
+    html.Strong(className="text-primary", children=["Are You Ready to Uncover the Truth about Climate Change in the Philippines?"]),
+    html.Div(className='card__body', children=[
+          html.P(
+                "Delve into the heart of environmental change with Klima Insights. Our dynamic dashboard presents "
+                "a comprehensive overview of the climate's impact on the Philippines, revealing temperature increase over the decades, "
+                "biodiversity shifts, and the frequency of disasters."
+          ),
+          html.P(
+              "Do you know how climate change is reshaping the Philippines? Join us as we uncover the hidden patterns, "
+              "discover the amount of endangered species struggling to survive, and witness the escalating disasters "
+              "threatening our communities. The time to act is now. Together, let's shape a sustainable future for generations to come."
+          ),
+          html.Div(className="container-fluid d-flex justify-content-center scale-button",children=[
+                dbc.Button("Explore Climate History", color="info", href="/temperature", className="mt-3")
+          ])
+    ]),
+    html.Span(children=[
+      html.Div(className="container-fluid d-flex justify-content-center",children=[
+                dbc.Button("Explore Climate History", color="info", href="/temperature", className="mt-3")
+          ])
+    ])
+  ])
+])

klimainsights/pages/temperature.py

@@ -0,0 +1,310 @@
+# Setup Folders, Tokens, and Dependencies
+from dash import html, dcc, callback, Output, Input, State, register_page
+import dash_bootstrap_components as dbc
+import plotly.express as px
+import pandas as pd
+import geopandas as gpd
+from pathlib import Path
+from environment.settings import MAPBOX_TOKEN
+import dash_daq as daq
+
+datasets_folder = Path('./data')
+px.set_mapbox_access_token(MAPBOX_TOKEN)
+
+# Import Data
+temperature_gdf = gpd.read_file(datasets_folder / "temperature.geojson")
+def remove_value(string):
+    return string[:-6] if string.endswith('_value') else string
+
+melt_value = temperature_gdf.drop(columns=[col for col in temperature_gdf.columns if 'TempDiff' in col])
+melt_value.columns = [col.split('_')[0] if '_value' in col else col for col in melt_value.columns]
+melt_value = melt_value.melt(id_vars=['name', 'geometry', 'admin_div', 'island_group', 'Region'], 
+                            var_name='decade', 
+                            value_name='value')
+melt_tempdiff = temperature_gdf.drop(columns=[col for col in temperature_gdf.columns if 'value' in col])
+melt_tempdiff.columns = [col.split('_')[0] if '_TempDiff' in col else col for col in melt_tempdiff.columns]
+melt_tempdiff = melt_tempdiff.melt(id_vars=['name', 'geometry', 'admin_div', 'island_group', 'Region'], 
+                            var_name='decade', 
+                            value_name='TempDiff')
+temp_melted_gdf = pd.merge(melt_value, melt_tempdiff, on=['name', 'geometry', 'admin_div', 'island_group', 'Region', 'decade'])
+
+# Initialize Page
+register_page(__name__, path='/temperature', name='Temperature', title='Klima Insights | Temperature')
+
+layout = dbc.Container(className="d-flex justify-content-center align-items-center full-height full-width my-3 z-3", fluid=True, children=[
+  dbc.Row(children=[
+    dbc.Col(className="bg-light rounded z-3", width=12, md=4, children=[
+      html.Div(className="full-width-container text-dark", children=[
+          html.H3(className="mt-2", children=[
+              "Charting the Climate Shift: Examining Temperature Trends in the Philippines Across Decades"
+          ]),
+          html.P(children=[
+              "Delving into the historical records reveals a subtle yet discernible shift in the climate dynamics of the Philippines. From the relatively mild conditions of the 1960s to the present-day realities of the 2020s, there's a noticeable uptick in temperature. While the increase may not be drastic, it remains a cause for concern and warrants careful observation. What was once a region known for its moderate temperatures has gradually warmed, signaling a shift that demands attention. Understanding these incremental changes is essential in navigating the evolving climate landscape and implementing effective measures to mitigate their impact."
+          ]),
+          html.Div(className="container-fluid d-flex justify-content-center my-3",children=[
+                dbc.Button("Compare Provinces", color="primary", id="open-temp-modal", n_clicks=0)
+          ]),
+          dbc.Modal(
+            [
+                dbc.ModalHeader(dbc.ModalTitle(className="text-secondary", children=["Average Temperature per Province"])),
+                dbc.ModalBody(children=[
+                    dbc.Row(children=[
+                        dbc.Col(width=12, md=4, children=[
+                          html.Div(children=[
+                            html.H4(className="mt-2 text-light", children=[
+                                " Unraveling Temperature Trends Across Philippine Provinces from the 1960s to the 2020s"
+                            ]),
+                            html.P(className="text-light", children=[
+                                "This section delves into the temperature data per province across the Philippines spanning from the 1960s to the 2020s. Upon closer inspection, a discernible pattern emerges, indicating a modest uptick in temperatures as the decades progress. While the increase may seem subtle, it's a notable phenomenon worthy of attention. The comparative visualization reveals a trend reflective of broader climate shifts, hinting at the ongoing environmental changes affecting the nation's provinces. These findings underscore the importance of monitoring and understanding regional temperature variations, as they hold implications for both local communities and broader climate resilience efforts."
+                            ]),
+                            daq.BooleanSwitch(
+                                id='temp-bar-switch',
+                                on=False,
+                                color="#b58900",
+                                label="Show Avg Temp Increase Relative to 1960s"
+                            )
+                          ])
+                        ]),
+                        dbc.Col(className="temp-bar-container", width=12, md=8, children=[
+                          dcc.Dropdown(options=['Luzon', 'Visayas', 'Mindanao'], value='Luzon', id='temp-bar-dropdown',
+                                       multi=False, searchable=False, clearable=False),
+                          dcc.Loading(type="circle", children=[dcc.Graph(id="temp-bar")])
+                        ])
+                    ])
+                ]),
+            ],
+            id="temp-modal",
+            size="xl",
+            is_open=False,
+        ),
+        ])
+    ]),
+    dbc.Col(className="rounded", width=12, md=8, children=[
+      html.Div(className="text-dark", children=[
+          dcc.Dropdown(options=[{'label': '1960s', 'value': '1960s_value'},
+                                {'label': '1970s', 'value': '1970s_value'},
+                                {'label': '1980s', 'value': '1980s_value'},
+                                {'label': '1990s', 'value': '1990s_value'},
+                                {'label': '2000s', 'value': '2000s_value'},
+                                {'label': '2010s', 'value': '2010s_value'},
+                                {'label': '2020s', 'value': '2020s_value'}], 
+                                value='1960s_value', id='temp-map-dropdown',
+                                multi=False, searchable=False, clearable=False),
+          dcc.Loading(type="circle", children=[dcc.Graph(id="temp-map", responsive=True)])
+        ])
+    ])
+  ])
+])
+
+# Compare Modal
+@callback(
+    Output("temp-modal", "is_open"),
+    Input("open-temp-modal", "n_clicks"),
+    State("temp-modal", "is_open"),
+)
+def toggle_modal(n1, is_open):
+    if n1:
+        return not is_open
+    return is_open
+
+# Bar Figure
+@callback(
+    Output('temp-bar', 'figure'),
+    [Input('temp-bar-dropdown', 'value'),Input('temp-bar-switch', 'on')]
+)
+def update_bar_fig(island_value, switch):
+    if switch:
+        island_gdf = temp_melted_gdf[(temp_melted_gdf['island_group'].isin([island_value])) & (temp_melted_gdf['decade'].isin(['1960s']) == False)].drop(columns=['geometry'])
+        # Create the Figure with horizontal orientation
+        bar1960_fig = px.bar(island_gdf, y='name', x='TempDiff', animation_frame="decade", orientation='h')
+        bar1960_fig.update_layout(
+            height=750,
+            title=f'Average Temperature Increase Relative to 1960s<br>Across {island_value} Provinces',
+            margin=dict(l=20, r=20, t=75, b=50),
+            yaxis=dict(
+                title="Province Name",
+                tickfont=dict(size=11)  # Adjust tick font size to prevent overlap
+            ),
+            xaxis=dict(
+                title="Temperature (°C)",
+                range=[0, 1.5],
+                tickmode='linear',
+                dtick=0.3,
+                tickfont=dict(size=13),  # Adjust tick font size to prevent overlap
+                tickangle=0
+            ),
+            font=dict(  # Adjust font size for main title
+                size=12
+            )
+        )
+        hover_template = "Avg Temperature Increase<br>" + \
+                        "Relative to 1960s<br>" + \
+                        "<b>in %{y}</b><br>" + \
+                        "during the %{customdata[0]}:<br>" + \
+                        "%{customdata[1]:.2f}°C"
+        bar1960_fig.update_traces(hovertemplate=hover_template,
+                            customdata=island_gdf[['decade', 'value']])
+
+        for frame in bar1960_fig.frames:
+            frame.data[0].hovertemplate = hover_template
+            frame.data[0].customdata = island_gdf[['decade', 'value']]
+        bar1960_fig.update_layout(
+            updatemenus=[{
+                'direction': 'left',
+                'pad': {'t': 10, 'b': 10, 'l': 10, 'r': 10},
+                'showactive': False,
+                'type': 'buttons',
+                'x': 0.06,
+                'xanchor': 'right',
+                'y': -0.14,
+                'yanchor': 'top'
+            }],
+            sliders=[{
+                'active': 0,
+                'x': 0.98,
+                'y': -0.08,
+                'xanchor': 'right',
+                'yanchor': 'top',
+                'transition': {'duration': 300, 'easing': 'cubic-in-out'},
+                'pad': {'t': 10, 'b': 10, 'l': 10, 'r': 10},
+                'currentvalue': {
+                    'font': {'size': 15},
+                    'prefix': 'Decade:',
+                    'visible': True,
+                    'xanchor': 'right',
+                },
+                'visible': True,
+            }]
+        )
+        return bar1960_fig
+    
+    else:
+        island_gdf = temp_melted_gdf[(temp_melted_gdf['island_group'].isin([island_value]) == True)].drop(columns=['geometry'])
+        # Create the Figure with horizontal orientation
+        bar_fig = px.bar(island_gdf, y='name', x='value', animation_frame="decade", orientation='h')
+        bar_fig.update_layout(
+            height=750,
+            title=f'Average Temperature per Province<br>in {island_value}',
+            margin=dict(l=20, r=20, t=75, b=50),
+            yaxis=dict(
+                title="Province Name",
+                tickfont=dict(size=11)  # Adjust tick font size to prevent overlap
+            ),
+            xaxis=dict(
+                title="Avg Temperature (°C)",
+                range=[0, 35],
+                tickmode='linear',
+                dtick=5,
+                tickfont=dict(size=13),  # Adjust tick font size to prevent overlap
+                tickangle=0
+            ),
+            font=dict(  # Adjust font size for main title
+                size=12
+            )
+        )
+        hover_template = "Average Temperature in<br>" + \
+                        "<b>%{y}</b><br>" + \
+                        "during the %{customdata[0]}:<br>" + \
+                        "%{customdata[1]:.2f}°C"
+        bar_fig.update_traces(hovertemplate=hover_template,
+                            customdata=island_gdf[['decade', 'value']])
+
+        for frame in bar_fig.frames:
+            frame.data[0].hovertemplate = hover_template
+            frame.data[0].customdata = island_gdf[['decade', 'value']]
+        bar_fig.update_layout(
+            updatemenus=[{
+                'direction': 'left',
+                'pad': {'t': 10, 'b': 10, 'l': 10, 'r': 10},
+                'showactive': False,
+                'type': 'buttons',
+                'x': 0.06,
+                'xanchor': 'right',
+                'y': -0.14,
+                'yanchor': 'top'
+            }],
+            sliders=[{
+                'active': 0,
+                'x': 0.98,
+                'y': -0.08,
+                'xanchor': 'right',
+                'yanchor': 'top',
+                'transition': {'duration': 300, 'easing': 'cubic-in-out'},
+                'pad': {'t': 10, 'b': 10, 'l': 10, 'r': 10},
+                'currentvalue': {
+                    'font': {'size': 15},
+                    'prefix': 'Decade:',
+                    'visible': True,
+                    'xanchor': 'right',
+                },
+                'visible': True,
+            }]
+        )
+
+        highest_temp_1960 = island_gdf[island_gdf['decade'] == '1960s']['value'].max()  # Highest temperature for the decade 1960
+        bar_fig.add_shape(  # Line representing highest temperature in the 1960s
+            type="line",
+            x0=highest_temp_1960,
+            y0=-1,
+            x1=highest_temp_1960,
+            y1=island_gdf.name.nunique()-0.5,
+            line=dict(
+                color="red",
+                width=1,
+                dash="dash",
+            ),
+        )
+
+        bar_fig.add_annotation(
+            x=highest_temp_1960 + 1,
+            y=island_gdf.name.nunique() / 1.3,  # Adjust the y position of the label
+            text="Highest Temp in the 1960s",
+            showarrow=True,
+            arrowhead=1,
+            ax=0,
+            ay=0,  # Adjust the arrow position
+            font=dict(
+                color="red",
+                size=12
+            ),
+            align="left",
+            textangle=90  # Tilt the text 90 degrees
+        )
+
+        return bar_fig
+
+# Map Figure
+@callback(
+    Output('temp-map', 'figure'),
+    Input('temp-map-dropdown', 'value')
+)
+def update_map_fig(decade_value):
+    map_fig = px.choropleth_mapbox(temperature_gdf,
+                                    geojson=temperature_gdf.geometry,
+                                    locations=temperature_gdf.index,
+                                    color=decade_value,
+                                    color_continuous_scale='turbo',
+                                    range_color=[25, 33],
+                                    mapbox_style='streets',
+                                    zoom=5,
+                                    center={"lat": 12.8797, "lon": 122.7740},
+                                    opacity=0.6,
+                                    )
+    map_fig.update_layout(
+        coloraxis_colorbar=dict(title=f"{remove_value(decade_value)}<br>Average<br>Temperature(°C)", yanchor="top", xanchor='left',
+                                y=1, x=0, ticks="outside", ticklabelposition="outside left", thickness=10, title_font_color='#0c232c',
+                                tickvals=[i for i in range(25, 33)],
+                                tickmode='array',
+                                ticksuffix='°C',
+                                tickfont=dict(
+                                    size=12,
+                                    color='#0c232c')
+                                )
+    )
+    map_fig.update_layout(
+        margin=dict(l=0, r=0, t=0, b=0),
+    )
+    hover_template = '<b>%{customdata[0]}</b><br>during the '+ remove_value(decade_value) +'<br>Average Temp: %{customdata[1]:.2f}°C<extra></extra>'
+    map_fig.update_traces(hovertemplate=hover_template,
+                           customdata=temperature_gdf[['name', decade_value]])
+    return map_fig

plotly_interactions.ipynb

@@ -0,0 +1,1101 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Setup Folders, Tokens, and Dependencies\n",
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "import geopandas as gpd\n",
+    "import plotly.express as px\n",
+    "from pathlib import Path\n",
+    "from klimainsights.environment.settings import MAPBOX_TOKEN\n",
+    "\n",
+    "datasets_folder = Path('./klimainsights/data')\n",
+    "px.set_mapbox_access_token(MAPBOX_TOKEN)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Loading the Data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "temperature_gdf = gpd.read_file(datasets_folder / \"temperature.geojson\")\n",
+    "biodiversity_gdf =  gpd.read_file(datasets_folder / 'biodiversity.geojson')\n",
+    "disaster_gdf = gpd.read_file(datasets_folder / 'disaster.geojson')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**APP IDEAS**\n",
+    "- The initial page will an animated of a short text on the center that catches the viewers' attention. It can be a call to action or a hook to incite curiosity.\n",
+    "- Below the Text will be a button to \"Click to Learn More\" or \"Continue\", leading to the Temperature page\n",
+    "- All pages will contain a header/nav that contains an offcanvas for easier navigation between pages"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Temperature"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def remove_value(string):\n",
+    "    return string[:-6] if string.endswith('_value') else string\n",
+    "\n",
+    "melt_value = temperature_gdf.drop(columns=[col for col in temperature_gdf.columns if 'TempDiff' in col])\n",
+    "melt_value.columns = [col.split('_')[0] if '_value' in col else col for col in melt_value.columns]\n",
+    "melt_value = melt_value.melt(id_vars=['name', 'geometry', 'admin_div', 'island_group', 'Region'], \n",
+    "                            var_name='decade', \n",
+    "                            value_name='value')\n",
+    "melt_tempdiff = temperature_gdf.drop(columns=[col for col in temperature_gdf.columns if 'value' in col])\n",
+    "melt_tempdiff.columns = [col.split('_')[0] if '_TempDiff' in col else col for col in melt_tempdiff.columns]\n",
+    "melt_tempdiff = melt_tempdiff.melt(id_vars=['name', 'geometry', 'admin_div', 'island_group', 'Region'], \n",
+    "                            var_name='decade', \n",
+    "                            value_name='TempDiff')\n",
+    "temp_melted_gdf = pd.merge(melt_value, melt_tempdiff, on=['name', 'geometry', 'admin_div', 'island_group', 'Region', 'decade'])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(temperature_gdf.shape)\n",
+    "temperature_gdf.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_bar_fig(island_value):\n",
+    "    island_gdf = temp_melted_gdf[(temp_melted_gdf['island_group'].isin([island_value]) == True)].drop(columns=['geometry'])\n",
+    "    # Create the Figure with horizontal orientation\n",
+    "    bar_fig = px.bar(island_gdf, y='name', x='value', animation_frame=\"decade\", orientation='h')\n",
+    "    bar_fig.update_layout(\n",
+    "        height=750,\n",
+    "        title=f'Average Temperature per Province<br>in {island_value}',\n",
+    "        margin=dict(l=20, r=20, t=75, b=50),\n",
+    "        yaxis=dict(\n",
+    "            title=\"Province Name\",\n",
+    "            tickfont=dict(size=11)  # Adjust tick font size to prevent overlap\n",
+    "        ),\n",
+    "        xaxis=dict(\n",
+    "            title=\"Avg Temperature (°C)\",\n",
+    "            range=[0, 35],\n",
+    "            tickmode='linear',\n",
+    "            dtick=5,\n",
+    "            tickfont=dict(size=13),  # Adjust tick font size to prevent overlap\n",
+    "            tickangle=0\n",
+    "        ),\n",
+    "        font=dict(  # Adjust font size for main title\n",
+    "            size=12\n",
+    "        )\n",
+    "    )\n",
+    "    hover_template = \"Average Temperature in<br>\" + \\\n",
+    "                     \"<b>%{y}</b><br>\" + \\\n",
+    "                     \"during the %{customdata[0]}:<br>\" + \\\n",
+    "                     \"%{customdata[1]:.2f}°C\"\n",
+    "    bar_fig.update_traces(hovertemplate=hover_template,\n",
+    "                           customdata=island_gdf[['decade', 'value']])\n",
+    "\n",
+    "    for frame in bar_fig.frames:\n",
+    "        frame.data[0].hovertemplate = hover_template\n",
+    "        frame.data[0].customdata = island_gdf[['decade', 'value']]\n",
+    "    bar_fig.update_layout(\n",
+    "        updatemenus=[{\n",
+    "            'direction': 'left',\n",
+    "            'pad': {'t': 10, 'b': 10, 'l': 10, 'r': 10},\n",
+    "            'showactive': False,\n",
+    "            'type': 'buttons',\n",
+    "            'x': 0.06,\n",
+    "            'xanchor': 'right',\n",
+    "            'y': -0.14,\n",
+    "            'yanchor': 'top'\n",
+    "        }],\n",
+    "        sliders=[{\n",
+    "            'active': 0,\n",
+    "            'x': 0.98,\n",
+    "            'y': -0.08,\n",
+    "            'xanchor': 'right',\n",
+    "            'yanchor': 'top',\n",
+    "            'transition': {'duration': 300, 'easing': 'cubic-in-out'},\n",
+    "            'pad': {'t': 10, 'b': 10, 'l': 10, 'r': 10},\n",
+    "            'currentvalue': {\n",
+    "                'font': {'size': 15},\n",
+    "                'prefix': 'Decade:',\n",
+    "                'visible': True,\n",
+    "                'xanchor': 'right',\n",
+    "            },\n",
+    "            'visible': True,\n",
+    "        }]\n",
+    "    )\n",
+    "\n",
+    "    highest_temp_1960 = island_gdf[island_gdf['decade'] == '1960s']['value'].max()  # Highest temperature for the decade 1960\n",
+    "    bar_fig.add_shape(  # Line representing highest temperature in the 1960s\n",
+    "        type=\"line\",\n",
+    "        x0=highest_temp_1960,\n",
+    "        y0=-1,\n",
+    "        x1=highest_temp_1960,\n",
+    "        y1=island_gdf.name.nunique()-0.5,\n",
+    "        line=dict(\n",
+    "            color=\"red\",\n",
+    "            width=1,\n",
+    "            dash=\"dash\",\n",
+    "        ),\n",
+    "    )\n",
+    "\n",
+    "    bar_fig.add_annotation(\n",
+    "        x=highest_temp_1960 + 1,\n",
+    "        y=island_gdf.name.nunique() / 1.3,  # Adjust the y position of the label\n",
+    "        text=\"Highest Temp in the 1960s\",\n",
+    "        showarrow=True,\n",
+    "        arrowhead=1,\n",
+    "        ax=0,\n",
+    "        ay=0,  # Adjust the arrow position\n",
+    "        font=dict(\n",
+    "            color=\"red\",\n",
+    "            size=12\n",
+    "        ),\n",
+    "        align=\"left\",\n",
+    "        textangle=90  # Tilt the text 90 degrees\n",
+    "    )\n",
+    "\n",
+    "    return bar_fig\n",
+    "\n",
+    "bar_fig = update_bar_fig('Mindanao')\n",
+    "bar_fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### TEMP 2:  The second visualization for the temperature data is a **Chloropleth Map** that shows the Average Temperature per Province across all of the decades from 1960s to 2020s.\n",
+    "#### Interactions:\n",
+    "- Across the Decades Animation\n",
+    "\n",
+    "<em>Note: the reason that only four decades are used (1960s, 1980s, 2000s, and 2020s) is because using more decades/dimensions would make the load time of the figure significantly higher reaching up to an hour. This visualization takes approximately 2-3 minutes to load in this notebook. </em>"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# def update_map_fig(n_intervals):\n",
+    "#     temp_sliced = temp_gdf[(temp_gdf['decade'].isin(['1960s', '1980s', '2000s', '2020s']) == True)].reset_index()\n",
+    "#     map_fig = px.choropleth_mapbox(temp_sliced,\n",
+    "#                                     geojson=temp_sliced.geometry,\n",
+    "#                                     locations=temp_sliced.index,\n",
+    "#                                     color='value',\n",
+    "#                                     color_continuous_scale='turbo',\n",
+    "#                                     range_color=[25, 32.5],\n",
+    "#                                     mapbox_style='streets',\n",
+    "#                                     zoom=5,\n",
+    "#                                     center={\"lat\": 12.8797, \"lon\": 121.7740},\n",
+    "#                                     opacity=0.6,\n",
+    "#                                     animation_frame=\"decade\"\n",
+    "#                                     )\n",
+    "#     map_fig.update_layout(\n",
+    "#         coloraxis_colorbar=dict(title=f\"Average<br>Temperature(°C)\", yanchor=\"top\", xanchor='left',\n",
+    "#                                 y=1, x=0, ticks=\"outside\", ticklabelposition=\"outside left\", thickness=10, title_font_color='#0c232c',\n",
+    "#                                 tickvals=[i for i in range(25, 33)],\n",
+    "#                                 tickmode='array',\n",
+    "#                                 ticksuffix='°C',\n",
+    "#                                 tickfont=dict(\n",
+    "#                                     size=12,\n",
+    "#                                     color='#0c232c')\n",
+    "#                                 )\n",
+    "#     )\n",
+    "#     map_fig.update_layout(\n",
+    "#         margin=dict(l=0, r=0, t=0, b=0),\n",
+    "#         updatemenus=[{\n",
+    "#             'buttons': [\n",
+    "#                 {'visible': True}\n",
+    "#             ],\n",
+    "#             'direction': 'left',\n",
+    "#             'pad': {'t': 0, 'b': 0, 'l': 0, 'r': 0},\n",
+    "#             'showactive': False,\n",
+    "#             'type': 'buttons',\n",
+    "#             'x': 0.15,\n",
+    "#             'xanchor': 'right',\n",
+    "#             'y': 0.21,\n",
+    "#             'yanchor': 'top'\n",
+    "#         }],\n",
+    "#         sliders=[{\n",
+    "#             'active': 0,\n",
+    "#             'x': 0.07,\n",
+    "#             'y': 0.19,\n",
+    "#             'len': 0.5,\n",
+    "#             'xanchor': 'left',\n",
+    "#             'yanchor': 'top',\n",
+    "#             'currentvalue': {\n",
+    "#                 'font': {'size': 16},\n",
+    "#                 'prefix': 'Decade:',\n",
+    "#                 'visible': True,\n",
+    "#                 'xanchor': 'right'\n",
+    "#             },\n",
+    "#             'transition': {'duration': 1000, 'easing': 'cubic-in-out'},\n",
+    "#             'pad': {'t': 0, 'b': 0, 'l': 0, 'r': 0}\n",
+    "#         }]\n",
+    "#     )\n",
+    "#     hover_template = '<b>%{customdata[0]}</b><br>Average Temp: %{customdata[1]:.2f}°C<extra></extra>'\n",
+    "#     map_fig.update_traces(hovertemplate=hover_template,\n",
+    "#                            customdata=temp_sliced[['name', 'value']])\n",
+    "#     for frame in map_fig.frames:\n",
+    "#         frame.data[0].hovertemplate = hover_template\n",
+    "#         frame.data[0].customdata = temp_sliced[['name', 'value']]\n",
+    "\n",
+    "#     return map_fig\n",
+    "\n",
+    "# map_fig = update_map_fig(1)\n",
+    "# map_fig.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_map_fig(decade_value):\n",
+    "    map_fig = px.choropleth_mapbox(temperature_gdf,\n",
+    "                                    geojson=temperature_gdf.geometry,\n",
+    "                                    locations=temperature_gdf.index,\n",
+    "                                    color=decade_value,\n",
+    "                                    color_continuous_scale='turbo',\n",
+    "                                    range_color=[25, 33],\n",
+    "                                    mapbox_style='streets',\n",
+    "                                    zoom=5,\n",
+    "                                    center={\"lat\": 12.8797, \"lon\": 122.7740},\n",
+    "                                    opacity=0.6,\n",
+    "                                    )\n",
+    "    map_fig.update_layout(\n",
+    "        coloraxis_colorbar=dict(title=f\"{remove_value(decade_value)}<br>Average<br>Temperature(°C)\", yanchor=\"top\", xanchor='left',\n",
+    "                                y=1, x=0, ticks=\"outside\", ticklabelposition=\"outside left\", thickness=10, title_font_color='#0c232c',\n",
+    "                                tickvals=[i for i in range(25, 33)],\n",
+    "                                tickmode='array',\n",
+    "                                ticksuffix='°C',\n",
+    "                                tickfont=dict(\n",
+    "                                    size=12,\n",
+    "                                    color='#0c232c')\n",
+    "                                )\n",
+    "    )\n",
+    "    map_fig.update_layout(\n",
+    "        margin=dict(l=0, r=0, t=0, b=0),\n",
+    "    )\n",
+    "    hover_template = '<b>%{customdata[0]}</b><br>during the '+ remove_value(decade_value) +'<br>Average Temp: %{customdata[1]:.2f}°C<extra></extra>'\n",
+    "    map_fig.update_traces(hovertemplate=hover_template,\n",
+    "                           customdata=temperature_gdf[['name', decade_value]])\n",
+    "\n",
+    "    return map_fig\n",
+    "\n",
+    "map_fig = update_map_fig('1970s' + '_value')\n",
+    "map_fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### TEMP 3"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_line(division, click_data):\n",
+    "    curr_div = ''\n",
+    "    data = click_data\n",
+    "    if division == 'Region':\n",
+    "        curr_div = 'Region'\n",
+    "    elif division == 'Province':\n",
+    "        curr_div = 'name'\n",
+    "    else:\n",
+    "        return\n",
+    "\n",
+    "    island_gdf = temp_melted_gdf[(temp_melted_gdf[curr_div].isin([data]) == True)].drop(columns=['geometry'])\n",
+    "\n",
+    "    line_fig = px.line(island_gdf, x='decade', y='value',color='name')\n",
+    "    line_fig.update_layout(\n",
+    "        autosize=True,  \n",
+    "        height=700,\n",
+    "        title='Change in Avg Temperature in ' + data,\n",
+    "        yaxis=dict(\n",
+    "            range=[25, 32],\n",
+    "            tickmode='linear',\n",
+    "            dtick=0.5\n",
+    "        ),\n",
+    "        margin=dict(l=20, r=20, t=100, b=100),\n",
+    "        updatemenus=[{\n",
+    "            'direction': 'left',  \n",
+    "            'pad': {'t': 0, 'b': 0, 'l': 0, 'r': 0},  \n",
+    "            'showactive': False,\n",
+    "            'type': 'buttons',\n",
+    "            'x': 0.06,  \n",
+    "            'xanchor': 'right',\n",
+    "            'y': -0.46,  \n",
+    "            'yanchor': 'top'\n",
+    "        }],\n",
+    "        xaxis_tickangle=-45 \n",
+    "    )\n",
+    "    hover_template = '<b>' + data + '</b><br>Average Temperature in<br>the %{x}:<br>%{y:.2f}°C<extra></extra>'\n",
+    "    line_fig.update_traces(hovertemplate=hover_template)\n",
+    "\n",
+    "    return line_fig\n",
+    "\n",
+    "done = update_line('Region', 'RegionI')\n",
+    "done.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### TEMP 4"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_bar1960_fig(island_value):\n",
+    "    island_gdf = temp_melted_gdf[(temp_melted_gdf['island_group'].isin([island_value])) & (temp_melted_gdf['decade'].isin(['1960s']) == False)].drop(columns=['geometry'])\n",
+    "    # Create the Figure with horizontal orientation\n",
+    "    bar1960_fig = px.bar(island_gdf, y='name', x='TempDiff', animation_frame=\"decade\", orientation='h')\n",
+    "    bar1960_fig.update_layout(\n",
+    "        height=750,\n",
+    "        title=f'Average Temperature Increase Relative to 1960s<br>Across {island_value} Provinces',\n",
+    "        margin=dict(l=20, r=20, t=75, b=50),\n",
+    "        yaxis=dict(\n",
+    "            title=\"Province Name\",\n",
+    "            tickfont=dict(size=11)  # Adjust tick font size to prevent overlap\n",
+    "        ),\n",
+    "        xaxis=dict(\n",
+    "            title=\"Temperature (°C)\",\n",
+    "            range=[0, 1.5],\n",
+    "            tickmode='linear',\n",
+    "            dtick=0.3,\n",
+    "            tickfont=dict(size=13),  # Adjust tick font size to prevent overlap\n",
+    "            tickangle=0\n",
+    "        ),\n",
+    "        font=dict(  # Adjust font size for main title\n",
+    "            size=12\n",
+    "        )\n",
+    "    )\n",
+    "    hover_template = \"Avg Temperature Increase<br>\" + \\\n",
+    "                     \"Relative to 1960s<br>\" + \\\n",
+    "                     \"<b>in %{y}</b><br>\" + \\\n",
+    "                     \"during the %{customdata[0]}:<br>\" + \\\n",
+    "                     \"%{customdata[1]:.2f}°C\"\n",
+    "    bar1960_fig.update_traces(hovertemplate=hover_template,\n",
+    "                           customdata=island_gdf[['decade', 'value']])\n",
+    "\n",
+    "    for frame in bar1960_fig.frames:\n",
+    "        frame.data[0].hovertemplate = hover_template\n",
+    "        frame.data[0].customdata = island_gdf[['decade', 'value']]\n",
+    "    bar1960_fig.update_layout(\n",
+    "        updatemenus=[{\n",
+    "            'direction': 'left',\n",
+    "            'pad': {'t': 10, 'b': 10, 'l': 10, 'r': 10},\n",
+    "            'showactive': False,\n",
+    "            'type': 'buttons',\n",
+    "            'x': 0.06,\n",
+    "            'xanchor': 'right',\n",
+    "            'y': -0.14,\n",
+    "            'yanchor': 'top'\n",
+    "        }],\n",
+    "        sliders=[{\n",
+    "            'active': 0,\n",
+    "            'x': 0.98,\n",
+    "            'y': -0.08,\n",
+    "            'xanchor': 'right',\n",
+    "            'yanchor': 'top',\n",
+    "            'transition': {'duration': 300, 'easing': 'cubic-in-out'},\n",
+    "            'pad': {'t': 10, 'b': 10, 'l': 10, 'r': 10},\n",
+    "            'currentvalue': {\n",
+    "                'font': {'size': 15},\n",
+    "                'prefix': 'Decade:',\n",
+    "                'visible': True,\n",
+    "                'xanchor': 'right',\n",
+    "            },\n",
+    "            'visible': True,\n",
+    "        }]\n",
+    "    )\n",
+    "\n",
+    "    return bar1960_fig\n",
+    "\n",
+    "test_fig = update_bar1960_fig('Mindanao')\n",
+    "test_fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**APP IDEAS**\n",
+    "- The temperature page will be in two columns 3:9\n",
+    "- The right one is the map TEMP 2\n",
+    "- The left one is a header and story explaining the map\n",
+    "- below the text will be a modal button \"See More\" that opens a modal\n",
+    "- The modal contains two columns, the left one is a text header and story, the right one is TEMP 1 bar graph\n",
+    "- The app will have a footer that has two buttons at its ends, \"< BACK\" and \"NEXT >\"\n",
+    "- Back will lead to the initial page and Next will lead to the Biodiversity Page"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Biodiversity"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(biodiversity_gdf.shape)\n",
+    "biodiversity_gdf.head()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### BIO 1: The first visualization for the biodiversity data is a **Chloropleth Map** that shows the number of [Total/CR/EN/VU] unique species per Province.\n",
+    "#### Interactions:\n",
+    "- DropDown/RadioButtons that switch between \"Total, CR, EN and VU\" through Dash"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "land_gdf = biodiversity_gdf[(biodiversity_gdf['area_type'].isin(['Land']))]\n",
+    "\n",
+    "fig = px.choropleth_mapbox(land_gdf,\n",
+    "                            geojson=land_gdf.geometry,\n",
+    "                            locations=land_gdf.index,\n",
+    "                            color='Critically Endangered', # Change this based on dropdown\n",
+    "                            color_continuous_scale='balance',\n",
+    "                            range_color=[land_gdf['Critically Endangered'].min(), land_gdf['Critically Endangered'].max()],  \n",
+    "                            mapbox_style='streets',  \n",
+    "                            zoom=5,  \n",
+    "                            center={\"lat\": 12.8797, \"lon\": 122.7740}, \n",
+    "                            opacity=0.6,\n",
+    "                            )\n",
+    "\n",
+    "fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))\n",
+    "\n",
+    "fig.update_layout(coloraxis_colorbar=dict(title=\"Critically Endangered<br>Species\",yanchor=\"top\",xanchor='right',\n",
+    "                            y=1, x=1, ticks=\"outside\", thickness=10, title_font_color='#0c232c',  \n",
+    "                            ticksuffix=' Species',\n",
+    "                            tickfont=dict(\n",
+    "                            size=12,\n",
+    "                            color='#0c232c')\n",
+    "                        )\n",
+    "                    )\n",
+    "\n",
+    "hover_template = '<b>%{customdata[0]}</b><br>Unique Species: %{customdata[1]:.0f}<extra></extra>'\n",
+    "\n",
+    "fig.update_traces(hovertemplate=hover_template,\n",
+    "                  customdata=land_gdf[['name', 'Critically Endangered']])\n",
+    "\n",
+    "fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### BIO 2: The second visualization for the biodiversity data is a DRILLDOWN operation on the previous **Chloropleth Map** that shows the number of [Total/CR/EN/VU] unique species per Province. In addition to this, the drilldown will be based on Island Groups\n",
+    "#### Interactions:\n",
+    "- A button that triggers the drilldown\n",
+    "- DropDown/RadioButtons that switch between \"Total, CR, EN and VU\" (from the previous map BIO 1)\n",
+    "- DropDown/RadioButtons that switch between \"Luzon, Visayas, and Mindanao\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Set Island Group\n",
+    "land_gdf = biodiversity_gdf[(biodiversity_gdf['area_type'].isin(['Land'])) & (biodiversity_gdf['island_group'].isin(['Luzon']))]\n",
+    "\n",
+    "# Createe the figure\n",
+    "fig = px.choropleth_mapbox(land_gdf,\n",
+    "                            geojson=land_gdf.geometry,\n",
+    "                            locations=land_gdf.index,\n",
+    "                            color='Critically Endangered', # Change this based on dropdown\n",
+    "                            color_continuous_scale='balance',\n",
+    "                            range_color=[land_gdf['Critically Endangered'].min(), land_gdf['Critically Endangered'].max()],  \n",
+    "                            mapbox_style='streets',  \n",
+    "                            zoom=6,  \n",
+    "                            center={\"lat\": 12.8797, \"lon\": 122.7740}, \n",
+    "                            opacity=0.6,\n",
+    "                            )\n",
+    "\n",
+    "fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))\n",
+    "\n",
+    "fig.update_layout(coloraxis_colorbar=dict(title=\"Critically Endangered<br>Species\",yanchor=\"top\",xanchor='right',\n",
+    "                            y=1, x=1, ticks=\"outside\", thickness=10, title_font_color='#0c232c',  \n",
+    "                            ticksuffix=' Species',\n",
+    "                            tickfont=dict(\n",
+    "                            size=12,\n",
+    "                            color='#0c232c')\n",
+    "                        )\n",
+    "                    )\n",
+    "\n",
+    "hover_template = '<b>%{customdata[0]}</b><br>Unique Species: %{customdata[1]:.0f}<extra></extra>'\n",
+    "\n",
+    "fig.update_traces(hovertemplate=hover_template,\n",
+    "                  customdata=land_gdf[['name', 'Critically Endangered']])\n",
+    "\n",
+    "fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### BIO 3: The third visualization for the biodiversity data is ALSO a DRILLDOWN operation on the first chloropleth map and is a **Horizontal Stacked Bar Chart** that shows the number of [CR/EN/VU] unique species per Province. In addition to this, the drilldown will be based on Island Groups\n",
+    "#### Interactions:\n",
+    "- A button that triggers the drilldown (same button as BIO 2)\n",
+    "- DropDown/RadioButtons that switch between \"Luzon, Visayas, and Mindanao\" (same button as BIO 2)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Set Island Group\n",
+    "land_gdf = biodiversity_gdf[(biodiversity_gdf['area_type'].isin(['Land'])) & (biodiversity_gdf['island_group'].isin(['Luzon']))].sort_values(by='total_species', ascending=True)\n",
+    "\n",
+    "# Create stacked bar plot using Plotly Express\n",
+    "fig = px.bar(land_gdf,\n",
+    "             x=['Vulnerable', 'Endangered', 'Critically Endangered'],  \n",
+    "             y='name',  \n",
+    "             title='Number of Unique Endangered Species in Luzon',\n",
+    "             labels={'Vulnerable', 'Endangered', 'Critically Endangered'},  \n",
+    "             orientation='h',  \n",
+    "             height=600,  \n",
+    "             color_discrete_sequence=['yellow', 'orange', 'red'], \n",
+    "             )\n",
+    "\n",
+    "fig.update_layout(\n",
+    "    xaxis_title='Number of Unique Species', \n",
+    "    yaxis_title='Province',\n",
+    "    legend_title='Category',\n",
+    ")\n",
+    "\n",
+    "hover_template = '<b>%{customdata[0]}</b><br>Unique Species: %{x}<extra></extra>'\n",
+    "\n",
+    "fig.update_traces(hovertemplate=hover_template,\n",
+    "                  customdata=land_gdf[['name']])\n",
+    "\n",
+    "fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### BIO 4: The fourth visualization for the biodiversity data is a **Chloropleth Map** that shows the number of [Total/CR/EN/VU] unique species per sea.\n",
+    "#### Interactions:\n",
+    "- DropDown/RadioButtons that switch between \"Total, CR, EN and VU\" through Dash"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sea_gdf = biodiversity_gdf[(biodiversity_gdf['area_type'].isin(['Sea']))]\n",
+    "\n",
+    "fig = px.choropleth_mapbox(sea_gdf,\n",
+    "                            geojson=sea_gdf.geometry,\n",
+    "                            locations=sea_gdf.index,\n",
+    "                            color='Critically Endangered', # Change this based on dropdown\n",
+    "                            color_continuous_scale='sunsetdark',\n",
+    "                            range_color=[sea_gdf['Critically Endangered'].min(), sea_gdf['Critically Endangered'].max()],  \n",
+    "                            mapbox_style='streets',  \n",
+    "                            zoom=5,  \n",
+    "                            center={\"lat\": 12.8797, \"lon\": 122.7740}, \n",
+    "                            opacity=0.6,\n",
+    "                            )\n",
+    "\n",
+    "fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))\n",
+    "\n",
+    "fig.update_layout(coloraxis_colorbar=dict(title=\"Critically Endangered<br>Species\",yanchor=\"top\",xanchor='right',\n",
+    "                            y=1, x=1, ticks=\"outside\", thickness=10, title_font_color='#0c232c',  \n",
+    "                            ticksuffix=' Species',\n",
+    "                            tickfont=dict(\n",
+    "                            size=12,\n",
+    "                            color='#0c232c')\n",
+    "                        )\n",
+    "                    )\n",
+    "\n",
+    "hover_template = '<b>%{customdata[0]}</b><br>Unique Species: %{customdata[1]:.0f}<extra></extra>'\n",
+    "\n",
+    "fig.update_traces(hovertemplate=hover_template,\n",
+    "                  customdata=sea_gdf[['name', 'Critically Endangered']])\n",
+    "\n",
+    "fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### BIO 5: The fifth visualization for the biodiversity data is a **Horizontal Stacked Bar Chart** that shows the number of [CR/EN/VU] unique species per Sea.\n",
+    "#### Interactions:\n",
+    "- A button that shows the visualization"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "sea_gdf = biodiversity_gdf[(biodiversity_gdf['area_type'].isin(['Sea']))]\n",
+    "# Create stacked bar plot using Plotly Express\n",
+    "fig = px.bar(sea_gdf,\n",
+    "             x=['Vulnerable', 'Endangered', 'Critically Endangered'],  \n",
+    "             y='name',  \n",
+    "             title='Number of Unique Endangered Species in Sea',\n",
+    "             labels={'Vulnerable', 'Endangered', 'Critically Endangered'},  \n",
+    "             orientation='h',  \n",
+    "             height=600,  \n",
+    "             color_discrete_sequence=['yellow', 'orange', 'red'], \n",
+    "             )\n",
+    "\n",
+    "fig.update_layout(\n",
+    "    xaxis_title='Number of Unique Species', \n",
+    "    yaxis_title='Province',\n",
+    "    legend_title='Category',\n",
+    ")\n",
+    "\n",
+    "hover_template = '<b>%{customdata[0]}</b><br>Unique Species: %{x}<extra></extra>'\n",
+    "\n",
+    "fig.update_traces(hovertemplate=hover_template,\n",
+    "                  customdata=sea_gdf[['name']])\n",
+    "\n",
+    "fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**APP IDEAS**\n",
+    "- There is toggle that switches the page to show Land Data or Sea Data\n",
+    "- Bio 1, Bio 2, and Bio 3 is part of the Land and will have interactions that are connected to each other\n",
+    "- Land data will somehow be related to the temp data\n",
+    "- Bio 4, and Bio 5 is part of the Sea and will havee interactions that are also connected to each other\n",
+    "- Will also be compared to temp data"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Disaster"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(disaster_gdf.shape)\n",
+    "disaster_gdf.head()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### DISASTER 1: The first visualization for the disaster data is a **Chloropleth Map** that shows the number of [Disaster Type] per Province.\n",
+    "#### Interactions:\n",
+    "- DropDown/RadioButtons that switch between Disaster Types (Total, Storm, Flood, Earthquake, Volcanic, Mass Movement, Drought) through Dash"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fig = px.choropleth_mapbox(disaster_gdf,\n",
+    "                            geojson=disaster_gdf.geometry,\n",
+    "                            locations=disaster_gdf.index,\n",
+    "                            color='Total Disaster Count', # Change based on dropdown value\n",
+    "                            color_continuous_scale='reds',\n",
+    "                            range_color=[disaster_gdf['Total Disaster Count'].min(), disaster_gdf['Total Disaster Count'].max()],  \n",
+    "                            mapbox_style='streets',  \n",
+    "                            zoom=5,  \n",
+    "                            center={\"lat\": disaster_gdf.geometry.centroid.y.mean(), \n",
+    "                                    \"lon\": disaster_gdf.geometry.centroid.x.mean()}, \n",
+    "                            opacity=0.6,\n",
+    "                            )\n",
+    "\n",
+    "fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))\n",
+    "\n",
+    "fig.update_layout(coloraxis_colorbar=dict(title=\"Total Disaster<br>Count\",yanchor=\"top\",xanchor='right',\n",
+    "                            y=1, x=1, ticks=\"outside\", thickness=10, title_font_color='#0c232c',  \n",
+    "                            # ticksuffix=' disasters',\n",
+    "                            tickfont=dict(\n",
+    "                            size=12,\n",
+    "                            color='#0c232c')\n",
+    "                        )\n",
+    "                    )\n",
+    "\n",
+    "hover_template = '<b>%{customdata[0]}</b><br>%{customdata[1]:.0f} disasters<extra></extra>'\n",
+    "\n",
+    "fig.update_traces(hovertemplate=hover_template,\n",
+    "                  customdata=disaster_gdf[['Area Name', 'Total Disaster Count']])\n",
+    "\n",
+    "fig.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### DISASTER 2: The second visualization for the disaster data is a **Horizontal Bar Chart** that shows the number of [Disaster Type] per Province per [Island Group].\n",
+    "#### Interactions:\n",
+    "- DropDown/RadioButtons that switch between Disaster Types (Total, Storm, Flood, Earthquake, Volcanic, Mass Movement, Drought) through Dash (Same button as Disaster 1 visualization)\n",
+    "- DropDown/RadioButtons that switch between Island Groups (Luzon Visayas Mindanao)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### DISASTER 3: The third visualization for the disaster data is a **Chloropleth Map** that shows the number of [Disaster Type] per REGION.\n",
+    "#### Interactions:\n",
+    "- DropDown/RadioButtons that switch between Disaster Types (Total, Storm, Flood, Earthquake, Volcanic, Mass Movement, Drought) through Dash"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Region_gdf = disaster_gdf.copy()\n",
+    "Region_tot_ave = Region_gdf.drop(columns=['geometry']).groupby('Region').sum()\n",
+    "\n",
+    "def region_count(disaster_type,col_name):\n",
+    "    Region_gdf[col_name] = np.nan #Create a new column that contains the number of disasters per region\n",
+    "\n",
+    "    for i1,r1 in Region_gdf.iterrows():\n",
+    "        for i2,r2 in Region_tot_ave.iterrows():\n",
+    "            if r1['Region'] == i2:\n",
+    "                Region_gdf.at[i1, col_name] = r2[disaster_type]\n",
+    "            else:\n",
+    "                continue\n",
+    "\n",
+    "# Total Disasters per Region\n",
+    "region_count('Total Disaster Count','Region_tot')\n",
+    "# Storm per Region\n",
+    "region_count('Storm Count','Region_storm')\n",
+    "# Flood per Region\n",
+    "region_count('Flood Count','Region_flood')\n",
+    "# Earthquake per Region\n",
+    "region_count('Earthquake Count','Region_earth')\n",
+    "# Volcanic Activity per Region\n",
+    "region_count('Volcanic Activity Count','Region_vol')\n",
+    "# Mass Movement per Region\n",
+    "region_count('Mass Movement Count','Region_mass')\n",
+    "# Drought per Region\n",
+    "region_count('Drought Count','Region_drought')\n",
+    "Region_gdf.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_map(division, disaster_type):\n",
+    "    curr_division = ''\n",
+    "    curr_disaster = ''\n",
+    "    if division == 'Region':\n",
+    "        curr_division = 'Region'\n",
+    "        match disaster_type:\n",
+    "            case 'Total Disaster':\n",
+    "                curr_disaster = 'Region_tot'\n",
+    "            case 'Storm':\n",
+    "                curr_disaster = 'Region_storm'\n",
+    "            case 'Flood':\n",
+    "                curr_disaster = 'Region_flood'\n",
+    "            case 'Earthquake':\n",
+    "                curr_disaster = 'Region_earth'\n",
+    "            case 'Volcanic Activity':\n",
+    "                curr_disaster = 'Region_vol'\n",
+    "            case 'Mass Movement':\n",
+    "                curr_disaster = 'Region_mass'\n",
+    "            case 'Drought':\n",
+    "                curr_disaster = 'Region_drought'\n",
+    "            case _:\n",
+    "                return\n",
+    "    elif division == 'Province':\n",
+    "        curr_division = 'Area Name'\n",
+    "        match disaster_type:\n",
+    "            case 'Total Disaster':\n",
+    "                curr_disaster = 'Total Disaster Count'\n",
+    "            case 'Storm':\n",
+    "                curr_disaster = 'Storm Count'\n",
+    "            case 'Flood':\n",
+    "                curr_disaster = 'Flood Count'\n",
+    "            case 'Earthquake':\n",
+    "                curr_disaster = 'Earthquake Count'\n",
+    "            case 'Volcanic Activity':\n",
+    "                curr_disaster = 'Volcanic Activity Count'\n",
+    "            case 'Mass Movement':\n",
+    "                curr_disaster = 'Mass Movement Count'\n",
+    "            case 'Drought':\n",
+    "                curr_disaster = 'Drought Count'\n",
+    "            case _:\n",
+    "                return\n",
+    "    else:\n",
+    "        return\n",
+    "\n",
+    "    map_fig = px.choropleth_mapbox(Region_gdf,\n",
+    "                                geojson=Region_gdf.geometry,\n",
+    "                                locations=Region_gdf.index,\n",
+    "                                color=curr_disaster, # Change based on dropdown value\n",
+    "                                color_continuous_scale='amp',\n",
+    "                                range_color=[Region_gdf[curr_disaster].min(), Region_gdf[curr_disaster].max()],  \n",
+    "                                mapbox_style='streets',  \n",
+    "                                zoom=5,  \n",
+    "                                center={\"lat\": 12.8797, \"lon\": 122.7740}, \n",
+    "                                opacity=0.6,\n",
+    "                                )\n",
+    "\n",
+    "    map_fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))\n",
+    "\n",
+    "    map_fig.update_layout(coloraxis_colorbar=dict(title= disaster_type + \"<br>Count\",yanchor=\"top\",xanchor='left',\n",
+    "                                y=1, x=0, ticks=\"outside\", ticklabelposition=\"outside left\", thickness=10, title_font_color='#0c232c',  \n",
+    "                                tickfont=dict(\n",
+    "                                size=12,\n",
+    "                                color='#0c232c')\n",
+    "                            )\n",
+    "                        )\n",
+    "\n",
+    "    hover_template = '<b>%{customdata[0]}</b><br>' + disaster_type + ' Count: %{customdata[1]:.0f}<extra></extra>'\n",
+    "\n",
+    "    map_fig.update_traces(hovertemplate=hover_template,\n",
+    "                    customdata=Region_gdf[[curr_division, curr_disaster]])\n",
+    "\n",
+    "    return map_fig\n",
+    "\n",
+    "dis_map = update_map('Province', 'Storm')\n",
+    "dis_map.show()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_disaster_bar(division, disaster_type, island_group):\n",
+    "    curr_division = ''\n",
+    "    curr_disaster = ''\n",
+    "    if division == 'Region':\n",
+    "        curr_division = 'Region'\n",
+    "        match disaster_type:\n",
+    "            case 'Total Disaster':\n",
+    "                curr_disaster = 'Region_tot'\n",
+    "            case 'Storm':\n",
+    "                curr_disaster = 'Region_storm'\n",
+    "            case 'Flood':\n",
+    "                curr_disaster = 'Region_flood'\n",
+    "            case 'Earthquake':\n",
+    "                curr_disaster = 'Region_earth'\n",
+    "            case 'Volcanic Activity':\n",
+    "                curr_disaster = 'Region_vol'\n",
+    "            case 'Mass Movement':\n",
+    "                curr_disaster = 'Region_mass'\n",
+    "            case 'Drought':\n",
+    "                curr_disaster = 'Region_drought'\n",
+    "            case _:\n",
+    "                return\n",
+    "        island_disaster = Region_gdf[Region_gdf['Island Group'] == island_group].groupby('Region')[curr_disaster].sum().sort_values(ascending=True)\n",
+    "        x = island_disaster.values\n",
+    "        y = island_disaster.index\n",
+    "    elif division == 'Province':\n",
+    "        curr_division = 'Area Name'\n",
+    "        match disaster_type:\n",
+    "            case 'Total Disaster':\n",
+    "                curr_disaster = 'Total Disaster Count'\n",
+    "            case 'Storm':\n",
+    "                curr_disaster = 'Storm Count'\n",
+    "            case 'Flood':\n",
+    "                curr_disaster = 'Flood Count'\n",
+    "            case 'Earthquake':\n",
+    "                curr_disaster = 'Earthquake Count'\n",
+    "            case 'Volcanic Activity':\n",
+    "                curr_disaster = 'Volcanic Activity Count'\n",
+    "            case 'Mass Movement':\n",
+    "                curr_disaster = 'Mass Movement Count'\n",
+    "            case 'Drought':\n",
+    "                curr_disaster = 'Drought Count'\n",
+    "            case _:\n",
+    "                return\n",
+    "        island_disaster = Region_gdf[(Region_gdf['Island Group'] == island_group)].sort_values(by='Total Disaster Count', ascending=True)\n",
+    "        x = curr_disaster\n",
+    "        y = curr_division\n",
+    "    else:\n",
+    "        return\n",
+    "    # Create stacked bar plot using Plotly Express\n",
+    "    bar_fig = px.bar(island_disaster,\n",
+    "                x=x,  \n",
+    "                y=y,  \n",
+    "                title=disaster_type + \" in \" + island_group + \" per \" + division,\n",
+    "                orientation='h',  \n",
+    "                height=750,  \n",
+    "                color_discrete_sequence=['lightblue'], \n",
+    "                )\n",
+    "    bar_fig.update_layout(\n",
+    "        xaxis_title=disaster_type, \n",
+    "        yaxis_title=division,\n",
+    "    )\n",
+    "    hover_template = '<b>%{customdata[0]}</b><br>' + disaster_type + ' Count: %{x}<extra></extra>'\n",
+    "    bar_fig.update_traces(hovertemplate=hover_template,\n",
+    "                    customdata=Region_gdf[[curr_division]])\n",
+    "\n",
+    "    return bar_fig\n",
+    "\n",
+    "test = update_disaster_bar('Province', 'Volcanic Activity', 'Visayas')\n",
+    "test.show()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### DISASTER 4: The fourth visualization for the disaster data is a **Horizontal Bar Chart** that shows the number of [Disaster Type] per REGION per [Island Group].\n",
+    "#### Interactions:\n",
+    "- DropDown/RadioButtons that switch between Disaster Types (Total, Storm, Flood, Earthquake, Volcanic, Mass Movement, Drought) through Dash (Same button as Disaster 3 visualization)\n",
+    "- DropDown/RadioButtons that switch between Island Groups (Luzon Visayas Mindanao)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "luzon_reg_disaster = Region_gdf[Region_gdf['Island Group'] == 'Luzon'].groupby('Region')['Region_tot'].sum().sort_values(ascending=True)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Island Group\n",
+    "luzon_reg_disaster = Region_gdf[Region_gdf['Island Group'] == 'Luzon'].groupby('Region')['Region_tot'].sum().sort_values(ascending=True)\n",
+    "\n",
+    "# Create stacked bar plot using Plotly Express\n",
+    "fig = px.bar(x=luzon_reg_disaster.values,  \n",
+    "             y=luzon_reg_disaster.index,  \n",
+    "             title='Total Disasters in Luzon per Region',\n",
+    "             orientation='h',  \n",
+    "             height=600,  \n",
+    "             color_discrete_sequence=['blue'], \n",
+    "             )\n",
+    "\n",
+    "fig.update_layout(\n",
+    "    xaxis_title='Total Disasters', \n",
+    "    yaxis_title='Region',\n",
+    ")\n",
+    "\n",
+    "hover_template = '<b>%{y}</b><br>%{x} disasters<extra></extra>'\n",
+    "\n",
+    "fig.update_traces(hovertemplate=hover_template,\n",
+    "                  customdata=luzon_reg_disaster.reset_index().values)\n",
+    "\n",
+    "fig.show()\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**APP IDEAS**\n",
+    "- There is toggle that switches the visualizations to rollup or drilldown between visualizing by province or by region\n",
+    "- Disaster 1 and 2 interactions will be connected\n",
+    "- Disasteer 3 and 4 interactions will be connected\n",
+    "- Header and stories to be provided as text "
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

requirements.txt

@@ -0,0 +1,20 @@
+# Python 3.11.8
+# conda install -c conda-forge gdal
+# matplotlib
+# seaborn
+# rasterio
+# georasters
+# openpyxl
+Pyarrow
+pandas
+numpy
+dash
+plotly
+geopandas
+dash-bootstrap-components
+dash_daq
+flask-caching
+traitlets
+nbformat
+gunicorn
+python-dotenv