HeartTrends

HeartTrends Logo
Home page, displays the various analyses performed.
Depicts the age distribution among those affected by heart disease.
Proof for domain name, hearttrends.tech

Inspiration

Cardiovascular diseases, resulting in compromised blood vessels, clogged blood clots, and weakened hearts, are the leading cause of death for men, women, and the most racial/ethnic groups in the United States. One person every 37 seconds die from heart disease. HeartTrends offers an eye-opening data analysis that delves into the multiple factors and variables behind those affected.

What it does

HeartTrends is a simple yet immersive web application that discovers interesting trends and distributions from a UC Irvine database. The website depicts 5 novel factors behind cardiovascular diseases -- age, chest pain type, maximum heart rate, resting blood pressure, and serum cholesterol. Initially greeted with the home page, the user can choose from a variety of selection cards that link to a full-page exploratory analysis of previously mentioned factors behind the disease. Each plot offers an interesting relationship between general heart health and variables that can be easily measured at any time. The dataset used is primary data from people hospitalized for cardiovascular disease. Thus, the user can compare their own heart rate and blood pressure to the distribution, serving as a predictive model for future heart attacks and resulting symptoms.

How I built it

I built HeartTrends using R and NextJS. To generate all of the plots and charts that are displayed on the website, I coded a command script that reads in a CSV file taken from the UC Irvine Dataset on Kaggle. Then I sorted the file into the corresponding variables and created 6 ggplots of the age, heart rate, chest pain, blood pressure, and serum cholesterol. The y-axes display the frequency and the x-axes are the numerical distributions. After I created a plot of each of the factors, I combined them into one image, shown in the "All Plots" card, by using the grid.arrange function. I used NextJS and used CSS styling to create an easily navigable UI. The 6 cards redirect the user to their chosen analysis, serving as an informative and effective web application.

Challenges I ran into

This was one of my first times analyzing data and creating meaningful plots in R Studio. It was challenging to build and arrange the plots, but after reading more R documentation, it was awesome to see such interesting trends come out of a complex CSV file.

Accomplishments that I'm proud of

I'm proud of providing an easy-to-use predictive model for such a prevalent and dangerous condition.

What I learned

I learned how to data-mine and plot interesting graphs. I also discovered the impact that a good CSS style can make on a website. Initially, my website was composed of radio buttons and default fonts. But after creating new text formats and designs, I was surprised to see how great the UI appeared.

What's next for HeartTrends

I plan for HeartTrends to be expanded to include more diseases, such as different cancers and viruses. With the widespread COVID-19 chaos, I want to provide an exploratory website that can show the distribution of the virus around the world.