Built an Interactive Website Quantifying Global Cities' Green Space Data

Complex satellite-derived data from more than 180 cities needed to be presented in a format that people could easily explore and understand. HUGSI required a fast, interactive platform that could visualize detailed green-space insights without compromising accuracy, usability, or performance.

• Visualizing large volumes of city-level green-space data on a global map.
• Representing every square kilometer through accurately positioned hexagons.
• Maintaining smooth map interactions across zoom levels, filters, and viewing modes.
• Organizing complex environmental data into clear and engaging categories.
• Delivering fast performance despite data-heavy maps and interactive components.
• Making technical sustainability insights accessible to both experts and general users.

• Our experts began the engagement with collaborative workshops involving the HUGSI team, product stakeholders, and experienced JavaScript developers. These sessions helped clarify the data structure, user journeys, map behaviors, performance expectations, and long-term platform vision.
• A custom web experience was developed using React.js and Gatsby.js to deliver a fast, secure, and search-friendly foundation. The architecture was designed to support large amounts of visual data while maintaining smooth navigation and responsive performance.
• Mapbox GL JS was used to create a global map that displays quantified green-space data across more than 180 cities. Each hexagon represents a one-square-kilometer area, helping users understand how greenery is distributed across different urban regions.
• Advanced filters and multiple viewing modes were introduced to help visitors explore the data from different perspectives. Users could switch between standard, terrain, and population views while smoothly zooming into municipalities and comparing city-level insights.
• The platform also included a municipality leaderboard, HUGSI+ subscription access, newsletter registration, and a dedicated request flow for cities interested in being included in future assessments. These features expanded the platform beyond visualization into engagement, education, and community participation.
• Bytes Technolab’s content team supported the initiative with clear and engaging website content that simplified complex environmental concepts. Deployment, performance optimization, continuous maintenance, and ongoing product enhancements were also managed to support the platform’s evolving roadmap.

HUGSI successfully transformed complex environmental data into an engaging digital experience that makes urban green-space insights easier to access, explore, and compare globally. 

• 516+ cities visualized through an interactive map designed to present complex sustainability data in an understandable format.
• One-square-kilometer mapping granularity enabled users to examine green-space distribution at a more detailed urban level.
• Three dynamic map modes provided different perspectives across standard, terrain, and population-based views.
• 2x faster data exploration was enabled through responsive filters, optimized map interactions, and simplified city-level navigation.