Skip to main content
SimilarExport ZIP
100%

Polished Medical Cost Personal (with menu)

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

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.

AI-generated description

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

UPDATE: Now include a menu to try others X and Y on runtime, and was made using react and D3 instead vega-lite-api.

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

A visualization constructed using the React. and D3

MIT Licensed

Similar vizzes

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

Medical Cost Personal (charges vs bmi)

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.

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

Polished Scatter Plot with Menus

This interactive scatter plot lets users explore attributes from the inpatient rehabilitation utilization dataset by selecting which variable appears on each axis via dropdown menus. The visualization renders as an SVG using React components, with D3 v5 functions such as `scaleLinear` for axis scaling and `extent` for domain calculation. Axes are built from custom `AxisBottom` and `AxisLeft` components that generate tick lines and labels, while circular marks include tooltips showing formatted payment values. The layout separates menu controls from the chart area, and the styling uses the Poppins font with distinct tick and label colors.

Ddeltiger
80% match
Loading thumbnail…

Medical Insurance Cost Scatterplot

A scatterplot displays individual medical insurance records from a CSV dataset, plotting each person's age on the x-axis against their insurance charges on the y-axis. All points render as steelblue circles with a fixed radius of 5 pixels. The visualization uses React with d3.v7, leveraging `scaleLinear` and `extent` to compute the axes, and a `data` join to bind the CSV rows to `circle` elements in the SVG.

Jjojongo15342@gmail.com
79% match
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
78% match
Loading thumbnail…

Medical Insurance Box Plots

This visualization displays box plots of medical insurance charges grouped by age decade and smoker status, revealing higher costs for smokers across all age groups. The chart uses D3 v7 with the d3-rosetta utility library, computing quartiles, medians, and whiskers from the CSV dataset. Each age decade shows paired box plots for smokers and non-smokers with interactive tooltips displaying summary statistics, alongside axis labels, a legend, and sample counts rendered through modular rendering functions.

Jjojongo15342@gmail.com
78% match