Skip to main content
Log in
A

Abhi Yammanuru

@abhiyam·15 public vizzes

Loading thumbnail…

correlation matrix

This visualization displays a correlation matrix of clinical indicators related to heart disease, using a diverging color scale to highlight positive and negative relationships. It shows the computed Pearson correlation coefficients between seven numeric variables, with values printed within each cell. Built with React and D3 v7, the code uses `scaleLinear` to map correlations to colors, calculates correlations manually, and renders the matrix as SVG rectangles with interactive hover highlighting.

Dec 3, 2025
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.

Nov 16, 2025
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.

Nov 15, 2025
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`.

Nov 10, 2025
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.

Oct 28, 2025
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.

Oct 28, 2025
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.

Oct 22, 2025
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.

Sep 29, 2025
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.

Sep 29, 2025
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.

Sep 14, 2025
Loading thumbnail…

Loading Data 1

This example demonstrates loading a CSV file containing red and white wine quality data, with numerical columns for attributes like acidity, sugar, and alcohol. Users can either select a local file or rely on a default dataset. The visualization uses d3.select to manage the display, rendering the parsed data as JSON in a preformatted text block. It leverages d3.csvParse to convert the file contents into structured data, with numeric columns explicitly cast to numbers before updating the visualization state.

Sep 7, 2025
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.

Sep 7, 2025
Loading thumbnail…

Loading Data 2

This example demonstrates loading a heart failure prediction dataset from a CSV file via a file input, then displaying its contents as a formatted JSON object. The visualization initially fetches `heart.csv` using D3's `fetch` and `csvParse` functions, converting numeric columns to numbers. Users can subsequently load their own CSV file, which is read using the `FileReader` API and parsed by `d3.csvParse`, updating the displayed state. The code relies on D3's `select`, `selectAll`, and `join` operations to render the data.

Sep 7, 2025
Loading thumbnail…

Loading Data 3

This example demonstrates how to load and display CSV data from either a local file or a remote source using D3 v7's `csvParse` and `fetch` APIs. It presents a file input that lets users choose a CSV file, while also automatically loading a default `plane.csv` dataset containing airline flight information. The parsed data is rendered as a JSON-formatted text preview inside a `<pre>` element, with all numeric columns converted to numbers during parsing. The visualization updates dynamically whenever new data is loaded.

Sep 3, 2025
Loading thumbnail…

Abhi Fork of Circles with D3

This example visualizes a network of seven circles connected by a web of blue lines on a red background. Each circle is positioned at fixed coordinates, with varying radii and contrasting black or white fills at reduced opacity. Lines connect consecutive points in the dataset, while additional lines radiate from two fixed anchor points to each circle. The visualization is rendered using D3 v7's selection and data join methods, including `select`, `data`, `join`, and SVG attribute setters like `attr('cx')` and `attr('stroke')`.

Aug 25, 2025