Update app.py

app.py

@@ -7,7 +7,7 @@ import pandas as pd
 import hvplot.pandas
 import geoviews as gv
 import holoviews as hv
-from holoviews.streams import Tap, PointerX
+from holoviews.streams import Tap
 from bokeh.themes import Theme
 
 pn.extension(throttled=True, notifications=True)
@@ -52,6 +52,7 @@ Data sourced from the [Iowa Environmental Mesonet](https://mesonet.agron.iastate
 """
 
 VAR_OPTIONS_R = {v: k for k, v in VAR_OPTIONS.items()}
+ONI_URL = "https://raw.githubusercontent.com/ahuang11/oni/master/oni.csv"
 NETWORKS_URL = "https://mesonet.agron.iastate.edu/sites/networks.php?network=_ALL_&format=csv&nohtml=on"
 STATION_URL_FMT = (
     "https://mesonet.agron.iastate.edu/cgi-bin/request/daily.py?network={network}&stations={station}"
@@ -59,6 +60,20 @@ STATION_URL_FMT = (
 )
 DARK_RED = "#FF5555"
 DARK_BLUE = "#5588FF"
+SEASON_TO_MONTH = {
+    "DJF": "JAN",
+    "JFM": "FEB",
+    "FMA": "MAR",
+    "MAM": "APR",
+    "AMJ": "MAY",
+    "MJJ": "JUN",
+    "JJA": "JUL",
+    "JAS": "AUG",
+    "ASO": "SEP",
+    "SON": "OCT",
+    "OND": "NOV",
+    "NDJ": "DEC",
+}
 XTICKS = [
     (1, "JAN"),
     (31, "FEB"),
@@ -73,6 +88,12 @@ XTICKS = [
     (304, "NOV"),
     (334, "DEC"),
 ]
+MONTH_TO_JULIAN_DAY = {month: day for day, month in XTICKS}
+ONI_COLORS = {
+    "El Nino": DARK_RED,
+    "Neutral": "grey",
+    "La Nina": DARK_BLUE,
+}
 
 THEME_JSON = {
     "attrs": {
@@ -143,18 +164,23 @@ hv.renderer("bokeh").theme = theme
 
 
 class ClimateApp(pn.viewable.Viewer):
-    network = param.Selector(default="WA_ASOS", label="Network (type to search)")
-    station = param.Selector(default="SEA", label="Station (type to search)")
-    year = param.Integer(default=this_year, bounds=(1928, this_year))
+    network = param.Selector(
+        default="WA_ASOS", label="Network (delete & type to search)"
+    )
+    station = param.Selector(default="SEA", label="Station (delete & type to search)")
+    year = param.Integer(default=this_year - 1, bounds=(1928, this_year))
     year_range = param.Range(
         default=(1990, 2020), bounds=(1928, this_year), label="Average Range"
     )
     var = param.Selector(default="max_temp_f", objects=sorted(VAR_OPTIONS.values()))
     stat = param.Selector(default="Mean", objects=["Mean", "Median"])
 
+    _title = param.String()
+    _ylabel = param.String()
+
     def __init__(self, **params):
         super().__init__(**params)
-        self._sidebar = pn.Column(sizing_mode="stretch_both", loading=True)
+        self._sidebar = pn.Column(sizing_mode="stretch_both")
         self._main = pn.Column(
             pn.indicators.LoadingSpinner(
                 value=True, width=25, height=25, name="Loading, please wait a moment..."
@@ -162,8 +188,6 @@ class ClimateApp(pn.viewable.Viewer):
             sizing_mode="stretch_both",
         )
         self._modal = pn.Column(width=850, height=500, align="center")
-        pn.state.onload(self._onload)
-
         self._template = pn.template.FastListTemplate(
             sidebar=[self._sidebar],
             main=[self._main],
@@ -171,12 +195,14 @@ class ClimateApp(pn.viewable.Viewer):
             theme="dark",
             theme_toggle=False,
             main_layout=None,
-            title="Select Year vs Average Comparison",
+            title="Year vs Climatology",
             accent="grey",
         )
+        pn.state.onload(self._onload)
 
     def _onload(self):
         try:
+            self._sidebar.loading = True
             self._populate_sidebar()
             self._populate_main()
             self._populate_modal()
@@ -185,6 +211,7 @@ class ClimateApp(pn.viewable.Viewer):
 
     def _populate_sidebar(self):
         self._network_df = self._get_network_df()
+        self._oni_df = self._get_oni_df()
         networks = sorted(self._network_df["iem_network"].unique())
         self.param["network"].objects = networks
 
@@ -207,7 +234,7 @@ class ClimateApp(pn.viewable.Viewer):
             self.param.stat, sizing_mode="stretch_width"
         )
         self._sidebar.objects = [
-            WELCOME_MESSAGE,
+            pn.pane.Markdown(WELCOME_MESSAGE),
             open_button,
             network_select,
             station_select,
@@ -215,17 +242,63 @@ class ClimateApp(pn.viewable.Viewer):
             year_slider,
             year_range_slider,
             stat_select,
-            FOOTER_MESSAGE,
+            pn.pane.Markdown(FOOTER_MESSAGE),
         ]
 
     def _populate_main(self):
+        self._tap_x = Tap()
         self._station_pane = pn.pane.HoloViews(
-            sizing_mode="stretch_both", min_width=800, min_height=400
+            sizing_mode="stretch_both",
+            min_width=800,
+            min_height=350,
+        )
+        self._day_pane = pn.pane.HoloViews(
+            sizing_mode="stretch_both",
+            min_width=800,
+            min_height=350,
         )
         self._update_stations()
         self._update_var_station_dependents()
-        self._update_station_pane()
-        self._main.objects = [self._station_pane]
+        self._day_pane.object = pn.bind(
+            self._update_day_plot,
+            self.param.var,
+            self.param.station,
+            self.param.year,
+            self.param.year_range,
+            self._tap_x.param.x,
+        )
+        pointer_vline = hv.DynamicMap(self._update_vline, streams=[self._tap_x])
+        oni_plot = hv.DynamicMap(
+            self._update_oni_plot
+        )
+        station_plot = hv.DynamicMap(
+            pn.bind(
+                self._update_station_plot,
+                self.param.var,
+                self.param.station,
+                self.param.year,
+                self.param.year_range,
+                self.param.stat,
+            ),
+        )
+        self._station_pane.object = (
+            (oni_plot * station_plot * pointer_vline)
+            .opts(
+                xlabel="Time of Year",
+                gridstyle={"ygrid_line_alpha": 0},
+                xticks=XTICKS,
+                show_grid=True,
+                padding=(0, (0, 0.45)),
+                responsive=True,
+                shared_axes=False,
+                legend_position="top_right"
+            )
+            .apply.opts(title=self.param._title, ylabel=self.param._ylabel)
+        )
+        self._update_ylabel()
+        self._update_title()
+
+        self._main.objects = [self._station_pane, self._day_pane]
 
     def _populate_modal(self):
         network_points = self._network_df.hvplot.points(
@@ -249,7 +322,9 @@ class ClimateApp(pn.viewable.Viewer):
 
         tap = Tap(source=network_points)
         pn.bind(self._update_station, x=tap.param.x, y=tap.param.y, watch=True)
-        instructions = "#### The nearest station will be selected when you click on the map."
+        instructions = pn.pane.Markdown(
+            "#### The nearest station will be selected when you click on the map."
+        )
         network_pane = pn.pane.HoloViews(
             network_points * gv.tile_sources.CartoDark(),
         )
@@ -258,6 +333,15 @@ class ClimateApp(pn.viewable.Viewer):
     def _open_modal(self, event):
         self._template.open_modal()
 
+    @pn.cache
+    def _get_oni_df(self):
+        df = pd.read_csv(ONI_URL)
+        df["month"] = df["season"].map(SEASON_TO_MONTH)
+        df["julian_day"] = df["month"].map(MONTH_TO_JULIAN_DAY)
+        df["julian_day_end"] = df["julian_day"].shift(-1).fillna(365)
+        df["oni"] = df["oni"].str.replace("_", " ").str.title()
+        return df
+
     @pn.cache
     def _get_network_df(self):
         network_df = pd.read_csv(NETWORKS_URL)
@@ -265,6 +349,7 @@ class ClimateApp(pn.viewable.Viewer):
 
     @pn.depends("network", watch=True)
     def _update_stations(self):
+        self._template.close_modal()
         network_df_subset = self._network_df.loc[
             self._network_df["iem_network"] == self.network,
             ["stid", "station_name"],
@@ -272,7 +357,6 @@ class ClimateApp(pn.viewable.Viewer):
         names = sorted(network_df_subset["station_name"].unique())
         stids = sorted(network_df_subset["stid"].unique())
         self.param["station"].objects = names + stids
-        self._template.close_modal()
 
     def _update_station(self, x, y):
         if x is None or y is None:
@@ -332,101 +416,181 @@ class ClimateApp(pn.viewable.Viewer):
     @pn.depends("var", "station", watch=True)
     def _update_var_station_dependents(self):
         try:
-            self._station_pane.loading = True
+            self._main.loading = True
             self._station_df = self._get_station_df(self.station, self.var).dropna()
             if len(self._station_df) == 0:
                 return
 
             year_range_min = self._station_df["year"].min()
             year_range_max = self._station_df["year"].max()
-            if self.year_range[0] < year_range_min:
-                self.year_range = (year_range_min, self.year_range[1])
-            if self.year_range[1] > year_range_max:
-                self.year_range = (self.year_range[0], year_range_max)
-
-            self.param["year_range"].bounds = (year_range_min, year_range_max)
-
             self.param["year"].bounds = (year_range_min, year_range_max)
             if self.year < year_range_min:
                 self.year = year_range_min
             if self.year > year_range_max:
                 self.year = year_range_max
         finally:
-            self._station_pane.loading = False
+            self._main.loading = False
+
+    def _update_vline(self, x, y):
+        if x is None:
+            x = 0
+        if y is None:
+            y = 0
+        vline = hv.VLine(x).opts(line_width=0.9, color="lightgrey")
+        text = hv.Text(
+            x,
+            y,
+            f"Julian Day {int(x)}",
+        ).opts(
+            text_color="lightgrey",
+            text_align="left",
+            text_baseline="bottom",
+            text_alpha=0.8,
+        )
+        return vline * text
+
+    @param.depends("year", watch=True)
+    def _update_oni_plot(self):
+        df = self._oni_df
+        df_year = df.loc[df["year"] == 1998]
+        df_year.iloc[-1, -1] = 365
+
+        overlay = hv.Overlay([])
+        for oni in df_year["oni"].unique():
+            df_subset = df_year.loc[df_year["oni"] == oni, ["julian_day", "julian_day_end"]]
+            overlay *= hv.VSpans(
+                df_subset,
+                ["julian_day", "julian_day_end"],
+                label=oni,
+            ).opts(color=ONI_COLORS[oni], alpha=0.18, line_alpha=0)
+        return overlay
+
+    def _update_day_plot(self, var, station, year, year_range, x):
+        df = self._station_df
+        if not x:
+            x = 1
+        x = int(x)
+        df_day_year = df.query(f"year == {year}")
+        if x > df_day_year["dayofyear"].max():
+            x = df_day_year["dayofyear"].max()
+        day_year = df_day_year.loc[df_day_year["dayofyear"] == x, self.var].iloc[0]
+        df_subset = df.loc[df["year"].between(*year_range)]
+        df_day_climo = df_subset.loc[df_subset["dayofyear"] == x]
+        df_day_climo = df_day_climo.assign(
+            above_or_below=df_day_climo[self.var] >= day_year
+        )
+        title = (
+            f"{VAR_OPTIONS_R[self.var]} across {year_range[0]}-{year_range[1]} on "
+            + df_day_climo.index.strftime("%B %d")[0]
+            + f" (Julian Day {x}) "
+        )
 
-    @pn.depends("var", "station", "year", "year_range", "stat", watch=True)
-    def _update_station_pane(self):
+        days_above = df_day_climo.loc[df_day_climo["above_or_below"] == True].shape[0]
+        days_below = df_day_climo.loc[df_day_climo["above_or_below"] == False].shape[0]
+
+        min_x = df[self.var].min()
+
+        plot = hv.Overlay([])
+        plot *= df_day_climo.hvplot.hist(
+            self.var,
+            responsive=True,
+            by="above_or_below",
+            bins=11,
+            legend=False,
+            color=hv.Cycle([DARK_BLUE, DARK_RED]),
+        ).opts("Histogram", fill_alpha=0.7, line_alpha=0)
+        plot *= hv.VLine(day_year).opts(line_width=0.9, color="lightgrey")
+        plot *= hv.Text(
+            day_year,
+            0.1,
+            f"{year}",
+        ).opts(
+            text_color="lightgrey",
+            text_align="left",
+            text_baseline="bottom",
+            text_alpha=0.8,
+        )
+        plot *= self._create_text_days_labels(
+            df,
+            days_above,
+            days_below,
+            text_x=min_x + 5,
+            text_y=4,
+            spacing=1,
+            suffix=f"YEARS",
+        )
+
+        return plot.opts(
+            xlabel=VAR_OPTIONS_R[self.var],
+            ylabel="Number of Days",
+            title=title,
+            shared_axes=False,
+            show_grid=True,
+            gridstyle={"xgrid_line_alpha": 0},
+            xlim=(min_x, df[self.var].max()),
+        )
+
+    def _update_station_plot(self, var, station, year, year_range, stat):
         if len(self._station_df) == 0:
             return
 
-        try:
-            self._station_pane.loading = True
-
-            # base dataframes
-            df = self._station_df
-            df_avg = (
-                df.loc[df["year"].between(*self.year_range)].groupby("dayofyear").mean()
-            )
-            df_year = df[df.year == self.year]
+        # base dataframes
+        df = self._station_df
+        df_subset = df.loc[df["year"].between(*year_range)]
+        df_avg = df_subset.groupby("dayofyear").mean()
+        df_year = df[df.year == year]
+
+        # above/below
+        df_year = df_year[["dayofyear", self.var]].merge(
+            df_avg.reset_index()[["dayofyear", self.var]],
+            on="dayofyear",
+            suffixes=("", "_avg"),
+        )
+        df_year["above_or_below"] = df_year[self.var] >= df_year[f"{self.var}_avg"]
+        days_above = df_year.loc[df_year["above_or_below"] == True].shape[0]
+        days_below = df_year.loc[df_year["above_or_below"] == False].shape[0]
 
-            # above/below
-            df_above = df_year[["dayofyear", self.var]].merge(
-                df_avg.reset_index()[["dayofyear", self.var]],
-                on="dayofyear",
-                suffixes=("_year", "_avg"),
-            )
-            df_above[self.var] = df_above[f"{self.var}_avg"]
-            df_above[self.var] = df_above.loc[
-                df_above[f"{self.var}_year"] >= df_above[f"{self.var}_avg"],
-                f"{self.var}_year",
-            ]
-
-            df_below = df_year[["dayofyear", self.var]].merge(
-                df_avg.reset_index()[["dayofyear", self.var]],
-                on="dayofyear",
-                suffixes=("_year", "_avg"),
-            )
-            df_below[self.var] = df_below[f"{self.var}_avg"]
-            df_below[self.var] = df_below.loc[
-                df_below[f"{self.var}_year"] < df_below[f"{self.var}_avg"],
-                f"{self.var}_year",
-            ]
-
-            # stats
-            if self.stat == "Mean":
-                year_avg = df_year[self.var].mean()
-            else:
-                year_avg = df_year[self.var].median()
-            year_max = df_year[self.var].max()
-            year_min = df_year[self.var].min()
-
-            plots = self._create_line_plots(df, df_year, df_avg)
-            lines = self._create_hlines(year_avg, year_max, year_min)
-            texts = self._create_text_labels(year_avg, year_max, year_min)
-            areas = self._create_areas(df_above, df_below)
-            text_days = self._create_text_days_labels(df, df_above, df_below)
-
-            # Overlay all elements
-            title = f"{self._get_station_name()} {self.year} vs AVERAGE ({self.year_range[0]}-{self.year_range[1]})"
-            station_overlay = (plots * lines * texts * areas * text_days).opts(
-                xlabel="TIME OF YEAR",
-                ylabel=VAR_OPTIONS_R[self.var],
-                title=title,
-                gridstyle={"ygrid_line_alpha": 0},
-                xticks=XTICKS,
-                show_grid=True,
-                fontscale=1.18,
-                padding=(0, (0, 0.3)),
-            )
-            self._station_pane.object = station_overlay
-        finally:
-            self._station_pane.loading = False
+        # stats
+        if stat == "Mean":
+            year_avg = df_year[self.var].mean()
+        else:
+            year_avg = df_year[self.var].median()
+        year_max = df_year[self.var].max()
+        year_min = df_year[self.var].min()
+
+        plots = self._create_line_plots(df, df_year, df_avg)
+        lines = self._create_hlines(year_avg, year_max, year_min)
+        texts = self._create_text_labels(year_avg, year_max, year_min)
+        text_days = self._create_text_days_labels(df, days_above, days_below)
+
+        # Overlay all elements
+        station_overlay = plots * lines * texts * text_days
+        return station_overlay
+
+    @pn.depends("var", watch=True)
+    def _update_ylabel(self):
+        self._ylabel = VAR_OPTIONS_R[self.var]
+
+    @pn.depends("station", "year", "year_range", watch=True)
+    def _update_title(self):
+        df = self._station_df
+        df_subset = df.loc[df["year"].between(*self.year_range)]
+        # hack to get the title and ylabel to update
+        year_min = df_subset["year"].min()
+        if self.year_range[0] > year_min:
+            year_min = self.year_range[0]
+        year_max = df_subset["year"].max()
+        if self.year_range[1] < year_max:
+            year_max = self.year_range[1]
+        year_range_label = f"{year_min}-{year_max}"
+        self._title = f"{self._get_station_label()} - {self.year} vs Average ({year_range_label})"
 
     def _create_line_plots(self, df, df_year, df_avg):
         plot_kwargs = {
             "x": "dayofyear",
             "y": self.var,
             "legend": False,
+            "responsive": True,
         }
         plot = df.hvplot(
             by="year",
@@ -435,15 +599,23 @@ class ClimateApp(pn.viewable.Viewer):
             hover=False,
             **plot_kwargs,
         )
-        plot_year = (
-            df_year.hvplot(color="black", hover="vline", **plot_kwargs)
-            .opts(alpha=0.2)
-            .redim.label(**{"dayofyear": "Julian Day", self.var: str(self.year)})
-        )
+        df_above = df_year.copy()
+        df_above.loc[df_above["above_or_below"]] = np.nan
+        df_below = df_year.copy()
+        df_below.loc[~df_below["above_or_below"]] = np.nan
+        plot_year = df_year.hvplot(
+            color="lightgrey", hover="vline", alpha=0.5, **plot_kwargs
+        ).redim.label(**{"dayofyear": "Julian Day", self.var: str(self.year)})
+        plot_above = df_above.hvplot(
+            hover="vline", color=DARK_BLUE, **plot_kwargs
+        ).redim.label(**{"dayofyear": "Julian Day", self.var: str(self.year)})
+        plot_below = df_below.hvplot(
+            hover="vline", color=DARK_RED, **plot_kwargs
+        ).redim.label(**{"dayofyear": "Julian Day", self.var: str(self.year)})
         plot_avg = df_avg.hvplot(
-            color="grey", hover="vline", **plot_kwargs
+            color="lightgrey", hover="vline", **plot_kwargs
         ).redim.label(**{"dayofyear": "Julian Day", self.var: "Average"})
-        return plot * plot_year * plot_avg
+        return plot * plot_year * plot_above * plot_below * plot_avg
 
     def _create_hlines(self, year_avg, year_max, year_min):
         # Create horizontal lines
@@ -486,25 +658,36 @@ class ClimateApp(pn.viewable.Viewer):
         return text_year_avg * text_year_max * text_year_min
 
     def _create_areas(self, df_above, df_below):
-        area_kwargs = {"fill_alpha": 0.2, "line_alpha": 0.8}
-        plot_above = df_above.hvplot.area(
-            x="dayofyear", y=f"{self.var}_avg", y2=self.var, hover=False
-        ).opts(line_color=DARK_RED, fill_color=DARK_RED, **area_kwargs)
-        plot_below = df_below.hvplot.area(
-            x="dayofyear", y=f"{self.var}_avg", y2=self.var, hover=False
-        ).opts(line_color=DARK_BLUE, fill_color=DARK_BLUE, **area_kwargs)
+        area_kwargs = {
+            "x": "dayofyear",
+            "y": f"{self.var}_avg",
+            "y2": self.var,
+            "hover": False,
+            "responsive": True,
+        }
+        area_opts = {"fill_alpha": 0.2, "line_alpha": 0.8}
+        plot_above = df_above.hvplot.area(**area_kwargs).opts(
+            line_color=DARK_RED, fill_color=DARK_RED, **area_opts
+        )
+        plot_below = df_below.hvplot.area(**area_kwargs).opts(
+            line_color=DARK_BLUE, fill_color=DARK_BLUE, **area_opts
+        )
         return plot_above * plot_below
 
-    def _create_text_days_labels(self, df, df_above, df_below):
-        days_above = df_above.loc[
-            df_above[f"{self.var}_year"] >= df_above[f"{self.var}_avg"]
-        ].shape[0]
-        days_below = df_below.loc[
-            df_below[f"{self.var}_year"] < df_below[f"{self.var}_avg"]
-        ].shape[0]
-
-        text_x = 30
-        text_y = df[self.var].max() + 10
+    def _create_text_days_labels(
+        self,
+        df,
+        days_above,
+        days_below,
+        text_x=None,
+        text_y=None,
+        spacing=None,
+        suffix=None,
+    ):
+        text_x = text_x or 30
+        text_y = text_y or df[self.var].max() + 3
+        spacing = spacing or 2
+        suffix = suffix or "DAYS"
         text_days_above = hv.Text(text_x, text_y, f"{days_above}", fontsize=14).opts(
             text_align="right",
             text_baseline="bottom",
@@ -517,13 +700,17 @@ class ClimateApp(pn.viewable.Viewer):
             text_color=DARK_BLUE,
             text_alpha=0.8,
         )
-        text_above = hv.Text(text_x + 3, text_y, "DAYS ABOVE", fontsize=7).opts(
+        text_above = hv.Text(
+            text_x + spacing, text_y, f"{suffix} ABOVE", fontsize=7
+        ).opts(
             text_align="left",
             text_baseline="bottom",
             text_color="lightgrey",
             text_alpha=0.8,
         )
-        text_below = hv.Text(text_x + 3, text_y, "DAYS BELOW", fontsize=7).opts(
+        text_below = hv.Text(
+            text_x + spacing, text_y, f"{suffix} BELOW", fontsize=7
+        ).opts(
             text_align="left",
             text_baseline="top",
             text_color="lightgrey",
@@ -532,14 +719,19 @@ class ClimateApp(pn.viewable.Viewer):
 
         return text_days_above * text_days_below * text_above * text_below
 
-    def _get_station_name(self):
+    def _get_station_label(self):
         if self.station not in self._network_df["station_name"].unique():
+            stid = self.station
             station_name = self._network_df.loc[
                 self._network_df["stid"] == self.station, "station_name"
             ].iloc[0]
         else:
+            stid = self._network_df.loc[
+                self._network_df["station_name"] == self.station, "stid"
+            ].iloc[0]
             station_name = self.station
-        return station_name
+        station_label = f"{station_name.title()} ({stid})"
+        return station_label
 
     def __panel__(self):
         return self._template