Explore Your Own Genome with Students’ Data Visualizer

Ever wonder why you’re an ace trumpet player or why you can’t stand cilantro? For their final project at Hack Reactor, four students created a website, Genomie, that helps users learn about their own genome. Anyone who has had their genes sequenced by the company 23andMe can log in to Genomie and explore the nuances of their genetic code.  

“A lot of people can get their genome sequenced through 23andMe, but there isn’t a method for them to play around on their DNA,” explains Peter Lollo, who built Genomie with Alex Anthony, Gar Lee and Chris Bassano.

“The info that 23andMe provides is serious and medically oriented,” says Anthony. “We wanted to do something a little more interesting to the average user.”

Genomie allows users to learn about why they have traits such as their eye color, love of coffee, or desire to seek out risks. Users do this, not by sifting through medical studies, but by clicking on various chromosomes on an interactive representation of a genome.

coding bootcamp, hack reactor, genetics, 23andMe

Genomie allows 23andMe users to explore their genetic traits through an interactive display.

The Genomie team explored genetic research to fill these facts in manually. Each correlation between a certain genetic trait and a particular aspect of a person had to meet the criteria of being both backed up by years of data and compelling to the average user. This collection and curation of genetic studies created a parallel research project for the group as they built out Genomie. For each trait they incorporated, the group selected a YouTube video to help explain it.

“There are scientific studies for every mutation that we discussed putting in there, but some studies have been quite recent, so we tried to stick to ones that were really well-documented,” Anthony explains.

The team also incorporated 23andMe’s ancestry data. Users can explore an interactive tree and globe which displays any relatives--close or distant--who are also 23andMe members.

coding bootcamp, hack reactor, genetics, 23andMe

Genomie visualizes where one’s relatives live around the globe.

The project, built over four weeks as the final part of the Hack Reactor curriculum, was a healthy mix of back-end and front-end work. The back-end element involved pulling data from the 23andMe API and organizing it using Python into something that the front-end of the project could make use of. The front-end used Angular and d3 to turn this data into an interactive, visually pleasing display. The tech stack was rounded out by Python Flask, PostgreSQL and SQL Alchemy ORM. In most cases, each member of the group learned these technologies while building Genomie, using fundamentals and self-teaching techniques taught at Hack Reactor.

“My favorite part was watching the entire project unfold into what it is now,” says Lee. “In the beginning, we were all set on building this in React, but the limitations of incorporating d3 into React created a huge hurdle. We refactored our code into Angular. You get to learn the use case for each technology.”

Facing these challenges and overcoming them to build a functioning product put a cap on an incredibly intense three months.

“I feel like it’s a perfect mix between your favorite classes in college and your favorite camping, get-away-from-the-world trip,” describes Anthony. “We were so immersed, but also learning so much and having so much fun. It’s also ten times harder than the hardest jobs you’ve had.”

Ready to build your own interactive websites and apps? Apply to Hack Reactor and any other school in the Reactor Core network.

Read more:

Students’ React Native App Opens Channels Across the Globe

Students Solve Major Issue in Music Sharing with Songlink, Get Recognized in LifeHacker and Product Hunt

Students’ Internet of Things Project Creates Airbnb for Electricity