Skip to main content
SimilarExport ZIP
100%

Medical Cost Personal (charges vs bmi)

✓ Published0🌍 Public
Mmeperezcuello
Last edited Oct 2, 2019
Created on Oct 2, 2019

This visualization displays the relationship between BMI and medical charges for individual patients, with each circle colored by smoking status and sized according to patient age. The plot uses positioned circles from the vega-lite-api library, rendering as an SVG through the vega and vega-lite specifications. Data comes from the Medical Cost Personal Dataset, loaded via d3.csv. The chart applies custom axis and label styling from a configuration object, while incorporating interactive tooltips through vega-tooltip to reveal each patient's region on hover.

AI-generated description

This visualization shows Medical Cost Personal Dataset. It was designed with the objective to see understand clustering by charges and bmi by patient.

Each circle represent if the patient is a smoker, and t he size indicates the age of each patient.

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Medical Cost Personal (charges vs bmi)

This visualization uses an interactive scatterplot to explore the relationship between patient BMI and medical charges, with each circle representing a patient. The color distinguishes smokers from non-smokers, while the circle size encodes patient age. The chart is built with the vega-lite-api library on top of Vega-Lite and d3, loading data from a CSV file hosted as a GitHub gist. The code customizes the axes and label styling through a config object.

Mmeperezcuello
96% match
Loading thumbnail…

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

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
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
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
76% match
Loading thumbnail…

ICE - VI (Scatter Plot)

This scatter plot compares medical charges with body mass index, coloring each point by the number of children. The chart uses D3 v5’s `csv` loader to parse the MedicalExpensesPredictors dataset, then maps BMI to the x-axis and charges to the y-axis via `scaleLinear` and `extent`. Points are rendered as SVG circles with `selectAll` and `join`, while `axisLeft` and `axisBottom` create the axes. Labels for both axes and a title are added as SVG text.

Mms.himabinduchalla@gmail.com
75% match
Loading thumbnail…

Vega-Lite Grouped Bar Chart

This grouped bar chart compares average BMI between smokers and non-smokers across different regions, using adjacent bars for each smoker status to make direct visual comparisons easier. The visualization loads medical cost data from a CSV file via d3.csv and renders with Vega-Lite, using the vega-lite-api to encode columns by region, x-axis by smoker status, and y-axis by average BMI. The color channel also maps to smoker status, and a tooltip displays the average BMI on hover. Display settings are customized through a config object that adjusts font sizes and axis styling.

MMartin Blatz
74% match