top of page

Welcome
to NumpyNinja Blogs

NumpyNinja: Blogs. Demystifying Tech,

One Blog at a Time.
Millions of views. 

Search

The Live Clinical Dashboard: Transforming Heart Disease Data into an Interactive Experience with Plotly


The "Why": From Reporting to Empowering

As a data analyst, I’ve realized that insights are often "trapped" within the technical environments where they are created. In my previous analysis, I utilized Tableau to create a visual representation of the heart disease data. While Tableau is exceptional for discovery, I realized that for a clinical tool to be truly interactive and "live" in a custom web environment, a doctor or researcher needs a workspace that exists on their own terms. I wanted to build this live app to bridge that gap between complex data science and real-world decision-making.


A Note on the Dataset: A Controlled Clinical Prototype

It is important to note that this workspace uses a curated, smaller dataset (the UCI Heart Disease set) specifically for demonstration purposes. While the sample size is compact, it serves as a high-fidelity "Proof of Concept". In the real world, clinical data involves millions of records and complex streaming inputs. By launching this demo, I am showcasing the infrastructure and storytelling framework required to handle those larger populations. The architecture I have built here—using Docker and Dash—is designed to be modular and can be adapted to handle enterprise-level clinical data.


The Walkthrough: Launching into the "Happy Faces" Cloud

Setting up a professional cloud environment on Hugging Face (often nicknamed "Happy Face" for its logo) is a precise process. Here is how I moved my project from my desktop to the web:


1. Creating the Workspace: I started by creating an account on Hugging Face, the industry standard for hosting open-source ML apps. I created a new Space named Heart-disease-clinical-workspace and selected Docker as my SDK (Software Development Kit). While the standard choice for data demos is often Streamlit due to its simplicity, I opted for Docker to ensure a production-grade result.

The "Plain English" Explanation: Streamlit is like sending a friend a recipe and hoping they have the right ingredients and oven to make it work. Docker is like sending the entire kitchen in a shipping container. It bundles my code, my specific Python version, and my libraries so they run exactly the same way on the cloud as they do on my laptop. Choosing Docker was a critical decision for me as an analyst; it gave me full control over the server environment, ensuring my clinical libraries would run exactly as intended.


2. The Deployment Pipeline: I uploaded three essential "bricks" to the repository:



3. The Launch Phase: After uploading, the platform began "Building" the container. The status transitioned to Starting, where the platform verified the app could bind to its assigned port. Finally, the status flipped to a green "Running". My analysis was officially live.



Evolution of the Narrative: From Flow to Hierarchy

Readers of my previous post will notice that my "Evidence Locker" has evolved. While I previously used Sankey diagrams to map patient risk flow, I have now transitioned to Sunburst Hierarchies and Correlation Matrices.

By moving to a Dash-based framework, I am now able to provide multi-dimensional views. We are no longer just looking at "zones" of data; we are looking at the connective tissue of patient health—how Age, Blood Pressure, and Cholesterol interact simultaneously to define risk.


Technical Challenges: 3 Errors That Taught Me DevOps

The path to "Running" taught me that being a data analyst today requires a bit of DevOps knowledge. I hit three specific roadblocks:

  1. The NotJSONError Mystery: I discovered that while Jupyter Notebooks look like simple Python, they are actually complex JSON documents. To achieve stability, I pivoted to a standard .py script—the industry standard for production-grade apps.

  2. The "Localhost" Trap: My logs showed the app was running, but the browser refused to connect. I learned that in Docker, 127.0.0.1 (localhost) is a private loopback. I had to force the server to bind to 0.0.0.0 to allow the platform's health checker to "see" my app.

  3. The API Evolution: I encountered an ObsoleteAttributeException because I was using app.run_server(). Modern Dash versions have replaced this with app.run(). It was a stark reminder that staying current with documentation is part of the job.



The Final Narrative: Deep Clinical Insights

The final dashboard presents a cohesive clinical story:

  • The Systemic View (Correlation Matrix): The heatmap reveals how biomarkers like vessel count (ca) and ST depression (oldpeak) are the strongest predictors of heart disease.

  • The Silent Path (Sunburst Chart): This chart visually justifies the need for proactive screenings, showing a high prevalence of disease among "Asymptomatic" patients.

  • The Vitals View (Bubble Chart): By using bubble size to represent cholesterol, this chart visualizes how risk factors cluster in older populations.


Technical Methodology: Understanding the Biomarkers

For non-medical readers, here is the "Evidence Locker" glossary:

  • trestbps: Resting blood pressure (mm Hg).

  • chol: Serum cholesterol in mg/dl.

  • thalach: Maximum heart rate achieved during testing.

  • oldpeak: ST depression induced by exercise, a key indicator of cardiac stress.

  • ca: Number of major vessels (0-3) colored by fluoroscopy; a direct view of cardiovascular health.


Conclusion: The Analyst’s New Toolkit

Deploying this app taught me that data science is about more than just models—it’s about delivery. By mastering Docker and the Dash framework, I’ve ensured that my clinical storytelling isn’t just a static report, but a living tool accessible from anywhere in the world.


References & Further Reading

+1 (302) 200-8320

NumPy_Ninja_Logo (1).png

Numpy Ninja Inc. 8 The Grn Ste A Dover, DE 19901

© Copyright 2025 by Numpy Ninja Inc.

  • Twitter
  • LinkedIn
bottom of page