Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
RRidhima Saxena
Last edited Dec 8, 2021
Created on Oct 26, 2021

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.

AI-generated description

This visualization is a scatterplot of age vs. weight distinguised by gender from the CDC Dataset.

Based on the last iteration that I forked (https://vizhub.com/ridhimasaxena/ce31146b95a5497d96ec57e0670ff732), this iteration made the following changes:

  1. Reorganized the code into several files by adding AxisBottom.js, AxisLeft.js, bundle.js, index.js, Marks.js, and useData.js
  2. Added axes titles and a Title to the Graph to the visualization
  3. Added opacity/transparency to the plot
  4. Added color to the scatterplot and a color legend
  5. Introduced react to better construct the plot
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
92% match
Loading thumbnail…

Weight/Weight Desired for Males and Females

This scatterplot shows the relationship between age and weight-to-desired-weight ratio for males and females, using semi-transparent circles colored by gender. The visualization loads CDC health data via `d3.csv` and renders it as an SVG with React components. Axes are built with custom `AxisBottom` and `AxisLeft` components using `d3.scaleLinear`, while a `d3.scaleOrdinal` color scale differentiates genders. A `ColorLegend` component displays the categorical color mapping, and each circle includes a native SVG `<title>` element for hover tooltips.

RRidhima Saxena
91% match
Loading thumbnail…

Scatterplot of Body Mass Index for Males and Females

This scatterplot displays the relationship between age and body mass index (BMI) for males and females, using data from a CDC dataset. Each point is colored by gender via a d3.scaleOrdinal, with BMI computed from weight and height. The visualization is built with React and d3.v5, rendering SVG circles, axes, and a color legend. Axes and marks are generated using scaleLinear and custom React components, with loading states handled asynchronously.

RRidhima Saxena
85% match
Loading thumbnail…

Scatter Plot of CDC Data with Menus

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.

RRidhima Saxena
81% match
Loading thumbnail…

Line Plot of BMI vs Age

This visualization displays the relationship between age and weight from the CDC GenlHealth dataset, with each data point represented as a circle on a scatterplot. The axes are scaled linearly using `scaleLinear`, with extents calculated via `d3.extent`. Circles are appended to an SVG canvas using `selectAll` and `.join()`, with left and bottom axes generated through `axisLeft` and `axisBottom` functions. The chart fills the browser window, using the full viewport dimensions for width and height. Data loading is handled asynchronously through the `csv` function with a custom row parser that converts string values to numeric types.

RRidhima Saxena
79% match
Loading thumbnail…

BMI by Age

A scatterplot of Body Mass Index by gender from the CDC Dataset, plotted against age. The chart uses circle glyphs to represent individuals, with color encoding gender, and displays data points across the age axis. The implementation relies on D3 v7 for data parsing, aggregation, and SVG rendering. It computes average sepal length per species using `flatRollup` and `sum` from d3, though the visualization itself focuses on BMI distribution. The data is loaded asynchronously via `fetch`, parsed with `csvParse`, and rendered within an SVG container.

MManideeprenikindi
78% match
Loading thumbnail…

General Health vs Weight

This bar chart visualizes the relationship between general health ratings and weight using CDC survey data, with bars colored by gender. The visualization uses React to render SVG elements and D3 scales (scaleBand for health categories, scaleLinear for weight) to position marks. ColorLegend communicates gender encoding, while AxisBottom and AxisLeft components display tick marks. The chart highlights how weight distributions vary across self-reported health levels, with bars extending horizontally from zero to represent weight values for each health category.

RRidhima Saxena
78% match
Loading thumbnail…

my scatter plot

This scatter plot visualizes the relationship between weight and height for 500 individuals, with points colored by gender (orange for female, teal for male) based on data from a Kaggle CSV file. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to map the quantitative axes, rendering SVG circles with a radius of 5 pixels. Axis grid lines and text labels are styled via CSS, while the chart displays “PESO (g)” on the x-axis and “ALTURA (cm)” on the y-axis.

JJefferson Abreu
78% match