Skip to main content
SimilarExport ZIP
100%

Prototype 4

✓ Published1🌍 Public
Jjojongo15342@gmail.com
Last edited Oct 30, 2025
Created on Oct 30, 2025
Forked from Prototype 1

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Final Project

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.

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
87% 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
85% 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
84% match
Loading thumbnail…

Reusable scatter plot

This reusable D3 scatter plot visualizes the insurance dataset, mapping age on the x-axis and cycling through BMI, charges, and children values on the y-axis every two seconds. It uses SVG rendering with animated transitions to swap the y-axis label and rescale the data points. The plot differentiates data points by smoker status using distinct symbols and colors from D3's `schemeCategory10` scale, and is built with reusable accessors for width, height, data, and margins.

Kkotlavamsireddy@gmail.com
81% 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
80% 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
79% match
Loading thumbnail…

Scatter Plot with Menus on Medical Cost Personal Dataset

This interactive scatter plot explores the Medical Cost Personal Dataset, showing relationships between patient attributes like age, BMI, and children. Users select which attribute maps to the x- and y-axes via two ReactDropdown menus, with smoker status encoded by the color of each circle. Built with React and D3 v5, the visualization uses scaleLinear for axes, scaleOrdinal for colors, and custom SVG components for axis ticks and marks, loading data via d3.csv.

Llynz09
79% match