Scatter Plot with Menus on Medical Cost Personal Dataset

100%

Scatter Plot with Menus on Medical Cost Personal Dataset

✓ Published0🌍 Public

Last edited Oct 7, 2020

Created on Oct 7, 2020

Forked from Polished Scatter Plot with Menus

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.

AI-generated description

A scatter plot of Medical Cost Personal Datasets.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the relationship between three numeric attributes (age, bmi, and charges) from the insure.csv dataset. Two dropdown menus let users select which attribute appears on the X and Y axes, and the axes labels update accordingly. The visualization uses D3 v5 scaleLinear and extent functions to compute domains, maps data to SVG circles, and renders axes with custom tick formatting. The React app leverages the useData hook to asynchronously load and parse the CSV data via D3's csv function.

SSamir Nandardhane

84% 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

83% match

Loading thumbnail…

Scatter Plot with Color Menu

This interactive scatter plot lets users explore healthcare cost data by selecting X, Y, and color attributes from dropdown menus. The D3 v5 visualization uses a time-based X-axis for the year column and linear scaling for other metrics, with color encoding via `scaleOrdinal` and `schemeCategory10`. A `colorLegend` component displays the categorical scale, while the `scatterPlot` module animates circles with `transition().duration(2000)` as users change selections, all rendered as SVG elements.

KKhatera Alizada

82% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes depression data across different age groups, allowing users to dynamically select which attributes appear on the x and y axes via dropdown menus. Built with React and D3 v5, the visualization uses d3.scaleLinear and d3.extent to map data points as SVG circles, with axis components rendered through custom React components. The dataset is loaded asynchronously using d3.csv from a remote URL. Users can switch between sepal measurements and species attributes, with axis labels updating accordingly to reflect the selected variables.

NNikithakatta30

81% match

Loading thumbnail…

Scatter Plot for Covid data with Menus

A React-based scatter plot visualizes COVID-19 metrics from a May 2020 dataset, with dropdown menus controlling which two attributes (e.g., new cases, total deaths) map to the x- and y-axes. Points are colored by continent using a d3.scaleOrdinal color scale and a custom color legend. Built with d3.v5 for scales, axes, and SVG rendering, the chart uses React hooks (useState, useEffect) to manage state and load data via d3.csv, with interactive axes formatted using d3.format.

Mmanasishrotri

80% match

Loading thumbnail…

Scatter Plot with X Y Menus

This interactive scatter plot displays U.S. mortality statistics, letting users choose which demographic attributes or death types to plot on the x- and y-axes via ReactDropdown menus. The code uses the d3.csv loader, d3.scaleLinear, and d3.extent to parse and scale data from a Gist, then renders SVG circles and axes using React components such as AxisBottom, AxisLeft, and Marks. Only points matching a hard-coded "Total" age group are visible, with all other circles rendered at zero radius.

PPeter Maida

80% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot, built with D3 v4, Redux, and d3-component, visualizes the classic Auto MPG dataset from the UCI Machine Learning Repository. Users can select which attributes to plot on the X and Y axes, as well as which attribute determines the color of the points, via dropdown menus. The visualization animates transitions smoothly when the selection changes, demonstrating how Redux can manage state changes that drive D3 updates without a React layer.

HHawkinsJM

80% match