https://github.com/fbarffmann/mycitibike
Built an interactive Leaflet.js map visualizing over 750 Citi Bike station locations in NYC. Analyzed usage patterns, station density, and user navigation across the network.
https://github.com/fbarffmann/mycitibike
citibike data-analysis data-visualization geojson geospatial interactive-map javascript leaflet nyc web-mapping
Last synced: about 22 hours ago
JSON representation
Built an interactive Leaflet.js map visualizing over 750 Citi Bike station locations in NYC. Analyzed usage patterns, station density, and user navigation across the network.
- Host: GitHub
- URL: https://github.com/fbarffmann/mycitibike
- Owner: fbarffmann
- Created: 2024-08-07T01:29:32.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-04-13T15:51:30.000Z (11 days ago)
- Last Synced: 2025-04-13T16:36:52.644Z (11 days ago)
- Topics: citibike, data-analysis, data-visualization, geojson, geospatial, interactive-map, javascript, leaflet, nyc, web-mapping
- Language: JavaScript
- Homepage: https://fbarffmann.github.io/MyCitiBike/
- Size: 367 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MyCitiBike NYC Station Status Map
Built an interactive Leaflet.js map that visualizes real-time status of over 1,000 Citi Bike stations across New York City. Categorized stations based on number of available bikes using live API data and rendered custom markers to show availability at a glance.
## Tools & Technologies Used
- JavaScript
- Leaflet.js
- HTML/CSS
- d3.js
- Live JSON APIs (Citi Bike GBFS feeds)
## File Structure
```text
.
├── index.html # Landing page for map
├── static/
│ ├── js/logic.js # JavaScript mapping logic
│ ├── css/style.css # Custom map styles
│ └── img/ # Custom marker images
```
## Skills Demonstrated
- Consuming and transforming real-time API data
- Categorizing data based on conditional logic
- Building dynamic map visualizations using Leaflet.js
- Using custom marker styles to improve UX
- Organizing modular front-end code for clarity
## Key Findings
- Visualized over 1,000 Citi Bike stations by status in real time.
- Defined availability tiers:
- **Empty**: 0 bikes
- **Low**: 1–4 bikes
- **Normal**: 5+ bikes
- Integrated two live API endpoints (station info + status) to enrich each marker.
- Enabled users to identify low-stock and out-of-service stations at a glance.