Skip to main content
SimilarExport ZIP
100%

Final Project

✓ Published0🌍 Public
Jjojongo15342@gmail.com
Last edited Nov 14, 2025
Created on Nov 14, 2025
Forked from Prototype 4

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Prototype 4

This interactive scatter plot displays insurance charges against age, with a color selector allowing viewers to group data by smoker status, sex, region, BMI category, or number of children. Built with React and D3.js v7, the visualization uses a d3.scaleOrdinal with schemeCategory10 for coloring, and draws best-fit regression lines per group. A legend and radio-button controls filter the categorical coloring.

Jjojongo15342@gmail.com
87% match
Loading thumbnail…

Prototype 1

This prototype visualizes the relationship between age and insurance charges across 1,338 patient records from a CSV dataset, with points colored by smoker status and linear regression lines for each group. The chart includes axes, a title, and a hover tooltip showing detailed data. The visualization is built using D3 v7 within a React application, employing `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, along with `line` for the best-fit trend lines.

Jjojongo15342@gmail.com
86% match
Loading thumbnail…

Activity8Task3

This scatter plot visualizes insurance data, showing the relationship between a patient's age and their insurance charges. Each point represents an individual, with colors encoding the patient's region of residence. The visualization is built using D3 v6, with a linear scale mapping age to the x-axis and charges to the y-axis. Data is loaded asynchronously from a remote CSV file via `d3.csv`, and circles are appended to an SVG container using data joins, with axes rendered by `axisBottom` and `axisLeft`.

BBindumadhavi
85% match
Loading thumbnail…

Iterated Medical Insurance Cost Scatterplot

This chart visualizes medical insurance costs by plotting age against charges for individual patients. Each point is colored by smoking status, with red circles representing smokers and green representing non-smokers, making the higher charges associated with smoking immediately apparent. The visualization is built with a React component using D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, and `select` to render an SVG scatterplot. Data is loaded asynchronously from a CSV file using D3's `csv` method.

Jjojongo15342@gmail.com
85% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between age and insurance charges using data loaded from a CSV file. D3.js v7 scales map age and charge values to SVG circle positions, with axes labeled and a title displayed. The visualization uses d3.csv to fetch external data, d3.scaleLinear for both x and y domains, and d3.axisBottom and d3.axisLeft to render the axes. The SVG rendering approach draws each data point as a small blue circle.

PPranay Matalia
83% match
Loading thumbnail…

Children Prototype

This scatterplot shows insurance charges plotted against age, with each point colored by the number of children the insured person has. The visualization uses a categorical color scheme to distinguish between zero and five children, and includes an interactive tooltip that displays age, children count, and charges on hover. The chart is built with React and D3.js, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `selectAll().join()` to render the circles. Data is loaded from a CSV file containing insurance records.

Jjojongo15342@gmail.com
83% match
Loading thumbnail…

BMI Prototype

This scatterplot visualizes insurance charges based on age, with each point colored by BMI category (underweight, normal, overweight, obese). The React app loads data from a CSV file, uses d3 scales and axes to map age and charges, and renders colored circles with d3's join operation. A hover tooltip displays age, BMI, and charges, while a legend explains the color categories. The chart uses d3.scaleLinear for both axes and d3.axisBottom/axisLeft for tick marks.

Jjojongo15342@gmail.com
82% match
Loading thumbnail…

Scatter Plot - Insurance Charges by Age

This scatter plot visualizes insurance charges for individuals based on age, with each circle’s color indicating smoking status—red for smokers and black for non-smokers. The chart, rendered as SVG using D3 v6, loads data from a CSV file via `d3.csv`, applies linear scales via `d3.scaleLinear`, and uses `d3.axisLeft` and `d3.axisBottom` for axes. The code joins circles to data with `selectAll().data().join()` and sets fill opacity to 0.35.

RRaul Gamez
82% match