Skip to main content
SimilarExport ZIP
100%

Height vs. Weight Scatterplot

✓ Published0🌍 Public
VVenkat-Sumith-Thota
Last edited Jul 21, 2023
Created on Jul 20, 2023
Forked from Hello VizHub

This scatterplot visualizes the relationship between height (in centimeters) and weight (in kilograms) for six individuals. It uses D3.js v6 to render an SVG chart with a linear scale for each axis, including axis labels. The data is embedded as a CSV string and parsed with `d3.csvParse`. Circles are positioned using `d3.scaleLinear` and appended via `selectAll().data().enter().append()`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Weigh/Height Comparison on Gender

This scatter plot compares height and weight across genders, with each circle representing an individual and color-coded by gender. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map data from a CSV file onto an SVG canvas. Points are rendered as semi-transparent red circles, with axes labeled “Height” and “Weight” and a title “Height/Weight.” The code loads data from VizHub, parses numeric fields, and applies margins and tick formatting to create a clean, readable chart.

Cceltic660
82% match
Loading thumbnail…

D3 Scatter Plot H/W finalised

This scatter plot visualizes the relationship between height and weight for individuals ranging from newborns to over 20 years old, using a self-generated dataset stored as a CSV on GitHub. The SVG rendering uses D3 v6’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to map the data points, with each circle representing a single observation. Hovering over a point transitions its fill to orange, while the axes include labeled weight and height scales. The chart is styled with the Share Tech font and positioned using absolute CSS elements.

CChawin Sungwalngern
81% match
Loading thumbnail…

activity6task3q1

This scatter plot visualizes the relationships between height and weight in a small dataset, with points colored blue for males and pink for females. The visualization uses D3 v6 and renders as an SVG, loading data from a CSV file. It uses `scaleLinear` for both axes, `extent` to calculate domains, and `axisLeft` and `axisBottom` to draw the axes. The plot is displayed full-screen, with circles positioned according to the scaled data values.

Ssudheervnarasimha1@gmail.com
81% match
Loading thumbnail…

Weigh/Height Comparison on Gender

This scatter plot visualizes the relationship between height and weight across genders using a dataset from UCI Machine Learning Repository. The visualization displays individual data points as semi-transparent red circles, with height mapped to the x-axis and weight to the y-axis using D3 v5’s `scaleLinear` functions. The code employs D3’s `csv` loader to fetch external data, `axisBottom` and `axisLeft` for tick marks, and SVG circle elements for rendering. Axes labels and a title are added to clarify the quantitative comparisons shown.

Cceltic660
81% match
Loading thumbnail…

Weigh/Height Comparison on Gender

This scatter plot compares weight and height across genders, with each red circle representing an individual’s measurements. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes and gridlines, while `csv` loads the gender weight and height dataset from VizHub. The SVG rendering emphasizes correlation patterns, though gender differentiation is not visualized despite the title. Data preprocessing converts string values to numbers via unary plus operations before plotting.

Cceltic660
80% match
Loading thumbnail…

Weigh/Height Comparison on Gender

This scatter plot compares weight and height across genders, with each red circle representing an individual’s measurements. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes and gridlines, while `csv` loads the gender weight and height dataset from VizHub. The SVG rendering emphasizes correlation patterns, though gender differentiation is not visualized despite the title. Data preprocessing converts string values to numbers via unary plus operations before plotting.

Cceltic660
80% match
Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the relationship between height and weight for individuals, colored by gender. It displays data points as circles with a tooltip showing exact values on mouseover, along with labeled axes and a color-coded legend. The visualization loads data from a CSV file via `d3.csv` and renders with SVG. It uses D3's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to map data to coordinates, axes, and categorical colors for male and female observations.

AAreeba Hassan
79% 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
79% match