Merge pull request #4 from ahuang11/expand_nasa_notebook

Add exploring population density to NASA notebook

Author: ahuang11

notebooks/nasa_earthdata_gibs_explorer.ipynb

@@ -70,6 +70,7 @@
     "from owslib.wms import WebMapService\n",
     "\n",
     "gv.extension(\"bokeh\")\n",
+    "gv.renderer('bokeh').webgl = False\n",
     "pn.extension(sizing_mode=\"stretch_width\")"
    ]
   },
@@ -129,22 +130,16 @@
     "\n",
     "Now, you might be wondering, since there already exists an online explorer called [WorldView](https://worldview.earthdata.nasa.gov/), why bother reinventing the wheel? Well, here's the catch: by building your own explorer, you have the freedom to incorporate your own datasets into the mix!\n",
     "\n",
-    "Not only does this provide a unique opportunity to personalize your exploration experience, but it's also a fantastic way to explore all the exciting options available while showcasing the incredible power of Python packages working in harmony!"
+    "Not only does this provide a unique opportunity to personalize your exploration experience, but it's also a fantastic way to explore all the exciting options available while showcasing the incredible power of Python packages working in harmony!\n",
+    "\n",
+    "Try it out interactively [here](https://charming-ornate-flying-snake.anacondaapps.cloud/)!"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stderr",
-     "output_type": "stream",
-     "text": [
-      "No such comm: 90be3a54996442ad9c86f9abc1f60f70\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "BASE_URL = \"https://gibs.earthdata.nasa.gov/wms/epsg3857/best/wms.cgi?SERVICE=WMS\"\n",
     "XMIN = -20037507.539400\n",
@@ -153,88 +148,133 @@
     "YMAX = 7714669.39460\n",
     "\n",
     "\n",
-    "class NasaEarthDataWmsExplorer:\n",
+    "class NasaEarthDataGibsWmsExplorer:\n",
     "    def __init__(self):\n",
     "        self.wms = WebMapService(BASE_URL)\n",
-    "        layers = list(self.wms.contents)\n",
+    "        layers = sorted(self.wms.contents)\n",
+    "        self.products_layers = {\"Miscellaneous\": []}\n",
+    "        for layer in layers:\n",
+    "            if \"_\" in layer:\n",
+    "                product, product_layer = layer.split(\"_\", 1)\n",
+    "                if product not in self.products_layers:\n",
+    "                    self.products_layers[product] = []\n",
+    "                self.products_layers[product].append(product_layer)\n",
+    "            else:\n",
+    "                self.products_layers[\"Miscellaneous\"].append(layer)\n",
     "\n",
     "        # create widgets\n",
-    "        self.layer_input = pn.widgets.Select(\n",
+    "        self.product_select = pn.widgets.Select(\n",
+    "            name=\"Product\",\n",
+    "            options=sorted(self.products_layers),\n",
+    "        )\n",
+    "        self.layer_select = pn.widgets.Select(\n",
     "            name=\"Layer\",\n",
-    "            options=layers,\n",
+    "            options=sorted(self.products_layers[self.product_select.value]),\n",
     "        )\n",
     "        self.time_slider = pn.widgets.DiscreteSlider(name=\"Time\", margin=(5, 16))\n",
-    "        self.coastline_feature = gv.feature.coastline().opts(\n",
+    "        self.refresh_button = pn.widgets.Button(name=\"Refresh\", button_type=\"light\")\n",
+    "        self.image_pane = pn.pane.Image()  # for colorbar / legend\n",
+    "        self.holoviews_pane = pn.pane.HoloViews(min_height=500, sizing_mode=\"stretch_both\")\n",
+    "        pn.state.onload(self._onload)\n",
+    "    \n",
+    "    def _onload(self):\n",
+    "        # add interactivity\n",
+    "        self.product_select.param.watch(self.update_layers, \"value\")\n",
+    "        self.layer_select.param.watch(self.update_time, \"value\")\n",
+    "        self.refresh_button.on_click(self.update_web_map)\n",
+    "\n",
+    "        # create imagery\n",
+    "        coastline_feature = gv.feature.coastline().opts(\n",
     "            global_extent=True, responsive=True\n",
     "        )\n",
-    "        self.static_text = pn.widgets.StaticText()\n",
-    "        self.image_pane = pn.pane.Image()\n",
-    "        self.holoviews_pane = pn.pane.HoloViews(\n",
-    "            object=self.coastline_feature, min_height=500, sizing_mode=\"stretch_both\"\n",
+    "        border_feature = gv.feature.borders()\n",
+    "        self.dynamic_map = gv.DynamicMap(\n",
+    "            self.update_web_map, streams=[self.time_slider.param.value_throttled]\n",
     "        )\n",
+    "        self.holoviews_pane.object = coastline_feature * border_feature * self.dynamic_map\n",
     "\n",
-    "        # add interactivity\n",
-    "        self.layer_input.param.watch(self.update_time, \"value\")\n",
-    "        self.time_slider.param.watch(self.update_web_map, \"value_throttled\")\n",
+    "    def get_layer(self, product=None, product_layer=None):\n",
+    "        product = product or self.product_select.value\n",
+    "        if product == \"Miscellaneous\":\n",
+    "            layer = product_layer or self.layer_select.value\n",
+    "        else:\n",
+    "            layer = f\"{product}_{product_layer or self.layer_select.value}\"\n",
+    "        return layer\n",
+    "\n",
+    "    def update_layers(self, event):\n",
+    "        product = event.new\n",
+    "        product_layers = self.products_layers[product]\n",
+    "        self.layer_select.options = sorted(product_layers)\n",
     "\n",
     "    def update_time(self, event):\n",
-    "        layer = event.new\n",
+    "        layer = self.get_layer()\n",
     "        time_positions = self.wms.contents[layer].timepositions\n",
-    "        if not time_positions:\n",
-    "            # use N/A instead of None to circumvent Panel from crashing\n",
-    "            # when going from time-dependent layer to time-independent layer\n",
-    "            options = [\"N/A\"]\n",
-    "            value = \"N/A\"\n",
-    "        else:\n",
+    "        if time_positions:\n",
     "            ini, end, step = time_positions[0].split(\"/\")\n",
+    "            try:\n",
+    "                freq = pd.Timedelta(step)\n",
+    "            except ValueError:\n",
+    "                freq = step.lstrip(\"P\")\n",
     "            options = (\n",
-    "                pd.date_range(ini, end, freq=pd.Timedelta(step))\n",
+    "                pd.date_range(ini, end, freq=freq)\n",
     "                .strftime(\"%Y-%m-%dT%H:%M:%SZ\")\n",
     "                .tolist()\n",
     "            )\n",
-    "            value = options[0]\n",
-    "        self.time_slider.param.set_param(options=options, value=value)\n",
-    "        self.update_web_map()\n",
+    "            if options:\n",
+    "                value = options[0]\n",
+    "                self.time_slider.param.set_param(options=options, value=value)\n",
+    "                return\n",
+    "        # use N/A instead of None to circumvent Panel from crashing\n",
+    "        # when going from time-dependent layer to time-independent layer\n",
+    "        options = [\"N/A\"]\n",
+    "        self.time_slider.options = options\n",
+    "        self.time_slider.param.trigger(\"value_throttled\")\n",
+    "\n",
+    "    def get_url_template(self, layer, time=None):\n",
+    "        get_map_kwargs = dict(\n",
+    "            layers=[layer],\n",
+    "            srs=\"EPSG:3857\",\n",
+    "            bbox=(XMIN, YMIN, XMAX, YMAX),\n",
+    "            size=(256, 256),\n",
+    "            format=\"image/png\",\n",
+    "            transparent=True,\n",
+    "            time=time\n",
+    "        )\n",
+    "        try:\n",
+    "            url = self.wms.getmap(**get_map_kwargs).geturl()\n",
+    "        except Exception:\n",
+    "            get_map_kwargs.pop(\"time\")\n",
+    "            url = self.wms.getmap(**get_map_kwargs).geturl()\n",
+    "        url_template = (\n",
+    "            url.replace(str(XMIN), \"{XMIN}\")\n",
+    "            .replace(str(YMIN), \"{YMIN}\")\n",
+    "            .replace(str(XMAX), \"{XMAX}\")\n",
+    "            .replace(str(YMAX), \"{YMAX}\")\n",
+    "        )\n",
+    "        return url_template\n",
     "\n",
-    "    def update_web_map(self, event=None):\n",
+    "    def update_web_map(self, value_throttled=None):\n",
     "        try:\n",
     "            self.holoviews_pane.loading = True\n",
-    "            layer = self.layer_input.value\n",
+    "            layer = self.get_layer()\n",
     "            time = self.time_slider.value\n",
     "            if time == \"N/A\":\n",
     "                time = None\n",
-    "\n",
-    "            url = wms.getmap(\n",
-    "                layers=[layer],\n",
-    "                srs=\"EPSG:3857\",\n",
-    "                bbox=(XMIN, YMIN, XMAX, YMAX),\n",
-    "                size=(256, 256),\n",
-    "                format=\"image/png\",\n",
-    "                transparent=True,\n",
-    "                time=time,\n",
-    "            ).geturl()\n",
-    "            url_template = (\n",
-    "                url.replace(str(XMIN), \"{XMIN}\")\n",
-    "                .replace(str(YMIN), \"{YMIN}\")\n",
-    "                .replace(str(XMAX), \"{XMAX}\")\n",
-    "                .replace(str(YMAX), \"{YMAX}\")\n",
-    "            )\n",
-    "\n",
+    "            url_template = self.get_url_template(layer, time)\n",
     "            layer_meta = self.wms[layer]\n",
     "            self.image_pane.object = layer_meta.styles.get(\"default\", {}).get(\"legend\")\n",
-    "            self.static_text.value = layer_meta.abstract\n",
     "            layer_imagery = gv.WMTS(url_template).opts(title=layer_meta.title)\n",
-    "\n",
-    "            self.holoviews_pane.object = self.coastline_feature * layer_imagery\n",
     "        finally:\n",
     "            self.holoviews_pane.loading = False\n",
+    "        return layer_imagery\n",
     "\n",
     "    def view(self):\n",
     "        widget_box = pn.WidgetBox(\n",
-    "            self.layer_input,\n",
+    "            self.product_select,\n",
+    "            self.layer_select,\n",
     "            self.time_slider,\n",
     "            self.image_pane,\n",
-    "            self.static_text,\n",
+    "            self.refresh_button,\n",
     "            pn.Spacer(sizing_mode=\"stretch_height\"),\n",
     "            sizing_mode=\"stretch_both\",\n",
     "        )\n",
@@ -244,8 +284,8 @@
     "        )\n",
     "\n",
     "\n",
-    "nasa_earth_data_wms_explorer = NasaEarthDataWmsExplorer()\n",
-    "nasa_earth_data_wms_explorer.view()"
+    "explorer = NasaEarthDataGibsWmsExplorer()\n",
+    "explorer.view().servable()"
    ]
   },
   {
@@ -263,16 +303,137 @@
     "The imagery is displayed using the GeoViews library, combined with a coastline feature.\n"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Side-by-Side Comparisons\n",
+    "\n",
+    "After some exploration, I discovered that GPW (Gridded Population of the World) product had four snapshots of population density, in 2000, 2005, 2010, 2020.\n",
+    "\n",
+    "What if we wanted a closer picture of what changed between 2000 and 2020?\n",
+    "\n",
+    "First, we can define a helper function, using the methods from the `NasaEarthDataGibsWmsExplorer` class."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_web_map(product, product_layer):\n",
+    "    return (\n",
+    "        gv.WMTS(\n",
+    "            explorer.get_url_template(explorer.get_layer(product, product_layer))\n",
+    "        ).opts(responsive=True, height=500, title=product_layer, global_extent=True)\n",
+    "    )"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Then, we can layout the Population Density snapshots, side by side.\n",
+    "\n",
+    "When we zoom in on one, not only does the tiles are updated to show the new resolution, but the others' zoom is also synced, so we can easily compare and contrast specific regions of interest."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pop_density_2000_map = get_web_map(\"GPW\", \"Population_Density_2000\")\n",
+    "pop_density_2020_map = get_web_map(\"GPW\", \"Population_Density_2020\")\n",
+    "\n",
+    "pop_density_2000_map + pop_density_2020_map"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Upon zooming into specific regions, I realized that it'd be helpful to add borders, coastlines, and labels, so let's update function."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_web_map(product, product_layer):\n",
+    "    return (\n",
+    "        gv.WMTS(\n",
+    "            explorer.get_url_template(explorer.get_layer(product, product_layer))\n",
+    "        ).opts(responsive=True, height=500, title=product_layer, global_extent=True) *\n",
+    "        gv.feature.coastline() * gv.feature.borders() * gv.tile_sources.StamenLabels()\n",
+    "    )\n",
+    "    \n",
+    "pop_density_2000_map = get_web_map(\"GPW\", \"Population_Density_2000\")\n",
+    "pop_density_2020_map = get_web_map(\"GPW\", \"Population_Density_2020\")\n",
+    "\n",
+    "pop_density_2000_map + pop_density_2020_map"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "One interesting thing I noticed was that in Egypt, there was a line of high population density. It'd would be interesting to see if it's because of a water source."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pop_density_2000_map = get_web_map(\"GPW\", \"Population_Density_2000\")\n",
+    "water_bodies = get_web_map(\"Miscellaneous\", \"Water Bodies\")\n",
+    "xlim = (2735065.540470079, 3886016.688009746)\n",
+    "ylim = (2442736.280432458, 3639157.2571363684)\n",
+    "\n",
+    "pop_density_2000_map.opts(global_extent=False, xlim=xlim, ylim=ylim) + water_bodies"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Despite the limited visibility of the water body, it appears that areas with high population density in Egypt are associated with the presence of a river."
+   ]
+  },
   {
    "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
     "## Summary\n",
     "\n",
-    "While the standalone nature of this custom-built explorer may not rival the capabilities of the existing WorldView explorer, its true potential lies in the ability to incorporate your own data. By integrating your unique datasets into this explorer, you can unlock a world of fascinating possibilities and create a truly captivating exploration experience.\n",
+    "While the standalone capabilities of this custom-built explorer may not rival those of the current WorldView explorer, its true power lies in its ability to incorporate personal data, combine various layers for analysis, and effectively communicate a narrative.\n",
+    "\n",
+    "What sets this explorer apart and makes it truly captivating and compelling is the seamless integration of personal data.\n",
+    "\n",
+    "Here are a few ideas to try:\n",
+    "- Implementing a search bar feature to easily navigate through the available layers.\n",
+    "- Overlaying satellite fire detection layers with other data sets, such as air quality measurements, to gain deeper insights.\n",
+    "- Examining the correlation between night lights and population density to uncover interesting patterns and trends.\n",
+    "- Tracking changes in land types over the years to observe the evolving landscape.\n",
+    "- By incorporating these ideas, the explorer can offer a more comprehensive and dynamic user experience.\n",
+    "- Visualizing climate data: Integrate climate data layers such as temperature, precipitation, or wind patterns to understand the relationship between climate and various geographical features.\n",
+    "- Analyzing vegetation indices: Incorporate vegetation indices like NDVI (Normalized Difference Vegetation Index) to assess vegetation health and identify areas with dense vegetation or potential vegetation changes.\n",
+    "- Mapping infrastructure and urban development: Overlay infrastructure data, such as roads, buildings, and urban areas, to analyze the impact of urbanization on the surrounding environment and land use patterns.\n",
+    "- Exploring natural disasters: Incorporate real-time or historical data on natural disasters such as hurricanes, earthquakes, or floods, to study their impact on the affected regions and aid in disaster management and response efforts.\n",
+    "- Monitoring water resources: Utilize data on water bodies, water availability, and water quality to assess water resources, identify areas of concern, and track changes over time.\n",
+    "- Investigating demographic patterns: Overlay demographic data, such as population density, age groups, or socioeconomic indicators, to study demographic patterns and their spatial relationships with other layers.\n",
+    "- Tracking wildlife habitats: Integrate data on wildlife habitats, migration patterns, or conservation areas to gain insights into ecological dynamics and support biodiversity conservation efforts.\n",
+    "\n",
+    "Furthermore, it's important to note that the functionality of this explorer is not restricted to geographic maps alone. It has the flexibility to incorporate a combination of charts and maps, offering a more diverse and comprehensive data visualization experience.\n",
     "\n",
-    "It is this integration of personal data that sets this explorer apart and makes it incredibly compelling and engaging!"
+    "We'd love to see your work showcased on [HoloViz Discourse](https://discourse.holoviz.org/c/showcase/)!"
    ]
   }
  ],

notebooks/web_map_services.ipynb

@@ -433,16 +433,17 @@
     "        transparent=True,\n",
     "    ).geturl()\n",
     "    legend_url = wms_contents[wms_layer].styles[wms_styles[0]][\"legend\"]\n",
-    "    return {\"wms\": wms_url, \"legend\": legend_url}\n",
+    "    return {\"wms\": wms_url, \"legend\": legend_url, \"title\": wms_contents[wms_layer].title}\n",
     "\n",
     "\n",
     "cpc_outlook_wms_urls = get_wms_urls(\n",
     "    \"https://mapservices.weather.noaa.gov/vector/services/outlooks/cpc_6_10_day_outlk/MapServer/WMSServer?request=GetCapabilities&service=WMS\"\n",
     ")\n",
     "cpc_outlook_wms_url_template = formulate_url_template(cpc_outlook_wms_urls[\"wms\"])\n",
     "cpc_outlook_legend_url = cpc_outlook_wms_urls[\"legend\"]\n",
+    "cpc_outlook_title = cpc_outlook_wms_urls[\"title\"]\n",
     "\n",
-    "cpc_outlook_imagery = gv.WMTS(cpc_outlook_wms_url_template).opts(global_extent=True)\n",
+    "cpc_outlook_imagery = gv.WMTS(cpc_outlook_wms_url_template).opts(global_extent=True, title=cpc_outlook_title)\n",
     "cpc_outlook_legend_image = pn.pane.Image(requests.get(cpc_outlook_legend_url).content)\n",
     "\n",
     "pn.Row(\n",