Beneath the Surface — Exploring Pile Dwellings
Ana / October 1, 2024
As part of my internship at Interactive Things, my first project was to create a storytelling experience based on a topic of my choice. I decided to explore the world of pile dwellings — prehistoric homes built on wooden stilts across the Alpine region.
🗺️ Project Overview
“Beneath the Surface” is an interactive and educational website that guides users through a visual journey of over 1,000 known pile dwelling sites from 5000 to 500 BC, spread across six Alpine countries.
Links
The site includes:
- A scroll-driven narrative powered by Scrollama
- A Mapbox + Deck.gl map visualizing dwelling types by color (lake, river, bog)
- A time slider to explore pile dwellings by period 5000 to 500 BC
- Contextual information explaining:
- What pile dwellings are
- Why Switzerland has so many
- Important sites, villages, and architectural patterns
📊 Data Source
The dataset comes from the UNESCO World Heritage Centre, specifically from the Prehistoric Pile Dwellings around the Alps database. The dates presented are taken directly from the UNESCO report and may reflect biases, as they serve to simplify a complex chronology. The data used includes coordinates, site names, chronology, area of the site, and buffer zones, all of which were retrieved from the UNESCO website, the Pile Dwellings website, the UNESCO Report 2011, and Wikipedia overview list.
🧰 Technologies Used
- Next.js + TypeScript for framework and structure
- Mapbox + Deck.gl for interactive geographic visualization
- Scrollama for scroll-driven storytelling
- D3 for data formatting and manipulation
- MUI (Material UI) for component styling
✨ Features
- As you scroll through the site, the map zooms in to regions being discussed, enhancing engagement and spatial context.
- Each site is categorized by dwelling environment (lake, river, bog), with distinct colors and icons.
- Rich visuals and minimal UI help create a calm, exploratory experience.
💬 Final Thoughts
This was an amazing first project to kick off my internship — I loved combining my passion for design, history, and data into a cohesive narrative experience. It deepened my skills in:
- Working with Deck.gl overlays
- Handling geospatial data
- Writing scroll-triggered animation logic
- Structuring projects in Next.js + TypeScript