Globbie

Inspiration

We were inspired by the disconnect between data and action in climate reporting. Current tools present CO2 emissions as abstract numbers in spreadsheets. We wanted to transform this data into a compelling, immediate, and beautiful visual narrative. We believe that by showing the "true cost" of modern transportation right on a 3D globe, we could create instant awareness and motivate users to choose lower-impact routes.

What it does

Globbie is an interactive, real-time visualization platform that calculates and maps the estimated carbon footprint of any global journey.

• Select & Visualize: Users choose start and end points directly on the 3D globe.
• Route Mapping: A dynamic arc is drawn between the points, showing the path and distance.
• Real-Time Scoring: Based on the distance, transportation mode (flight, train, car), and occupancy, Globbie instantly calculates the estimated CO₂e emissions and assigns a relative Eco Score.
• Data Analytics: The sidebar provides detailed equivalents (e.g., "equivalent to X km driven by car") and allows users to adjust variables like flight class and occupancy to see the impact in real time. ## How we built it We used the three.js library, combined with the globe.gl wrapper, to render the interactive 3D visualization.
• Front-End: The entire application is built using a single, self-contained HTML, CSS, and JavaScript file for rapid deployment and consistency. We used custom CSS to achieve the modern, celestial 'SkyMint' aesthetic.
• Calculations: The core logic is based on internal JavaScript functions that model standard emission factors for various transport types (applying a Radiative Forcing Index for flights) to provide the CO₂e metrics.
• UX/UI: We created Globbie Jr. to give the project a unique, cute, and modern brand identity, making a serious topic more engaging. ## Challenges we ran into
• Geospatial Data Handling: Integrating the latitude/longitude data from our geocoding search into the globe.gl library and ensuring the complex 3D arcs rendered smoothly between distant points required significant debugging of projection math.
• Emission Model Complexity: Creating a simple, yet reasonably accurate, CO₂e estimation model that correctly accounts for variables like short vs. long-haul flights, flight class, and shared occupancy for cars was a significant time sink. We had to focus on relative accuracy rather than absolute precision.
• Performance: Maintaining smooth globe rotation and interaction while simultaneously rendering arcs and data points required continuous optimization of the Three.js rendering loop. ## Accomplishments that we're proud of
• End-to-End Functionality: Delivering a fully functional, self-contained visualization and calculation tool within the hackathon timeframe.
• The Globe Visualization: The 3D globe is smooth, visually compelling, and the core differentiator that immediately communicates global impact. ## What we learned We learned the power of visual storytelling in data presentation. Simply calculating a number is not enough; wrapping that number in an engaging, interactive visualization is what drives insight and behavior change. We also sharpened our skills in integrating complex external libraries (Three.js) under extreme time constraints. ## What's next for Globbie We see huge potential to expand Globbie into a full platform:
• Multi-Modal Routing: Implementing smarter route planning that suggests the lowest-carbon transport option between cities (e.g., high-speed rail vs. budget flight).
• Data Integration: Connecting to real-time APIs for better local emission factors and offsetting project data.
• Team Tracking: Developing a dashboard feature where corporate or educational teams can collectively track and gamify their carbon reduction goals.

Built With

• css
• html
• javascript