Medical Insurance Box Plots

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.

88% match

Insurance

The scatter plot shows medical insurance charges across patient ages, with points colored by smoking status to reveal that smokers incur consistently higher costs than non-smokers. The visualization uses the Vega-Lite API within a D3 v5 framework, binding CSV data loaded via `d3.csv` and rendering points with `vl.markPoint`. The chart encodes age and charges on quantitative axes via `vl.x().fieldQ()` and `vl.y().fieldQ()`, while the categorical smoker variable drives `vl.color().fieldN()`. Custom styling is applied through a Vega-Lite config object that adjusts axis labels and title fonts.

Llynz09

83% match

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

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.

79% match

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.

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.

Medical Insurance Cost Scatterplot

This scatterplot visualizes the relationship between patient age and medical insurance charges across over 1,000 records from a Kaggle dataset. Each green circle represents an individual, with age plotted on the x-axis and charges on the y-axis, revealing a general upward trend in costs with age. The React app loads data from a CSV file using d3.csv, then the viz.js module applies d3.scaleLinear and d3.extent to map values to screen coordinates, rendering circles with d3’s selection and join methods.

Polished Medical Cost Personal (with menu)

This interactive scatterplot explores the Medical Cost Personal Dataset, plotting patient attributes such as age, BMI, and charges against each other. Each circle represents a patient, with color indicating smoker status and size reflecting age, allowing for visual clustering analysis. Built with React and D3 v5, the visualization features dropdown menus that dynamically change the X and Y axes at runtime. The SVG rendering uses `scaleLinear` and `scaleOrdinal` from D3 to map data values, while custom React components like `AxisBottom`, `AxisLeft`, and `Marks` handle the chart elements. Data is loaded asynchronously via the `csv` function.

Mmeperezcuello