Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 4, 2024

Created on Apr 4, 2024

This scatter plot visualizes the relationship between height and weight for individuals in a demographic dataset, with points colored by gender (blue for male, pink for female). The visualization uses D3 v6 to load CSV data from a GitHub repository, then renders circles on an SVG canvas. D3's `scaleLinear` and `extent` functions map the raw measurements to pixel coordinates, while `axisLeft` and `axisBottom` create labeled axes for weight and height. The chart fills the browser window and includes custom axis label styling.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

83% match

Loading thumbnail…

Fork of pavan ice6.2

This example displays a scatter plot of BMI data, plotting each individual’s weight against their height. The visualization uses red and yellow circles to differentiate between male and female data points, with labeled axes for both dimensions. The code loads CSV data from a GitHub gist using `d3.csv`, maps the parsed height and weight values through `d3.scaleLinear` and `d3.extent`, and renders circles as SVG elements. It leverages D3 v6’s `select`, `axisLeft`, and `axisBottom` APIs to generate the chart, with a fixed radius for each point and axis tick labels styled at 24 pixels.

Ppavan vasamsetti

83% match

Loading thumbnail…

Fork of Activity6_Question 3

This scatter plot visualizes the relationship between weight and height, with points colored by category (blue for A, red for B, orange for other). It uses D3 v7's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load, scale, and render the data as SVG circles. The chart fills the entire browser window, and the data comes from an external CSV file hosted on GitHub. Axis labels are styled with monospace fonts, and the title appears in red.

Kkondaveeti.bhargavi7780@gmail.com

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

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

82% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot maps fruit dimensions, plotting width on the x-axis and height on the y-axis, with each point’s shape encoding the fruit type via a categorical legend. The visualization uses D3.js v7, employing `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to assign shapes, and `symbol()` to generate the marks. Data is loaded from a remote CSV file containing fruit measurements, fetched asynchronously and parsed with `csvParse`. Axes and labels are drawn using `axisLeft` and `axisBottom`, while the legend is constructed manually with positioned shape glyphs.

Ssahithya.voleti@gmail.com

82% match