Chi-Hyun Kim storymap project

README.md

@@ -1,53 +1,9 @@
-## Samples
+## Introduction
 
-Find examples from previous years and elsewhere on the internet at https://github.com/Weitzman-MUSA-JavaScript/story-map-project-examples
+This storymap presents the impact of SEPTA's Summer 2025 service cuts by showing the location and spatial extent of the eliminated or shortened routes in the context of the entire network.
 
-## Instructions
+## Data 
 
-### Step 1: Choose a topic
+The underlying data for the storymap comes from SEPTA's GTFS archive; I compare the [last GTFS update](https://github.com/septadev/GTFS/releases/tag/v202508242) prior to the cuts with the first update describing service after the [restoration of service](https://github.com/septadev/GTFS/releases/tag/v202509141). (I use the post-cut period schedule so that seasonal routes, like school-focused routes that were affected by the cuts, can be shown appropriately.)
 
-Choose a topic that is fruitfully explained with some combination of narrative and geographic elements. Think about what data you want to tell a story about. Whatever data you use, **be sure to include citations somewhere in your app interface**. You can choose a dataset from any of a number of sources, for example:
-
-* Use data you've been working with for another class
-* Create your own dataset (check out [geojson.io](https://geojson.io))
-* Find data from an open data repository...
-
-#### OpenDataPhilly.org
-
-OpenDataPhilly has lots of Philadelphia-specific data, like:
-
-- [Neighborhood Boundaries](https://opendataphilly.org/dataset/philadelphia-neighborhoods)
-- Historic [Streets](https://opendataphilly.org/dataset/historic-streets), [Districts](https://opendataphilly.org/dataset/philadelphia-registered-historic-districts), or [Properties](https://opendataphilly.org/dataset/philadelphia-registered-historic-sites)
-- [School Information](https://opendataphilly.org/dataset/school-information-data)
-- [PA Horticultural Society Land Care](https://opendataphilly.org/dataset/land-care)
-
-#### Other open data portals
-
-Many other cities, counties, states, and countries have dedicated data portals as well. Here are a couple of lists of state-sponsored open data sites:
-
-- [Data.gov - Open Government](https://data.gov/open-gov/)
-- [Open Knowledge Foundation - DataPortals.org](https://dataportals.org/)
-
-#### Independently compiled data sources
-
-Sources like [Stop Demolishing Philly](https://www.stopdemolishingphilly.com/map/) or other privately compiled data sources.
-
-
-Use one of the template story maps in the _templates/_ folder, modified as you see fit, to explain your topic. For example, open [templates/scrollytelly/](templates/scrollytelly/) and copy the contents to the root folder in this repository. You can then modify the HTML, CSS, JavaScript, and data to suit your needs.
-
-### Step 2: Think About Slide Content
-
-Your story will have multiple slides, each with a title, some additional text, maybe images, and geographic data. Your slide content will go straight into your HTML, and your map features will go in to separate GeoJSON files in the [data/](data/) folder.
-
-### Step 3: Submit your story map
-
-Commit your code and push it to your repository on GitHub. Set up GitHub pages on the repository and submit a new pull request into the original project repository in the class organization.
-
-#### Submission Checklist
-
-- [ ] Pushed latest code to the `main` branch of your repository
-- [ ] Linted JS and CSS code
-- [ ] Turned on GitHub Pages for the repository and verified that your site works when deployed
-- [ ] Submitted a pull request to the original repository in the class organization
-- [ ] In the PR **title**, included your name at least
-- [ ] In the PR **description**, included a brief description of your topic, and your target audience
+I then use an R script (under the `r` directory) to read in the GTFS data (via the `tidytransit` package), add relevant attributes, and export route segments as geojson files.

css/index.css

@@ -0,0 +1,84 @@
+body {
+  margin: 0;
+  border-width: 0;
+  box-sizing: border-box;
+  height: 100vh;
+
+  font-family: 'Gill Sans', sans-serif;
+}
+
+.map-container {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  z-index: 0;
+}
+
+.map {
+  height: 100%;
+}
+
+.slide-section {
+  position: relative;
+  margin-top: -30vh;
+  z-index: 100;
+  pointer-events: none;
+  border-bottom: 1px solid rgb(0 0 0 / 10%);
+}
+
+.slide {
+  margin-top: 90vh;
+  margin-bottom: 90vh;
+  margin-left: auto;
+  margin-right: 2rem;
+  padding: 1rem;
+  box-shadow: -0.5rem 0 1rem rgba(0 0 0 / 50%);
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+  pointer-events: initial;
+
+  width: 25rem;
+
+  background-color: white;
+  color: black;
+}
+
+.slide:first-child {
+  margin-top: 0;
+}
+
+.slide:last-child {
+  margin-bottom: 40vh;
+}
+
+.slide-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  column-gap: 0.5rem;
+
+  width: 100%;
+}
+
+.slide-nav-button {
+  transition: all 0.1s;
+
+  padding: 0;
+  margin: 1rem;
+  width: 4rem;
+  height: 3rem;
+  border: 1px solid #888;
+  border-radius: 0.25rem;
+
+  background-color: #eee;
+  font-size: 1.5em;
+}
+
+.slide-nav-button:hover {
+  background-color: #444;
+  color: #fff;
+}
+
+.slide-nav-select {
+  min-width: 0;
+}