Skip to main content
SimilarExport ZIP
100%

Fork of Basic Scatter Plot with React & D3 with Diabetes Data

✓ Published1🌍 Public
Rrpkupfer@wpi.edu
Last edited Sep 10, 2025
Created on Sep 7, 2025

A scatter plot visualizes the relationship between Glucose and Insulin levels in a diabetes dataset, with each circle representing a patient. The React app loads the CSV data and passes it to the D3 visualization module. D3's `scaleLinear` and `extent` functions calculate the axis domains, while the `join` operator binds data points to SVG circles, setting their positions, radius, and fill color.

AI-generated description

Fork of Basic Scatter Plot with React & D3 with the diabetes data used for the previous assignment.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Diabetes Data

This dashboard visualizes diabetes risk factors from patient data using a linked scatter plot and bar chart. The scatter plot positions patients by BMI and glucose levels, colored by age and shaped by outcome, while the bar chart shows average glucose by diabetic status. Clicking a point highlights that patient and displays their full record below. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `scaleBand`, `symbol`, and `axisBottom` to render the interactive charts.

Sskasliwal@wpi.edu
84% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Pima Indians diabetes dataset, cycling through different variable pairings every two seconds to reveal correlations. The visualization renders circles for each data point using D3.js version 7, with scales computed from the current x and y value accessors. It employs the reusable `scatterPlot` module pattern, updating axes and circle positions via D3’s data join. The animation cycles through eight columns, including Glucose, BMI, and Age, while the SVG canvas fills the browser window. Axes are drawn using `axisLeft` and `axisBottom`, with styling applied through CSS classes.

AArun
84% match
Loading thumbnail…

Fork of Fork of Hello VizHub

A scatter plot visualizes diabetes patient data, showing Blood Pressure against Glucose Level, with each point colored skyblue for non-diabetic outcomes and lightgreen for diabetic outcomes. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load and parse the diabetes dataset from a GitHub URL, then render circles in an SVG. Circle radii are fixed, while additional data attributes for SkinThickness and Insulin are stored but not visually encoded. Axis labels and a title are added directly via SVG text elements.

LLakshmiPrasannaValdas@my.unt.edu
83% match
Loading thumbnail…

Diabetic Scatter Plot with axis

This scatter plot visualizes the relationship between glucose and insulin levels in blood, with each point colored green or red to indicate whether a patient was diagnosed with diabetes. The data originates from the National Institute of Diabetes and Digestive and Kidney Diseases, focusing on female patients of Pima Indian heritage. The visualization uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, plus custom axis labels, all rendered through React and the d3 `select` API.

Rrpkupfer@wpi.edu
83% match
Loading thumbnail…

Fork of Making Scatter Plot ICE6

This visualization displays a scatter plot of the Pima Indian Diabetes dataset, plotting Glucose levels on the x-axis against DiabetesPedigreeFunction on the y-axis. Each circle is colored by the Outcome variable using d3.scaleOrdinal with two distinct colors, and size is fixed at a radius of 7. The React component uses d3.scaleLinear for both axes, with SVG rendering via React elements. The code leverages d3.csv for data loading, custom AxisBottom and AxisLeft components for tick marks, and tooltips generated through SVG title elements within the Marks component.

RRinoj-Gautam
82% 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
82% match
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

A React and D3 scatter plot visualizes hospital readmission metrics across U.S. states, comparing the number of hospitals performing worse versus better than the national average for each measure. The code loads CSV data, converts non-numeric values to NaN, and filters out invalid points before rendering circles with d3.scaleLinear. The `viz` function uses `selectAll` and `data().join()` to bind points, with padding applied to the x and y axes. The dataset comes from CMS hospital readmission rates per state.

RRyan Offstein
81% match
Loading thumbnail…

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the diabetes dataset, mapping pregnancies and glucose levels as points on a dynamic SVG canvas. It cycles through multiple columns—Pregnancies, Glucose, BloodPressure, and SkinThickness—updating the x-axis every 100 milliseconds to animate the chart. Built with d3.scaleLinear, axisBottom, and axisTop, it encodes species as distinct shapes via the shapePath function. The plot adjusts to window dimensions and refreshes automatically, offering an interactive glimpse into the dataset’s correlations.

AArun
81% match