Inspiration
We wanted to explore how cardiovascular risk model outputs could be easier to understand at a glance. A number on its own can be hard to interpret, so we built an interactive dashboard that pairs model scores with a visual heart schematic.
What it does
Cardio Risk Studio takes a set of clinical features and runs them through four machine learning pipelines: one for overall coronary artery disease and one each for the LAD, LCX, and RCA. It shows the outputs in a dashboard, with a 3D heart schematic whose coronary vessels respond to the scores. The app also includes an explanation view to show which features influenced a selected model output.
How we built it
The project combines a React and TypeScript frontend with a FastAPI backend. The backend loads the existing scikit-learn pipelines, checks and prepares the submitted features, and returns model scores. We used Three.js to make the heart schematic interactive, with a vector fallback for browsers that can’t use WebGL.
Challenges we ran into
One challenge was making sure the API handled the same 55 input features and encodings expected by the saved model pipelines. Another was presenting four separate outputs in a way that felt clear without implying they were clinical diagnoses or calibrated probabilities. Building a useful visualization while keeping its limitations visible took thought, too.
Accomplishments that we're proud of
We brought four model outputs together in one interactive dashboard, with a 3D heart visualization to make them easier to explore.
What we learned
We gained hands-on experience with React, TypeScript, FastAPI, machine learning integration, and Three.js. We also learned how important it is to validate inputs and explain model results clearly.
What's next for CardioLab
We’d like to improve the interface, test the models with more data, and make the explanations easier to understand.
