Prototype 3

100%

✓ Published1🌍 Public

Last edited Oct 28, 2025

Created on Oct 8, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

75% match

Loading thumbnail…

Task3

This scatter plot visualizes a heart disease dataset, showing the relationship between resting blood pressure and serum cholesterol. Each circle represents a patient, with its color indicating chest pain type: sky blue for typical angina, light green for atypical angina, orange for non-anginal pain, and red for asymptomatic cases. The D3 v6 code loads CSV data, uses `scaleLinear` and `extent` to map axes, and renders SVG circles with the `join` pattern. Axis labels are added as SVG text elements, with the chart sized to the full `window.innerWidth` and `window.innerHeight`.

Sshanmukhivasa@my.unt.edu

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

73% match

Loading thumbnail…

Box Plot

This example displays a horizontal box plot summarizing the distribution of age values from a hepatitis C patient dataset. The chart shows the minimum, first quartile, median, mean, and maximum as colored lines and a rectangle, with whiskers extending to the full data range rather than using the 1.5 IQR rule. Built with React and D3 v6, it computes statistics using d3.min, d3.max, d3.quantile, and d3.mean, scales the x-axis with d3.scaleLinear, and renders SVG elements through reusable AxisBottom and BoxPlot components.

WWaseem Medhat

73% match