Scatter Plot

100%

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

This scatter plot visualizes the relationship between weight loss and number of days across genders, with an animated axis cycling through three data dimensions every two seconds. Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `circle` elements update via data joins. The chart sources CSV data from a GitHub gist and animates through Gender, Weightloss, and Numberofdays columns using `setInterval`. SVG rendering with CSS styling provides a clean, interactive presentation.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot animates through the Iris Dataset, cycling the x-axis between Height, Weight, and Age while the y-axis remains Age. Data points are colored by Gender, with circles rendered in SVG and updated every two seconds. The visualization is built using D3 v6, leveraging reusable chart patterns with scaleLinear, axisLeft, axisBottom, and join logic. A legend and axis labels are dynamically appended, and the code demonstrates modular chart composition through the `scatterPlot` factory function.

Ssaijahnaviappineni

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

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

79% match

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the relationship between height and weight, with each point colored by gender (male, female, or no gender). Built as a reusable D3 chart component, it alternately animates the x-axis between the two variables every five seconds. The visualization uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` APIs to render axes and circles over an SVG canvas. Data is loaded from a CSV of gender, height, and weight records.

Ssaijahnaviappineni

78% match

Loading thumbnail…

BONUS ICE SCATTER PLOT

This 3D scatter plot visualizes the relationship between age, height, and weight, using gender to color the markers. The visualization loads CSV data via the `d3.csv` function and renders a single marker trace with Plotly's `scatter3d` type. The code explicitly names the axes as Height, Weight, and Body Fat, with the marker color set to a uniform pink. The chart is generated using Plotly's `newPlot` method, which draws the interactive plot inside a designated HTML division.

Vviswak12

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

78% match