Time of Your Life

Inspiration

People always say to “use numbers” to support their arguments, but numbers alone don’t help, especially when your audience cannot visualize what those numbers actually represent. Life expectancy is an example of one of those metrics that mean nothing to the average citizen. When they say a number, it doesn’t convey everything. It doesn’t show what the years mean, how they compare across countries, or even what factors influence them. The United Nations released their formula and calculations; however, they are still confusing to the average person.

We want to change that.

Our goal was to take the common statistic, life expectancy, and create something visual, interactive, and intuitive. We wanted to make it understandable to people of any age or educational background. Instead of just presenting a number, we wanted to tell the story behind it and help people see the factors that shape it.

What it does

Time of Your Life is an interactive website that transforms life expectancy data into a visual experience. Using datasets from the United Nations and other publicly available data that we manually filtered, calculated, and curated, the platform allows users to: - Explore life expectancy across different countries and regions. - Compare trends over time. - Visualize what the “life expectancy number” represents. - Interact with data through charts and animations. Rather than just displaying index numbers, the website presents intuitive visualizations that help users understand patterns.

How we built it

We started by using publicly available datasets related to life expectancy and healthcare spending, provided by the government or the United Nations for the most part. Since the raw data was often disorganized and overwhelming, we used a combination of Python in Jupyter Notebook, Excel, and Google Sheets to clean, filter, and reduce the data to only the variables that were the most relevant to our time frame and analysis.

Backend: Using Pandas and Numpy in Pandas, we performed some basic data processing and basic exploratory analysis. Excel and Google Sheets helped us inspect trans and restructure columns quickly, as well as manually refining the data when needed.

For Visualization, we used multiple tools. We used Sphinx AI (as part of the challenge) to generate and power many of our primary interactive graphics like the globe and age cohort over time animation. We used Jupyter Notebook for some exploratory plots and analysis which were later formed by Figma on the website.

Front end: The entire front end was built with Figma Make as part of the Figma challenge. Every page, interaction, layout, colorscheme, and animation was designed and prototyped directly in Figma. This allowed us to focus more on the visual component and worry about accuracy over the coding part of the website. The goal was to ensure that users of any age or background could navigate the platform easily and understand the visualizations without technical knowledge.

Challenges we ran into

The biggest challenge was trying to integrate tools over multiple platforms. We wanted to embed Sphinx’s interactive maps and visualizations into Figma Maker, but the compatibility between file types was almost nonexistent. Converting files into compatible formats took a lot of time and experimentation.

File sizes were also another issue. As we added more visualizations and interactive elements, the project files became large and difficult to manage, our computers were stalling and the software was also not loading the files due to their sheer size.

Creating the interactive map was difficult as well. Our first attempt in Figma resulted in a map that appeared as disconnected “blobs” rather than a clean geographic visualization. We had to rebuild the map in Sphinx AI and successfully made it interactive but embedding it back into Figma Make required additional hours of troubleshooting and workaround solutions.

Not all of the graphics behaved the same way. One of our interactive graphics did not function consistently with the others, so we had to find an alternative embedding approach.

The data also presented many challenges. The public datasets were large and difficult to navigate, inconsistent across countries, uneven in reporting standards and time ranges, and occasionally disorganized or incorrectly formatted. Cleaning and standardizing the data took a substantial amount of time before it was ready for graphics.

Additionally, working with the newer AI tools came with a learning curve; the AI models did not always execute tasks correctly and required multiple refinements. Figma Maker also limits all direct manual editing, meaning even the smallest changes required prompting the AI instead of just making quick edits yourself. Figma Make also produced designs that were overly “AI-generated.” To create a more human-centered experience, we manually adjusted layouts, refined typography, and completely reworked the color scheme to give the site a more cohesive look.

Accomplishments that we're proud of

Our two biggest accomplishments were successfully building and embedding an interactive globe map that was powered by real world data and creating and embedding our animations into the final website. After many hours of troubleshooting file formats, debugging code we barely understood, and reconstructing datasets, we were able to properly import and display a fully interactive global visualization and a smooth animation of people fading out, accurately representing the life expectancy. What makes these accomplishments especially meaningful is that we had very menial experiences with these tools before this hackathon. As freshmen participating in our first hackathon/datathon, we were in unfamiliar technical territory and pushed ourselves. We are proud of our final product, and how much we learned and accomplished in the short time span we were given.