Project

100%

✓ Published0🌍 Public

Last edited Apr 21, 2024

Created on Apr 20, 2024

This scatter plot visualizes the relationship between BMI and heart disease status, using data loaded from a CSV file hosted on GitHub. The x-axis maps BMI values, while the y-axis encodes heart disease presence as a binary 0 or 1, with semi-transparent blue circles showing individual data points. Built with React and D3 v6, the code uses `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG chart across the full browser window, with custom margins and axis labels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Heart Disease Scatter Plot

This fork of a Heart Disease scatter plot shows the relationship between a patient’s BMI and the presence of heart disease, with the X-axis representing BMI and the Y-axis indicating heart disease status. The visualization uses D3 v6 to load CSV data from a GitHub gist, parse values with `d3.csv`, and map them to SVG circles via `d3.scaleLinear`. Axes are drawn with `axisLeft` and `axisBottom`, and the plot is rendered as an SVG canvas. The data originates from the Heart Disease UCI Kaggle dataset.

Ssahajm99@gmail.com

84% match

Loading thumbnail…

HeartDisease

This example visualizes the relationship between SleepTime and BMI using a scatter plot, where each point represents an individual, colored red or green based on HeartDisease status. The x-axis maps BMI and the y-axis maps SleepTime, with point sizes varying according to PhysicalHealth and MentalHealth values. It loads CSV data via d3.csv, scales the axes with d3.scaleLinear, renders circles in SVG, and uses d3.axisBottom and d3.axisLeft for the axes. The chart’s margins and dimensions adapt to the browser window.

Cchandanagandla

83% match

Loading thumbnail…

Physical Health vs BMI Scatter Plot

This scatter plot visualizes the relationship between physical health and body mass index (BMI) using a dataset from Heart2020Cleaned.csv. Each blue circle with a black stroke represents an individual data point, with BMI mapped to the x-axis and PhysicalHealth to the y-axis. The visualization uses d3.v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, while circles are appended to an SVG via `selectAll` and `enter`. The code, written in plain JavaScript, also makes use of D3’s `csv` function for asynchronous data loading.

Cchandanagandla

82% match

Loading thumbnail…

Area Chart - DV - Project

This is an area chart built with React and D3 v5, visualizing the relationship between BMI and Blood Pressure from a CSV dataset of diabetic patients. The chart uses D3's `scaleTime` and `scaleLinear` for axes, and `line` and `area` generators with a basis curve to draw a smooth line and a green filled region beneath it. Axis labels and tick lines are styled via CSS, and the SVG is updated dynamically after parsing the data with `csv`. The chart shows how blood pressure varies with BMI, highlighting a trend across the data points.

HHema1430

80% match

Loading thumbnail…

Scatter Plot - Project 16

This scatter plot visualizes a diabetes dataset, mapping glucose levels on the x-axis against BMI on the y-axis, with each point colored by outcome (red for positive, green for negative). It also encodes insulin and blood pressure values into the `rx` and `ry` attributes of the circles, creating elliptical markers. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes. Data is loaded asynchronously via `d3.csv` from a GitHub gist URL, with a custom row parser converting numeric fields.

Ggayuvurukuti@gmail.com

80% match

Loading thumbnail…

Fork of Goals Scatter Plot with Hover

This scatter plot visualizes heart health data from a CSV source, plotting BMI against age categories with circles colored by sex. Built using D3.js, the visualization fetches data via d3-fetch's `csv` function and renders responsive axes with the `@curran/responsive-axes` library. Each circle includes a tooltip via `append('title')` that displays BMI and age values on hover, while mouseover transitions enlarge the circle radius using `select(this).transition().attr('r')`. The plot uses a linear scale for both axes and a gray background rectangle to highlight the data area.

Sshreyasribearelly@gmail.com

79% match

Loading thumbnail…

SCATTER PLOT by chaturya

This dual-panel chart compares BMI against height and weight across individuals using a bar chart layout. The left panel displays BMI values as green bars, while the right panel shows height and weight as paired orange and blue bars, respectively. Built with React and D3, the visualization uses `scaleBand` and `scaleLinear` for axes, with `csv` loading data from a GitHub-hosted BMI dataset. Custom axis groups rotate x-axis labels for readability, and rounded bar corners add polish. The SVG rendering clearly contrasts the three metrics, though the title in the provided code does not match the requested scatter plot description.

CChaturyaAkhilaPallem@my.unt.edu

79% match

Loading thumbnail…

Visualizing correlations between heart disease patients' data

This interactive scatterplot displays correlations between heart disease patient attributes—such as age, cholesterol, and BMI—with heart disease status, using a red dot for each individual. Users select any attribute pair from the two dropdown menus to swap the axes, and the points animate smoothly into their new positions. The visualization is built with D3 v7, using the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs for scaling and axes, while `transition.attrTween` or `transition().duration().delay()` handles the animation. The data comes from a CSV file loaded via `d3.csv`.

AAshtone Onyango

79% match