Shubhanga Satyal - Where Could Philadelphia Build Affordable Housing?

.github/workflows/lint-js-files.yml

@@ -12,14 +12,14 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v7
-    - name: Set up Node.js 24.x
-      uses: actions/setup-node@v7
+    - uses: actions/checkout@v4
+    - name: Set up Node.js 22.x
+      uses: actions/setup-node@v4
       with:
-        node-version: 24.x
+        node-version: 22.x
         cache: 'npm'
     - name: Install dependencies
-      run: npm install --only=dev
+      run: npm install
     - name: Run eslint
       run: |
         npx eslint --color .

README.md

@@ -1 +1,23 @@
-Add a readme for your story map here. Include content overview, data citations, and any relevant technical details.
+## About the Story Map:
+
+This story map is a surface-level look at where affordable housing gets built in Philadelphia, and why that matters for site selection advocacy. Using open city data, it compares the city's Market Value Analysis with thirty years of subsidized housing production. It shows that most affordable units end up in the weakest housing markets and very few go to the strongest. It then zooms into one strong-market neighborhood and points to vacant land that could still be used. The goal is to start a conversation, not to settle one: it doesn't account for land costs, zoning, or current parcel ownership.
+
+
+## Data Sources:
+
+City of Philadelphia, “City Limits,” OpenDataPhilly, accessed September 24, 2026, [opendataphilly.org/datasets/city-limits/](https://opendataphilly.org/datasets/city-limits/).
+
+City of Philadelphia, “Market Value Assessment (MVA),” OpenDataPhilly, accessed September 24, 2026, [opendataphilly.org/datasets/market-value-assessment/](https://opendataphilly.org/datasets/market-value-assessment/).
+
+City of Philadelphia, “Affordable Housing Production,” OpenDataPhilly, accessed September 24, 2026, [opendataphilly.org/datasets/affordable-housing-production/](https://opendataphilly.org/datasets/affordable-housing-production/).
+
+City of Philadelphia, “Vacant Property Indicators,” OpenDataPhilly, accessed September 24, 2026, [opendataphilly.org/datasets/vacant-property-indicators/](https://opendataphilly.org/datasets/vacant-property-indicators/).
+
+## Acknowledgment:
+Along with adapting code from the professor’s examples and class lessons and consulting internet sources, I used AI tools, including ChatGPT and Claude, to understand, decipher, debug, and format code in many instances. The overall thought process, structure, and story idea are my own.
+data analyzed using Arc GIS - by choice and for practice
+
+For AI: I reviewed the material on my own, made notes of code and then drafted code on my own - following which I pasted it on AI and asked it to correct if any mistakes. Sometimes when I did not know what to do, I directly asked AI for help to do that task - i have noted where and when. 
+
+## Basemap:
+Basemap: Esri World Dark Gray Canvas (Esri, HERE, Garmin, © OpenStreetMap contributors).

css/index.css

@@ -0,0 +1,186 @@
+/* page setup and layout- copy pasted from scrollytelly template and then adapted for my use */
+
+body {
+  margin: 0;
+  border-width: 0;
+  box-sizing: border-box;
+  height: 100vh;
+
+  font-family: 'Open Sans', sans-serif;
+}
+
+/* making sure map stays in place while my slides glide through */
+.map-container {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  z-index: 0;
+}
+
+/* map fills whole page */
+.map {
+  height: 100%;
+}
+
+/* slide on top of map */
+.slide-section {
+  position: relative;
+  margin-top: -30vh;
+  z-index: 100;
+  pointer-events: none;
+  border-bottom: 1px solid rgb(0 0 0 / 10%);
+}
+
+/* each slide is a gray box */
+.slide {
+  margin-top: 90vh;
+  margin-bottom: 90vh;
+  margin-left: auto;
+  margin-right: 2rem;
+  padding: 1rem;
+  border: 3px solid darkgray;
+  border-radius: 4rem;
+  pointer-events: initial;
+
+  width: 25rem;
+
+  background-color: lightgray;
+  color: darkslategray;
+}
+
+.slide:first-child {
+  margin-top: 0;
+}
+
+.slide:last-child {
+  margin-bottom: 2rem;
+}
+
+.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-select {
+  min-width: 0;
+}
+
+/* keeping images inside the box - chat gpt assisted code */
+.slide img {
+  width: 100%;
+}
+
+/* Legend: adapted from the professor's custom_semantics example self and ChatGPT assisted */
+.legend {
+  margin: 1rem 0;
+  border: 1px solid black;
+  padding: 1rem;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 50%);
+  border-radius: 0.5rem;
+  width: fit-content;
+}
+
+/* legend title */
+.legend h2 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+/* removing bullet points */
+.legend ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+/* adding legend codes before  the word */
+.legend-item::before {
+  content: "";
+  display: inline-block;
+  width: 0.7rem;
+  height: 0.7rem;
+  border: 1px solid rgb(0 0 0 / 25%);
+  margin-right: 0.5rem;
+  border-radius: 50%;
+}
+
+/* assigning legend colors and shapes */
+.city::before {background-color: orange;}
+.strong::before { background-color: gold; }
+.middle::before { background-color: white; }
+.weak::before { background-color: lightgoldenrodyellow; }
+.vacant::before { background-color: darkgreen; }
+
+.housing::before {
+  background-color: white;
+  border-color: red;
+}
+
+.gap::before {
+  border: 2px solid red;
+  border-radius: 0;
+}
+
+.packer::before {
+  border: 2px solid pink;
+  border-radius: 0;
+}
+
+.permit::before {
+  background-color: white;
+  border-color: brown;
+}
+
+.xx::before {
+  border: white;
+  border-color: white;
+}
+
+.leaflet-control.legend {
+  background-color: lightgray;
+}
+
+/* smaller screens: slides and legend shrink to fit phones - used Claude for this codee for mobile phone use */
+
+/* adjusts the slides and legend for screens 600px wide or smaller */
+
+@media screen and (width <= 600px) {
+  .slide {
+    /* lets the slide width adjust to the available space */
+    width: auto;
+
+    /* leaves space on both sides, based on the root font size */
+    margin-left: 1rem;
+    margin-right: 1rem;
+
+    /* rounds the slide's corners */
+    border-radius: 1.5rem;
+  }
+
+  .legend {
+    /* adds space between the legend's content and its edges */
+    padding: 0.5rem;
+
+    /* sets the text size to 80% of the root font size */
+    font-size: 0.8rem;
+  }
+}

data/City_Limits.json

@@ -0,0 +1,3 @@
+{"type":"FeatureCollection", "features": [
+{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-75.014967,40.137935],[-75.020574,40.132284],[-75.058426,40.105832],[-75.077804,40.085779],[-75.081191,40.084126],[-75.09674,40.068989],[-75.087466,40.063593],[-75.095121,40.055946],[-75.106313,40.0493],[-75.109267,40.045787],[-75.136839,40.061981],[-75.17651,40.084701],[-75.188479,40.072879],[-75.223588,40.092954],[-75.243069,40.073714],[-75.264508,40.054043],[-75.249175,40.041983],[-75.245376,40.037449],[-75.231157,40.027548],[-75.219619,40.021917],[-75.207317,40.010217],[-75.256121,39.987321],[-75.263716,39.982643],[-75.280307,39.975001],[-75.275323,39.96942],[-75.265451,39.965266],[-75.247482,39.963538],[-75.251444,39.949044],[-75.246473,39.942676],[-75.240152,39.942096],[-75.235005,39.938136],[-75.237219,39.932702],[-75.243402,39.931835],[-75.247508,39.921782],[-75.247202,39.913588],[-75.251238,39.910146],[-75.251291,39.904413],[-75.259109,39.892452],[-75.264599,39.888226],[-75.265005,39.880991],[-75.262532,39.876571],[-75.248433,39.876495],[-75.240474,39.872391],[-75.234124,39.87719],[-75.219773,39.875489],[-75.211977,39.867472],[-75.207948,39.870291],[-75.188981,39.880002],[-75.146166,39.884112],[-75.141119,39.885938],[-75.135855,39.891274],[-75.13041,39.902874],[-75.129385,39.912332],[-75.135458,39.929524],[-75.13629,39.946596],[-75.13154,39.958292],[-75.127777,39.96153],[-75.105078,39.971604],[-75.081497,39.97661],[-75.071202,39.980745],[-75.063948,39.986366],[-75.055164,40.002403],[-75.051713,40.006999],[-75.040381,40.01362],[-75.022503,40.017285],[-75.014866,40.019903],[-74.998761,40.030289],[-74.980593,40.045952],[-74.974786,40.049324],[-74.985168,40.05695],[-74.980844,40.060692],[-74.980972,40.065871],[-74.972656,40.072074],[-74.970839,40.076221],[-74.963506,40.077065],[-74.960043,40.081268],[-74.955749,40.095055],[-74.962062,40.098618],[-74.961111,40.103424],[-74.965609,40.108099],[-74.963176,40.116683],[-74.969204,40.116825],[-74.972773,40.119823],[-74.982373,40.11995],[-74.98906,40.126117],[-74.994155,40.126097],[-75.014967,40.137935]]]},"properties":{"OBJECTID":1,"Shape__Are":3970705839.26022,"Shape__Len":394751.12047005},"id":0}
+]}