Scatter Plot of CDC Data with Menus

100%

Scatter Plot of CDC Data with Menus

✓ Published0🌍 Public

Last edited Dec 5, 2021

Created on Nov 3, 2021

Forked from Scatter Plot with Menus Including Species

This data visualization displays a scatter plot of U.S. CDC health data, allowing users to explore relationships between variables like age, weight, and exercise. The chart uses two dropdown menus to select which quantitative or categorical columns map to the x- and y-axes, with points updating via d3's transition API. The implementation leverages d3's scaleLinear and scalePoint for axis scaling, and the selection.join method for incremental rendering of circles and axes. The plot renders as SVG with a 1-second animated transition, using the CDC General Health dataset fetched via CSV.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the CDC Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot of CDC Dataset describing Age (in Years) vs. Weight (in Pounds)

This D3.js scatterplot visualizes the relationship between age (in years) and weight (in pounds) using CDC health data. The plot encodes each individual as a circle, with x-coordinates representing age and y-coordinates representing weight, using linear scales for both axes. The visualization employs D3's `csv` loader to parse the remote dataset, `select` to manage the SVG container, and `scaleLinear` to map data values to screen coordinates. The code constructs the chart with `axisLeft` and `axisBottom`, and renders all data points as SVG circles.

RRidhima Saxena

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

82% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes a dataset of California census data, allowing users to choose which columns map to the X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear` and `scalePoint` for axes, with circles animated into place using `transition()` and `delay()`. The SVG rendering includes axis labels and grid ticks, with data loaded from a CSV file using `d3.csv`.

CCBoton

82% match

Loading thumbnail…

Scatterplot of CDC Dataset describing Age (in Years) vs. Weight (in Pounds) for Males and Females

This scatterplot visualizes the relationship between age (in years) and weight (in pounds) for males and females from a CDC dataset. Points are colored by gender using `scaleOrdinal` with a color legend, and all circles render with 30% opacity to reveal overlapping data. The visualization uses React with D3 v5 scales (`scaleLinear`) to map data to SVG coordinates, with custom axis components for the bottom and left sides. Axes, titles, and labels are added as SVG text elements, while hover tooltips provide precise values via native SVG `<title>` elements.

RRidhima Saxena

81% match

Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus let the viewer choose which quantitative column from the dataset maps to the x- and y-axes of a scatter plot. Initially, the chart displays weight against mpg, but selecting a different column updates the corresponding axis and re-renders the circles with a staggered 2-second transition using D3 v5’s `transition().duration()` and `delay()`. The code uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` in an SVG-based visualization.

AAziz Jaffrey

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

80% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between numeric measurements—including Length, Eye Diameter, and Jaw—across different countries. Two dropdown menus dynamically select which columns appear on the x- and y-axes, triggering a re-render of the visualization. Built with D3.js v5, it uses the library's `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, along with custom dropdown and scatter plot modules. Circles animate into position using `transition().duration(2000).delay()`, while axis labels update to reflect the chosen variables. Data comes from a local CSV file.

KKanishka33

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

80% match