Assignment 5 - Prototype 2

100%

Assignment 5 - Prototype 2

✓ Published2🌍 Public

Last edited Sep 29, 2025

Created on Sep 29, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 4

A scatterplot displays the relationship between patient age and cholesterol levels from a heart disease dataset. Each circle represents one patient, positioned by age on the x-axis and cholesterol on the y-axis. The visualization is built with React and D3 v7, using `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes and circles. Data loads from a CSV file with numeric fields formatted before the chart renders.

AAbhi Yammanuru

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

86% match

Loading thumbnail…

Assignment 3

This visualization displays the relationship between age and cholesterol levels in a heart attack prediction dataset from Kaggle. Each circle represents a patient, positioned by age on the x-axis and cholesterol on the y-axis. Built with React and D3 v7, the visualization loads CSV data and uses `d3.scaleLinear` for axis scaling. Circles are rendered using the D3 `selectAll().join()` method to bind data points to SVG circle elements, creating a scatter plot where all points share the same size and color.

AAbhi Yammanuru

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

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

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

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

80% match

Loading thumbnail…

Final Project

This scatter plot displays insurance charges against patient age, with points colored by a user-selected attribute such as smoker status, sex, region, BMI category, or number of children. A legend updates dynamically, and linear regression lines are calculated for each color group to reveal trends. Built with React and D3.js (d3.v7), the visualization uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render the chart from the `data.csv` file.

Jjojongo15342@gmail.com

80% match