Divvy-Viz

We got it !!

Comment

Inspiration

City bikes are one of the most flexible “last-mile” mobility options in Chicago, but the raw Divvy trip logs (21 million+ records) live behind CSV downloads and static plots. We wanted a real-time, interactive, and beautiful way to explore how people actually ride—down to individual trip paths—so that planners, students, and enthusiasts can see usage patterns come alive on a map and in charts.

What it does

  • Streamlit Dashboard
    • Ridership Analysis: breakdowns by user type and date range.
    • Prophet Forecasting: built-in time-series model predicting future trip volumes with interactive confidence intervals.
    • Micro-Mobility Gaps: heatmaps and tables highlighting neighborhoods underserved by Divvy relative to overall ridership.
  • React Dashboard
    • Overview page with high-level stats (total trips, average duration, active stations) and a welcome graphic.
    • Live Map that animates dozens of bike rides concurrently using smoothly moving bike icons, showing origin→destination lines.
    • Analytics page with dual-axis line and bar charts (hourly trip counts vs. average duration), fully responsive.
    • Interactive filters: user type (Subscriber vs. Customer), gender, and date/hour slider redraw map & charts on the fly.

How we built it

  1. Streamlit
    • Quick-spin Python app using Streamlit’s widgets (st.selectbox, st.date_input) for filtering by user type and date.
    • Data ingestion via Pandas from the Divvy Trips JSON API.
  2. Front-end React
    • Bootstrapped with Create React App, React Router v6, and Ant Design for a polished multi-page UI.
    • React-Leaflet + react-leaflet-animated-marker for trip animations; Recharts for charts.
  3. Forecasting
    • Built a Prophet model on daily trip totals to forecast the next 30 days.
    • Exposed controls for adjusting seasonality and changepoint parameters.
  4. Micro-Mobility Gap Analysis
    • Computed station-level ridership densities vs. total neighborhood populations.
    • Rendered static folium maps and Streamlit altair charts to spotlight underserved zones.

Challenges we ran into

  • Performance: Animating hundreds of markers in React strained the UI; we capped to 1,000 trips and cleaned up layers after animation.
  • Library mismatches: Getting MovingMarker to register under Leaflet 1.x required the correct factory call (L.movingMarker).
  • Forecast tuning: Prophet’s default changepoint detection overfit to weekend spikes; we had to manually tune seasonality_prior_scale.
  • Deployment divergence: Managing two deployment targets (GitHub Pages for React, Streamlit Cloud for Python) required separate CI/CD pipelines and environment configs.

Accomplishments that we’re proud of

  • Delivered two polished dashboards under tight time constraints: a React map-and-chart explorer and a Streamlit analytics + forecasting portal.
  • Integrated real-time animations, rich filtering, and predictive modeling (Prophet) in a single hack.
  • Published our Streamlit app to Streamlit Cloud with one-click authentication, making the forecasting tool instantly accessible.
  • Demonstrated end-to-end data science workflow: from raw JSON ingestion through interactive visualization to statistical forecasting.

What we learned

  • Best practices for structuring a dual-stack hack (JavaScript vs. Python) and sharing data pipelines between them.
  • Deep dives into Leaflet marker animation and React performance optimizations.
  • Hands-on tuning of Prophet hyperparameters to balance trend vs. seasonality in bicycle traffic.
  • Rapid prototyping with Streamlit: from data filters to charts and maps in minutes.
  • Strategies for multi-platform deployment (GitHub Pages & Streamlit Cloud) and managing differing CORS and routing requirements.

What’s next for Divvy-Viz

  • Unified back end: expose a single API that powers both React and Streamlit apps for consistency and caching.
  • Live streaming: integrate WebSocket feeds for sub-minute animation updates in both dashboards.
  • Advanced gap modeling: use spatial regression to predict new station locations that would maximize coverage.
  • User stories & sharing: allow users to save filter presets or share “dashboard snapshots” via URL.
  • Multi-modal extension: layer CTA bus/train and scooter/car-share data for a comprehensive Chicago mobility dashboard.

Built With

Share this project:

Updates