Map Visualization
Visualizing Geo-Spatial Routes
- Implementation: Utilizing
Leaflet.js to map Origin and
Destination coordinates.
- Algorithm: Shortest path calculation avoiding coordinate wrapping.
- Visuals: Dynamic drawing of Bezier curves to represent travel routes
instead of straight lines.
- Implementation: Utilizing
Leaflet.jsto map Origin and Destination coordinates. - Algorithm: Shortest path calculation avoiding coordinate wrapping.
- Visuals: Dynamic drawing of Bezier curves to represent travel routes instead of straight lines.
Data Classification
AI Image Tagging Strategy
- Implementation: Python-based Zero-shot Classification (Machine
Learning).
- Algorithm/Logic: Scanning raw postcard images to extract subject matter
into 10 semantic categories.
- Refinement: Mitigated AI label bias by removing color-dependent tags
(e.g.,
"Vintage") to ensure pure object detection.
Open Question: Is 10 categories optimal for the user, or should we
aggregate
them further?
- Implementation: Python-based Zero-shot Classification (Machine Learning).
- Algorithm/Logic: Scanning raw postcard images to extract subject matter into 10 semantic categories.
- Refinement: Mitigated AI label bias by removing color-dependent tags (e.g., "Vintage") to ensure pure object detection.
Open Question: Is 10 categories optimal for the user, or should we
aggregate
them further?
Interactive Filtering
Cross-filtering User Inputs
- Implementation: Vanilla JS filtering logic dynamically updating the DOM
and
Map layers.
- Algorithm: Filters operate simultaneously using strict
AND logic to isolate highly specific data subsets.
- Tools:
Select2 for searchable dropdowns,
noUiSlider for travel distance range mapping.
- Implementation: Vanilla JS filtering logic dynamically updating the DOM and Map layers.
- Algorithm: Filters operate simultaneously using strict
AND logicto isolate highly specific data subsets. - Tools:
Select2for searchable dropdowns,noUiSliderfor travel distance range mapping.
Analytics & Animation
Real-time Feedback & Visual Cues
- Live Analytics: Instantly calculating and updating statistics
(Total
Cards, Unique Topics) based on active filters.
- Route Animation:
requestAnimationFrame logic
interpolating marker movement smoothly along the Bezier paths.
- Visual Cues: Custom CSS glowing effects and "beeping" beacons for Late
Arrivals.
- Live Analytics: Instantly calculating and updating statistics (Total Cards, Unique Topics) based on active filters.
- Route Animation:
requestAnimationFramelogic interpolating marker movement smoothly along the Bezier paths. - Visual Cues: Custom CSS glowing effects and "beeping" beacons for Late Arrivals.
Extra Feature Map Explorer️
Apple Photos Inspired Interaction
- How it Works: We will show images by zoom in to the map. If we hover over in the picture, it will enlarge and display details.
- The Problem: Rendering thousands of high-resolution postcard thumbnails simultaneously causes severe browser lag and memory crashes.
- The Solution: So we will display one postcard per destination country. This ensures a buttery-smooth user interface with zero frame drops!
