D3 Scatter Plot H/W finalised

100%

D3 Scatter Plot H/W finalised

✓ Published0🌍 Public

Last edited Dec 28, 2022

Created on Dec 27, 2022

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.

AI-generated description

This scatter plots show relationship between Height and weight of newborn from less than 1 year old to over 20 years old . The data comes from use github (Self generated dataset) [dataForclass-HW/dataset_aging.csv(https://raw.githubusercontent.com/chawinkk/dataForclass-HW/main/dataset_aging.csv).

The Data is twisked by excel and import to JS file as urlCSV dataset from Github. The scatter plots of 20 points were created based coresponsed to weight and height with D3 and CSS

MIT Licensed

Similar vizzes

Loading thumbnail…

SCATTER PLOT 2

This scatter plot visualizes the relationship between height and weight, with each point colored steelblue and displaying BMI details on hover via a tooltip. Built with D3.js v7, it uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to map the quantitative axes, with circles representing data points. The SVG rendering includes axis titles and a 24px plot title, while interactive mouseover events update a positioned tooltip div. The reusable `createScatterPlot` function demonstrates a modular approach to chart construction.

CChaturyaAkhilaPallem@my.unt.edu

82% match

Loading thumbnail…

Height vs. Weight Scatterplot

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`.

VVenkat-Sumith-Thota

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

81% match

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

80% match

Loading thumbnail…

Reusable D3 Scatter Plot jahn

This animated scatter plot explores the relationships between physical attributes—weight, age, body fat, and height—using a dataset of individuals. It visualizes the data points as colored circles, where orange represents males, blue represents females, and black marks unspecified genders. The chart cycles through different variables on the x-axis at set intervals, while the y-axis remains constant, allowing viewers to see how the distribution shifts across various dimensions. Built with D3, the visualization leverages `csv` for data loading, `scaleLinear` for axes, and the custom `scatterPlot` module to render the SVG and manage the animation.

Ssaijahnaviappineni

80% match

Loading thumbnail…

ice 7 a

This interactive scatter plot visualizes the relationship between height and weight for individuals, with each dot colored by name and tooltips revealing age and gender on hover. It uses D3.js v7 (d3.scaleOrdinal, d3.axisBottom, d3.axisLeft) to render an SVG chart with a separate legend and animated tooltip transitions, pulling data from a CSV file loaded via d3.csv. The visualization includes labeled axes and a categorical color scheme to distinguish data points.

RRakesh Kumar Chekuri

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

79% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes a weight-and-height dataset for males and females, with each circle colored by gender. An animation cycles the x-axis between the Weight and Height columns every five seconds using `setInterval`. The plot is generated in SVG using D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` module, which leverages `join` for efficient element updates.

Ssaijahnaviappineni

79% match