esiil-stars

ESIIL Stars Training Notes

These notes are associated with ESIIL Stars 2026 Cohort:

This repo https://github.com/byandell/esiil-stars is published via GitHub pages as byandell.github.io/esiil-stars by turning on GitHub Pages in the same manner as the assignment to Build your Environmental Data Science portfolio.

Table of Contents

byandell/esiil-stars

Keep Track of Your Work

Where did I have that repo? You can use your portfolio to keep track of your work. This is helpful for you, and lets other people who visit your portfolio know what you have done. This can be useful later to help build your resume, or collection of your work. Just add links to your projects. For instance, here is the ESIIL Stars 2026 page and textbook:

I include profiles of ESIIL Stars students right here. Here are migration projects in progress from OLC students (along with their profiles):

And here are the OLC faculty:

Embed Dynamic HTML in GitHub Pages

The way to link a dynamic HTML file, such as a dynamic migration presentation, is to save it in a portfolio repo that is rendered via GitHub pages, such as using a [homepage].github.io. HTML files (ending in .html) do not display well in GitHub, but will display via GitHub Pages. See Embed Objects in GitHub Pages for more detail.

This is with the Western Meadowlark (Tasiyagnunpa) from cu-esiil-edu/03-migration-MarshaJ24, a student fork of cu-esiil-edu/stars-03-migration-template. The dynamic HTML file is saved as tasiyagnunpa_migration.html.

Here we embed the dynamic HTML page in this page using

<iframe src="tasiyagnunpa_migration.html"
 title="Tasiyagnunpa Migration"
 width="100%" height="600px"></iframe>

Note the width and height, which can be tweeked. The title option is useful if for some reason the page does not render.

Note: This image will not display properly in Preview mode or in the GitHub repo, but it will display on the published page https://byandell.github.io/esiil-stars once the edits are committed to GitHub.

Sliders on Dynamic HTML

With data over time, it is nice to have sliders. Including sliders depends on the type of dynamic plot package.

HVPLOT

One example used above is a slider on an HVPLOT object. For this, see Marsha’s migration-mj notebook. Key code blocks:

# Join the occurrences with the plotting GeoDataFrame
occurrence_gdf = ecoregions_gdf.merge(
    occurrence_df.reset_index(), 
    on='eco_code')

# Get the plot bounds so they don't change with the slider
xmin, ymin, xmax, ymax = occurrence_gdf.total_bounds

# Define the slider widget
slider = pn.widgets.DiscreteSlider(
    name='month',
    options={calendar.month_name[i]: i for i in range(1, 13)}
)

# Plot occurrence by ecoregion and month
migration_plot = (
    occurrence_gdf
    .hvplot(
        c='norm_occurrences',
        groupby='month',
        # Use background tiles
        geo=True, crs=ccrs.Mercator(), tiles='CartoLight',
        title=f"{species_name} migration",
        xlim=(xmin, xmax), ylim=(ymin, ymax),
        frame_width=500,
        colorbar=False,
        widgets={'month': slider},
        widget_location='bottom'
    )
)

migration_plot.save(f'{plot_filename}.html', embed=True)

GEEPLOT

Another version is to use Google Earth Engine Map (geemap). For instance, see the example 72 time slider gui Here is the code:

import ee
import geemap
# geemap.update_package()
Map = geemap.Map(center=[37.75, -122.45], zoom=12)

S2 = (
    ee.ImageCollection("COPERNICUS/S2_SR")
    .filterBounds(ee.Geometry.Point([-122.45, 37.75]))
    .filterMetadata("CLOUDY_PIXEL_PERCENTAGE", "less_than", 10)
)

vis_params = {"min": 0, "max": 4000, "bands": ["B8", "B4", "B3"]}

Map.addLayer(S2, {}, "Sentinel-2", False)
Map.add_time_slider(S2, vis_params)
Map

Publish with GitHub Pages

This is gleaned from Publish GitHub Pages and adapted for the a GitHub organization like the OLC Integrated Data Cube. See also notes on how to Collaborate with GitHub Organizations.

Published ESIIL Stars Projects

This is a list of some ESIIL Stars projects published with GitHub Pages.

Publish docs/ Folder From Private Repo

A repo for ESIIL Stars might be private in such an organization but may have a public published set of pages hosted from the docs/ folder.

Note: To set up the GitHub Pages for a GitHub Organization repo to use the docs/ folder, follow The Least You Need to Know About GitHub Pages. Once published, things in the docs/ folder will be public. If the repo is private, it will remain private.

Prototype Publishing with cu-esiil-edu Org

The simple repo private-repo in the ESIIL Education GitHub Organization is only visible to authorized members, which are typically ESIIL faculty and staff. However, the published page is visible to all.

For contrast, consider the public-repo in the same organization, for with both the GitHub repo and the GitHub Pages profile are visible:

Prototype Publishing with OLC Org

Here is another prototype using one of the ESIIL Stars teams. (Note how cu-esiil-edu is replaced by olc-techsupport below and in the repos.) The simple repo private-repo in the Oglala Lakota College GitHub Organization OLC Integrated Data Cube is only visible to authorized OLC members. However, the published page is visible to all.

For contrast, consider the public-repo in the same organization, for with both the GitHub repo and the GitHub Pages profile are visible:

This site is open source. Improve this page.