100%

Fork of Project Momentum Color

✓ Published1🌍 Public

Last edited Nov 16, 2025

Created on Nov 16, 2025

This interactive scatter plot explores the relationship between patient age and a selectable health metric (cholesterol, resting blood pressure, max heart rate, oldpeak, or age) from a heart disease dataset. A dropdown menu controls the Y-axis variable. The visualization uses D3.js (v7) within a React framework to render an SVG, featuring a legend that allows users to hover and filter data points by gender, highlighting male and female patients in dark blue and pink, respectively. The chart updates dynamically with selections.

AI-generated description

Heart Disease Data Visualization

Interactive D3.js visualization of heart disease data with React.

Features

Adjustable Y-Axis: Select from multiple variables to display on the Y-axis (Cholesterol, Resting BP, Max Heart Rate, Oldpeak, Age)
Gender Filtering: Hover over the legend to filter data by gender (Male/Female)
Interactive Chart: Scatter plot showing the relationship between Age (X-axis) and selected variables (Y-axis)
Color-Coded: Males displayed in dark blue, females in pink

Available Y-Axis Variables

Cholesterol
Resting BP (Blood Pressure)
Max Heart Rate
Oldpeak
Age

How to Use

Use the dropdown menu at the top to select which variable to display on the Y-axis
Hover over the legend items (Male/Female) to highlight specific gender groups
The chart updates dynamically based on your selections

MIT Licensed

Similar vizzes

Loading thumbnail…

Project Momentum Color

This scatterplot visualizes the relationship between age and cholesterol levels across patients, with colors indicating gender: dark blue for males and pink for females. Using d3.scaleLinear, d3.extent, and SVG circles, the chart maps heart disease data points and includes an interactive legend. Hovering over the legend triggers a filter that dims the non-selected gender group, implemented through React state management and d3 event handlers. The visualization is rendered in a React application using D3 v7.

AAbhi Yammanuru

90% match

Loading thumbnail…

Fork of Project Momentum: Start Polishing

This interactive bar chart compares medical metrics between male and female patients, with a dropdown menu to switch the y-axis among five health indicators including Max Heart Rate, Resting Blood Pressure, and Cholesterol. Built with React and D3 v7, the visualization aggregates the CSV data by sex and renders average values as color-coded bars, using `d3.scaleBand` and `d3.scaleLinear` for positioning. Clicking a bar highlights that gender while dimming the other, and a legend identifies the male (steelblue) and female (pink) categories.

AAbhi Yammanuru

88% match

Loading thumbnail…

Project Momentum: Start Polishing

This interactive bar chart compares health metrics by sex, showing average values for age, cholesterol, resting blood pressure, max heart rate, or ST depression from heart disease patient data. A dropdown menu switches the y-axis metric, and clicking a bar dims the other category to highlight the selected sex. Built with React and D3 v7, it uses `scaleBand`, `scaleLinear`, and `group` to aggregate data, with axes rendered via `axisBottom` and `axisLeft`.

AAbhi Yammanuru

83% match

Loading thumbnail…

Prototype 3, interactivity increment

This interactive boxplot visualization compares the distribution of health metrics for male and female patients, with a dropdown menu to switch between Resting BP, Cholesterol, Max HR, Age, and Oldpeak. Hovering over a boxplot dims the other group to facilitate comparison. Built with React and D3 v7, the visualization uses `scaleBand` and `scaleLinear` to compute quartiles, whiskers, and medians from the heart disease dataset. The interactivity is managed through React state for the selected metric and hovered sex, with D3 used for rendering the SVG axes and geometric elements.

AAbhi Yammanuru

82% match

Loading thumbnail…

Fork of Scatter Plot with Menus - Heart Disease Dataset

This scatter plot visualizes heart disease patient data from the UCI dataset, mapping age against maximum heart rate achieved. Users can dynamically change both axes via dropdown menus, selecting from quantitative variables like resting blood pressure or categorical options like patient sex. Built with D3 v6, the visualization uses `scaleLinear` and `scalePoint` for axis scaling, with smooth transitions animating circle positions and radii. The plot renders as SVG, with circles colored by patient sex (red for female, blue for male) and axis updates triggered through custom menu components dispatching change events.

RRyanYun0017

82% match

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes heart disease data from the UCI Machine Learning Repository, allowing users to explore correlations between numeric attributes like age, cholesterol, and blood pressure. Dropdown menus let viewers select which columns map to the X and Y axes. The visualization is built using D3 v5, with `scaleLinear` for scaling axes, `axisLeft` and `axisBottom` for gridlines, and animated circle transitions via `transition().duration(2000)` with staggered delays. SVG rendering displays semi-transparent red circles, while axis labels and tick marks are styled through CSS.

AAshtone Onyango

80% match

Loading thumbnail…

Assignment 5 - Prototype 2

This scatter plot visualizes the relationship between patient age and cholesterol levels, with points colored by sex to reveal potential patterns in heart disease data. The visualization is built using React and D3.js, employing `d3.csv` for data loading and `d3.scaleLinear` for the x and y axes. The chart includes a legend for male and female data points, with axis labels and a title generated through the custom `viz` function.

AAbhi Yammanuru

80% match

Loading thumbnail…

Reusable Scatter plot aSSIGNMENT

This interactive scatter plot visualizes healthcare data, plotting patient age against cholesterol levels with gender-based color coding (blue for male, pink for female). The visualization includes labeled axes, a title, and a legend, with a periodic redraw every five seconds. Built with D3.js, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` function, rendering SVG elements. Data is loaded asynchronously via `csv` from a GitHub-hosted healthcare dataset, demonstrating a modular approach to creating configurable chart components.

Vvineelaramulapalli32

79% match