Otten et al. 2020 – Shifted Maps – Hall of Fame

Team: Ertl Hannah Pamina, Urdea Ana-Maria

Shifted Maps Screenshot

About

Shifted Maps is a visualization technique that transforms personal movement data into a network of interconnected map extracts. Visited places appear as nodes and movements between places as edges, enabling exploration of spatial and temporal mobility patterns.

Our Extensions

We extended Shifted Maps to make it more accessible for general users and to encourage reflection on daily mobility patterns. Our four extensions are:

  1. Google Maps Timeline integration: We added an import feature that converts Google Timeline JSON data into the Shifted Maps dataset format.
  2. My Day in Motion (24h animation): A daily playback mode that steps through a full day of movement in chronological order, with playback controls and reduced idle time for sparse data.
  3. Color-Mapping: We introduce a color encoding for routes to make frequently used connections stand out at a glance and enhance interpretability.
  4. Shifted Maps Wrapped (export): A “Spotify Wrapped”-inspired export option for sharing a personalized summary of the user’s mobility data.

Screenshots of the implemented Extension Features

Day-in-Motion Feature
Still frame of my-day-in-motion feature
Day-in-Motion UI
UI for my-day-in-motion feature
Screenshot of Color Mapping
Color-Mapping of Edges corresponding to thickness
Screenshot of Color Legend
Color Legend with current Minimum and Maximum
Shifted Maps Wrapped Export
Example of Shifted Maps Wrapped Export

Data Conversion

Google Timeline data is converted server-side using a Python script. During conversion, locations can optionally be enriched with human-readable place names using OpenStreetMap’s Nominatim reverse-geocoding service (no API key required). 

python scripts/convert_location_history.py \
  data/location-history.json \
  data/location-history-converted.json \
  --use-nominatim \
  --nominatim-email you@example.com

Supplying a contact email is recommended by the Nominatim usage policy. Requests are throttled automatically and cached locally to respect rate limits and ensure fast repeated conversions.

Running the Code

  1. Install dependencies: npm install
  2. Start the application: npm start
  3. Open in browser: http://localhost:3000/

Links

References

A more detailed Documentation of the code and extensions can be found under: