Prototype 3, interactivity increment

100%

Prototype 3, interactivity increment

✓ Published0🌍 Public

Last edited Oct 28, 2025

Created on Oct 28, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Prototype 3

This example shows a box plot comparing resting blood pressure distributions between male and female patients from a heart disease dataset. The visualization displays median lines, interquartile ranges, whiskers, and labels for Q1 and median values for each sex group. It uses React with D3 v7, leveraging `scaleBand`, `scaleLinear`, and `axisBottom`/`axisLeft` to render the chart. Data is loaded from a local CSV file using `d3.csv` and processed to calculate quartile statistics.

AAbhi Yammanuru

87% 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

83% match

Loading thumbnail…

Fork of Project Momentum Color

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.

AAbhi Yammanuru

82% 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

82% 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…

Assignment 5 - Prototype 1

This visualization shows the relationship between patient sex and resting heart rate, displaying the average maximum heart rate for each sex as colored bars. A bar chart is used, with pink bars representing female patients and steelblue bars representing male patients. The data comes from a CSV file loaded via `d3.csv`, and the visualization is built using React with D3 v7, leveraging `d3.scaleBand`, `d3.scaleLinear`, and `d3.group` to aggregate and scale the data before rendering.

AAbhi Yammanuru

79% match

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

79% match

Loading thumbnail…

Prototype 4

This interactive scatter plot displays insurance charges against age, with a color selector allowing viewers to group data by smoker status, sex, region, BMI category, or number of children. Built with React and D3.js v7, the visualization uses a d3.scaleOrdinal with schemeCategory10 for coloring, and draws best-fit regression lines per group. A legend and radio-button controls filter the categorical coloring.

Jjojongo15342@gmail.com

76% match