GrinView

GrianView ☀️

Belfast's Solar Intelligence Platform "Grían" (Irish): Sun Built for Belfast. Powered by Belfast's own light.

Inspiration

The Belfast 2036 problem statement got us thinking deeply about how urban environments transition to renewable energy. While pursuing our Master's in Data Science and AI at Queen's University Belfast, we realized there is a massive wealth of environmental data—like the 52,872-building LiDAR survey—that usually sits locked in complex geographic information systems (GIS).

We were heavily inspired by the challenge of estimating rooftop solar potential in urban areas using high-resolution digital elevation models. We set out to take that level of scientific rigor and build a tool that delivers answers in thirty seconds: type an address, see the building, and know immediately if solar panels make financial and environmental sense. Beyond utility, we wanted to inject a bit of fun into the local culture, leading to the "Sunny & Social" feature, which uses the same data to track where to find a sunlit pint or coffee in real-time.

What it does

GrianView transforms Belfast's unused LiDAR survey data into an interactive, 3D solar intelligence platform. It features two core tools:

Solar Suitability Checker: Type any Belfast address to search a 52k+ building dataset instantly. The app fetches real-time polygon geometry to render a 3D model of the building and scores its solar viability based on five weighted factors (radiation, aspect, pitch, area, and shading). It returns estimated annual generation, payback periods, and checks for local heritage/conservation status. Sunny & Social: A real-time tracker answering the question, "Where in Belfast is sunny right now?" A time slider lets users scrub through the day while the app recalculates the angular relationship between the sun's exact astronomical position and the facing angle of local venues, re-ranking them dynamically.

How we built it

We architected GrianView for speed and visual clarity, keeping the complex geospatial processing completely invisible to the user.

Frontend & UI: Built on Next.js 14 (App Router) using Tailwind CSS and Framer Motion for a fluid, application-like feel.

Data Architecture: To bypass database latency, we built an in-memory CSV index in Node.js that loads all 52,872 buildings on server startup, keeping memory under 80MB and startup time under 200ms.

Mapping & 3D Rendering: We layered Mapbox GL JS for 2D map exploration (featuring a custom IDW interpolation script for a radiation heatmap overlay) with vanilla Three.js to dynamically render and extrude 3D building models directly from OpenStreetMap (OSM) Overpass API polygon data.

The Algorithms: The suitability score uses a weighted five-factor model based on the LiDAR raster: $$S = 0.35(R_{ann}) + 0.25(W_{asp}) + 0.20(W_{pitch}) + 0.10(A_{roof}) + 0.10(S_{hade})$$ To ensure our theoretical generation estimates were grounded in reality, we utilized standard electricity production calculations that factor in the usable roof area, radiation, and solar panel efficiency constraints: $$E = A \cdot H \cdot 0.15 \cdot 0.8$$

Real-Time Astronomy: We utilized SunCalc.js to compute the sun's exact altitude and azimuth for Belfast's coordinates at any given timestamp.

Challenges we ran into

Deriving 3D Geometry from 2D Data: Our dataset contained mean slope and aspect values derived from LiDAR, but rendering an accurate roof required programmatic inference. If a building had a low mean slope but a high aspect confidence, we had to dynamically infer whether it was a flat surface or a symmetric gabled roof to extrude the OSM footprint correctly in Three.js.

Spherical Trigonometry at Scale: For the Sunny & Social feature, we dynamically calculated the angular difference between the sun's current azimuth and each building's geometric aspect. Keeping this performant while the user rapidly scrubs a time slider required heavy optimization.

Handling Asynchronous APIs: Merging our instant local CSV dataset with live geometry fetches from the Overpass API—and enriching it with Historic Environment NI heritage flags—required careful async state management so the UI wouldn't block while waiting for polygons to draw.

Accomplishments that we're proud of

Achieving a sub-200ms search speed for a 50k+ row dataset using a purely in-memory solution, eliminating the need for a heavy external database. Successfully translating complex geospatial concepts, like those used to assess urban solar potential with digital elevation models, into a highly intuitive consumer web app. Building a vanilla Three.js renderer from scratch that accurately extrudes raw map footprints and aligns them to true compass north without relying on heavy abstraction libraries.

What we learned

In-Memory Optimization: We learned that for static datasets under 100MB, local indexing in Node.js can easily outperform traditional database queries.

Bridging GIS and WebGL: Fusing raw geospatial raster data with real-time 3D web rendering taught us how to creatively adapt raw coordinate geometries into interactive, beautiful digital objects.

Algorithmic Transparency: We realized that raw solar radiation data ($kWh/m^2/day$) is virtually meaningless to the general public. Translating that mathematical output into tangible metrics—like estimated CO₂ offsets and payback periods—was essential for driving real-world impact.

What's next for GrianView

Dynamic Weather Integration: Incorporating real-time and seasonal weather data, such as diffuse proportion and transmissivity parameters, to calculate even more accurate electricity generation yields. Scale Beyond Belfast: Expanding our in-memory data structures to handle LiDAR data for the entirety of Northern Ireland.

Advanced Roof Modeling: Enhancing the Three.js rendering engine to automatically categorize and visualize specific architectural roof types (e.g., hipped, mansard, or complex gabled) using advanced geometric algorithms.