Vibe Coding 4,379 Uber Rides Into a Living Map

In [1]: import pandas as pd
In [2]: rides = pd.read_csv('../../data/rides.csv')
In [3]: rides['pickup_address'].head()
Out[3]: 
0    N Ashland Ave, Chicago, IL 60614-1105, US
1         N Lincoln Ave, Chicago, IL 60613, US
2    N Clifton Ave, Chicago, IL 60657-2224, US
3    W Belmont Ave, Chicago, IL 60657-4511, US
4     N Whipple St, Chicago, IL 60647-3821, US
Name: pickup_address, dtype: object

import pandas as pd
import hashlib
import requests
import time
import json
import os
from pathlib import Path
from collections import defaultdict
import math
from dotenv import load_dotenv

load_dotenv()

MAPBOX_TOKEN = os.getenv('MAPBOX_TOKEN')
INPUT_CSV = "../../data/rides.csv"
CACHE_FILE = "cache.json"
OUTPUT_DIR = "output/geojson"
GEOCODE_BASE = "https://api.mapbox.com/geocoding/v5/mapbox.places/"
DIRECTIONS_BASE = "https://api.mapbox.com/directions/v5/mapbox/driving/"
MAX_RETRIES = 3
RETRY_DELAY = 2

CHICAGO_LAT = 41.8781
CHICAGO_LON = -87.6298
MAX_MILES = 100

# Initialize cache
Path(OUTPUT_DIR).mkdir(parents=True, exist_ok=True)
if os.path.exists(CACHE_FILE):
    with open(CACHE_FILE) as f:
        cache = json.load(f)
else:
    cache = {}

def save_cache():
    with open(CACHE_FILE, "w") as f:
        json.dump(cache, f)

def cache_key(*args):
    return hashlib.md5("::".join(args).encode()).hexdigest()

def haversine(lat1, lon1, lat2, lon2):
    R = 3958.8  # miles
    phi1, phi2 = math.radians(lat1), math.radians(lat2)
    d_phi = phi2 - phi1
    d_lambda = math.radians(lon2 - lon1)
    a = math.sin(d_phi / 2) ** 2 + math.cos(phi1) * math.cos(phi2) * math.sin(d_lambda / 2) ** 2
    return 2 * R * math.asin(math.sqrt(a))

def is_valid_point(lat, lon):
    return haversine(lat, lon, CHICAGO_LAT, CHICAGO_LON) <= MAX_MILES

def safe_request(url):
    for attempt in range(MAX_RETRIES):
        try:
            r = requests.get(url)
            if r.status_code == 200:
                return r.json()
            print(f"[HTTP {r.status_code}] {url}")
        except Exception as e:
            print(f"[Request Failed] {e}")
        time.sleep(RETRY_DELAY)
    return None

def geocode(address):
    print(f"[GEOCODE] {address}")
    key = cache_key("geocode", address)
    if key in cache:
        return cache[key]
    url = f"{GEOCODE_BASE}{requests.utils.quote(address)}.json?access_token={MAPBOX_TOKEN}&limit=1"
    data = safe_request(url)
    coords = None
    if data and data.get("features"):
        coords = data["features"][0]["geometry"]["coordinates"]
        # Filter out-of-bounds geocoded results
        if not is_valid_point(coords[1], coords[0]):
            print(f"[SKIPPED] Geocoded point {coords} too far from Chicago")
            coords = None
    cache[key] = coords
    return coords

def route_between(c1, c2):
    if not is_valid_point(c1[1], c1[0]) or not is_valid_point(c2[1], c2[0]):
        print(f"[SKIPPED] One or both points out of range: {c1}, {c2}")
        return None

    print(f"[ROUTE] {c1} -> {c2}")
    key = cache_key("route", str(c1), str(c2))
    if key in cache:
        return cache[key]

    coords_str = f"{c1[0]},{c1[1]};{c2[0]},{c2[1]}"
    url = f"{DIRECTIONS_BASE}{coords_str}?access_token={MAPBOX_TOKEN}&geometries=geojson"
    data = safe_request(url)

    geometry = None
    if data and data.get("routes"):
        route = data["routes"][0]["geometry"]
        coords = route.get("coordinates", [])
        coords = [pt for pt in coords if is_valid_point(pt[1], pt[0])]
        if coords:
            route["coordinates"] = coords
            geometry = route
        else:
            print("[SKIPPED] All route points filtered out as outliers")

    cache[key] = geometry
    return geometry

def save_geojson(day, features):
    geojson = {
        "type": "FeatureCollection",
        "features": features
    }
    out_path = os.path.join(OUTPUT_DIR, f"{day}.geojson")
    with open(out_path, "w") as f:
        json.dump(geojson, f)
    print(f"[SAVED] {out_path}")

rides_df = pd.read_csv(INPUT_CSV)
rides_df["ride_start"] = pd.to_datetime(rides_df["ride_start"])
rides_df = rides_df.sort_values("ride_start")

# Geocode pickup and dropoff
rides_df["pickup_coords"] = rides_df["pickup_address"].apply(geocode)
rides_df["dropoff_coords"] = rides_df["dropoff_address"].apply(geocode)
rides_df = rides_df[rides_df["pickup_coords"].notnull() & rides_df["dropoff_coords"].notnull()]

routes_by_day = defaultdict(list)

for i in range(len(rides_df)):
    ride = rides_df.iloc[i]
    ride_time = ride["ride_start"]
    if ride_time.time() < pd.to_datetime("05:00").time():
        day = (ride_time - pd.Timedelta(days=1)).date()
    else:
        day = ride_time.date()

    # 1. pickup -> dropoff
    geometry1 = route_between(ride["pickup_coords"], ride["dropoff_coords"])
    if geometry1:
        routes_by_day[day].append({
            "type": "Feature",
            "geometry": geometry1,
            "properties": {
                "timestamp": ride["ride_start"].isoformat(),
                "type": "ride",
                "rideType": ride["ride_type"],
                "pickupAddress": ride["pickup_address"],
                "dropoffAddress": ride["dropoff_address"],
                "basePay": f"{float(ride['base_pay']):.2f}",
                "surge": f"{float(ride['surge']):.2f}",
                "tip": f"{float(ride['tip']):.2f}",
                "earnings": f"{float(ride['earnings']):.2f}",
                "duration": f"{int(ride['duration'])}",
                "distance": f"{float(ride['distance']):.2f}",
                "rideStartTime": ride['ride_start'].strftime("%B %d, %Y at %I:%M %p"),
                "rideEndTime": pd.to_datetime(ride['ride_end']).strftime("%B %d, %Y at %I:%M %p")
            }
        })

    # 2. dropoff -> next pickup (if available)
    if i < len(rides_df) - 1:
        next_ride = rides_df.iloc[i + 1]
        geometry2 = route_between(ride["dropoff_coords"], next_ride["pickup_coords"])
        if geometry2:
            routes_by_day[day].append({
                "type": "Feature",
                "geometry": geometry2,
                "properties": {
                    "timestamp": next_ride["ride_start"].isoformat(),
                    "type": "transition"
                }
            })

for day, features in routes_by_day.items():
    save_geojson(str(day), features)

save_cache()
print("✅ Done generating cleaned route files.")

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Route Animation</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      #controls {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        background: white;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        font-family: sans-serif;
      }
      #descriptionDisplay {
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 1;
        background: white;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        font-family: sans-serif;        
      }
      label,
      select {
        display: block;
        margin-bottom: 6px;
        width: 100%;
      }
      #status {
        margin-top: 10px;
        font-weight: bold;
        font-size: 14px;
      }
      .mapboxgl-popup {
        z-index: 100 !important;
      }
      .popup-content {
        font-family: "Helvetica Neue", Arial, sans-serif;
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        border-radius: 4px;
      }
      .popup-content h3 {
        margin-top: 0;
        color: #333;
      }
      .popup-content p {
        margin: 4px 0;
        font-size: 14px;
        line-height: 1.3;
      }
      .popup-content hr {
        border: none;
        border-top: 1px solid #eee;
        margin: 8px 0;
      }
      .popup-content strong {
        color: #555;
      }
      .popup-icon {
        margin-right: 4px;
      }
    </style>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="controls">
      <label for="daySelect">Select Day</label>
      <select id="daySelect"></select>

      <button id="startButton">Start</button>
      <button id="pauseButton">Pause</button>
      <button id="resumeButton">Resume</button>

      <div id="status">
        Trip <span id="rideNumberDisplay">–</span>
      </div>
    </div>
    <div id="descriptionDisplay"></div>

    
    

    <script src="days.js"></script>
    <script>
      // Set Mapbox access token and initialize the map.
      mapboxgl.accessToken =
        "pk.eyJ1IjoibmljaG9sYXM3NzciLCJhIjoiY202NW40cHpnMXJmODJpcHlvZHVjZDA5ZiJ9.HoZYIgpxoOkZEM7Fb9_Lsw";
      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/light-v11",
        center: [-87.65, 41.9],
        zoom: 11
      });

      // Animation variables.
      let marker = null;
      let animationCoords = [];
      let animationIndex = 0;
      let animationFrameId = null;
      let paused = false;
      const DEFAULT_DELAY = 100;  // Default delay in ms for non-ride features.
      let startEndMarkers = [];
      let rideNumbers = [];
      let descriptions = [];
      let animationDelays = []; // Array to hold per-coordinate delay in ms.

      const daySelect = document.getElementById("daySelect");
      const rideNumberDisplay = document.getElementById("rideNumberDisplay");
      const descriptionDisplay = document.getElementById("descriptionDisplay");
      const startButton = document.getElementById("startButton");
      const pauseButton = document.getElementById("pauseButton");
      const resumeButton = document.getElementById("resumeButton");

      // Load available days into the dropdown.
      async function loadAvailableDays() {
        daySelect.innerHTML = days.map(day => `${day}">${day}`).join("");
      }

      // Returns HTML description for a feature.
      function getDescription(feature) {
        const tipValue = parseFloat(feature.properties.tip);
        // If tip is non-zero, set background to light green; otherwise, no extra background.
        const bgStyleTip = tipValue > 0 ? 'background-color: lightgreen;' : '';
        const surgeValue = parseFloat(feature.properties.surge);
        const bgStyleSurge = surgeValue > 0 ? 'background-color: #FED8B1;' : '';
        return `
          
            ${feature.properties.rideType}
            📍Pickup: ${feature.properties.pickupAddress}
            🚩Dropoff: ${feature.properties.dropoffAddress}
            
            💵Base Pay: $${feature.properties.basePay}
            ${bgStyleSurge}">⚡Surge: $${feature.properties.surge}
            ${bgStyleTip}">🤝Tip: $${feature.properties.tip}
            💰Earnings: $${feature.properties.earnings}
            
            📏Distance: ${feature.properties.distance} miles
            ⏱Duration: ${feature.properties.duration} sec
            
            ⏰Start: ${feature.properties.rideStartTime}
            🏁End: ${feature.properties.rideEndTime}
          
        `;
      }

      // Load GeoJSON and extract coordinates, ride numbers, descriptions, and compute delays.
      async function loadGeoJSON(day) {
        // Append a cache-busting query parameter.
        const url = `output/geojson/${day}.geojson?t=${new Date().getTime()}`;
        const response = await fetch(url);
        const geojson = await response.json();
        const coords = [];
        rideNumbers = [];
        descriptions = [];
        animationDelays = [];
        geojson.features.forEach((feature, i) => {
          if (feature.geometry.type === "LineString") {
            const rideNum = `${i + 1}`;
            let desc;
            // Compute a per-coordinate delay if feature is a ride.
            let delayValue = DEFAULT_DELAY;
            if (feature.properties.type === "ride" && feature.properties.duration) {
              const durationSeconds = parseFloat(feature.properties.duration); // duration in seconds
              // Total animation time for this feature (in ms) = (duration/400)*1000.
              const totalTimeMs = (durationSeconds / 400) * 1000;
              const numCoords = feature.geometry.coordinates.length;
              delayValue = totalTimeMs / numCoords;
            }
            // Otherwise, use a default delay for non-ride features.
            desc =
              feature.properties.type === "ride"
                ? getDescription(feature)
                : "Racing to my next ride! 🏎️";

            feature.geometry.coordinates.forEach((c) => {
              coords.push(c);
              rideNumbers.push(rideNum);
              descriptions.push(desc);
              animationDelays.push(delayValue);
            });
          }
        });
        return { geojson, coords };
      }

      // Add start/end markers with popups for ride features.
      function addStartEndMarkers(geojson) {
        // Remove existing markers.
        startEndMarkers.forEach((m) => m.remove());
        startEndMarkers = [];

        geojson.features.forEach((feature) => {
          if (feature.geometry.type === "LineString" && feature.properties.type === "ride") {
            const coords = feature.geometry.coordinates;
            if (coords.length < 2) return;

            // Create start marker (green dot).
            const startEl = document.createElement("div");
            startEl.textContent = "🟢";
            startEl.style.fontSize = "16px";
            startEl.addEventListener("mouseenter", () => {
              const popup = new mapboxgl.Popup({
                closeButton: false,
                closeOnClick: false
              })
                .setLngLat(coords[0])
                .setHTML(getDescription(feature))
                .addTo(map);
              startEl._popup = popup;
            });
            startEl.addEventListener("mouseleave", () => {
              if (startEl._popup) {
                startEl._popup.remove();
                startEl._popup = null;
              }
            });
            const startMarker = new mapboxgl.Marker({ element: startEl })
              .setLngLat(coords[0])
              .addTo(map);

            // Create end marker (red dot).
            const endEl = document.createElement("div");
            endEl.textContent = "🛑";
            endEl.style.fontSize = "16px";
            endEl.addEventListener("mouseenter", () => {
              const popup = new mapboxgl.Popup({
                closeButton: false,
                closeOnClick: false
              })
                .setLngLat(coords[coords.length - 1])
                .setHTML(getDescription(feature))
                .addTo(map);
              endEl._popup = popup;
            });
            endEl.addEventListener("mouseleave", () => {
              if (endEl._popup) {
                endEl._popup.remove();
                endEl._popup = null;
              }
            });
            const endMarker = new mapboxgl.Marker({ element: endEl })
              .setLngLat(coords[coords.length - 1])
              .addTo(map);

            startEndMarkers.push(startMarker, endMarker);
          }
        });
      }

      // Start animation: load data, add markers, and begin the animation loop.
      function startAnimation() {
        cancelAnimationFrame(animationFrameId);
        if (marker) { marker.remove(); }
        animationIndex = 0;
        paused = false;
        const selectedDay = document.getElementById("daySelect").value;

        fetch(`output/geojson/${selectedDay}.geojson`)
          .then(response => response.json())
          .then((geojson) => {
            // Add start/end markers.
            addStartEndMarkers(geojson);
            return loadGeoJSON(selectedDay);
          })
          .then(({ coords }) => {
            animationCoords = coords;
            if (!animationCoords.length) return;

            // Create an animated marker (a car).
            const carEl = document.createElement("div");
            carEl.textContent = "🚙";
            carEl.style.fontSize = "24px";
            carEl.style.transition = "transform 0.1s linear";
            carEl.style.willChange = "transform";
            marker = new mapboxgl.Marker({ element: carEl })
              .setLngLat(animationCoords[0])
              .addTo(map);

            const routeGeoJSON = {
              type: "Feature",
              geometry: {
                type: "LineString",
                coordinates: animationCoords,
              },
            };

            map.getSource("route").setData(routeGeoJSON);
            map.fitBounds(turf.bbox(routeGeoJSON), { padding: 20 });
            animate();
          });
      }

      // Animation loop uses per-coordinate delay.
      function animate() {
        if (paused) return;
        if (animationIndex < animationCoords.length) {
          marker.setLngLat(animationCoords[animationIndex]);
          document.getElementById("rideNumberDisplay").textContent =
            rideNumbers[animationIndex];
          document.getElementById("descriptionDisplay").innerHTML =
            descriptions[animationIndex];
          // Get delay for the current coordinate or use default.
          const delay = animationDelays[animationIndex] || DEFAULT_DELAY;
          animationIndex++;
          animationFrameId = setTimeout(() => requestAnimationFrame(animate), delay);
        }
      }

      function pauseAnimation() {
        paused = true;
        cancelAnimationFrame(animationFrameId);
      }

      function resumeAnimation() {
        if (!paused) return;
        paused = false;
        requestAnimationFrame(animate);
      }

      // On map load, set up sources and layers; then load available days and start animation.
      map.on("load", async () => {
        map.addSource("route", {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates: [],
            },
          },
        });

        map.addLayer({
          id: "route-line",
          type: "line",
          source: "route",
          paint: {
            "line-color": "#007cbf",       // A pleasant blue.
            "line-width": 3,               // A bit thinner than 4px.
            "line-dasharray": [1, 3],       // Creates a dashed effect.
            "line-opacity": 0.8            // Slight transparency.
          }
        });

        await loadAvailableDays();
        // Choose a random day.
        const randomIndex = Math.floor(Math.random() * days.length);
        const randomDay = days[randomIndex];
        document.getElementById("daySelect").value = randomDay;
        startAnimation();
        document.getElementById("daySelect").addEventListener("change", startAnimation);
      });

      // Bind buttons.
      document.getElementById("startButton").addEventListener("click", startAnimation);
      document.getElementById("pauseButton").addEventListener("click", pauseAnimation);
      document.getElementById("resumeButton").addEventListener("click", resumeAnimation);
    </script>
  </body>
</html>