ICE 7 Reusable D3 Scatter Plot

100%

ICE 7 Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jul 1, 2022

Created on Jul 1, 2022

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 - Reusable Scatter Plot

This example presents a reusable scatter plot of BMI data, visualizing relationships between Height, Weight, Index, and Age, with points colored by gender. Built with D3 v6, the visualization cycles through different x-axis variables on an interval, updating axes and labels dynamically. It uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with SVG circles for marks and a custom legend. Data loads from a CSV via `d3.csv`, and the chart is rendered through a reusable `scatterPlot` module.

SSaahithi49

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

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

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

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

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

81% match

Loading thumbnail…

Fork of ICE-6 Scatter Plot

This example presents a scatter plot of an insurance dataset, visualizing the relationship between patient height and age while encoding weight and income through non-standard circle radius properties (`rx` and `ry`), which distorts the marks into ellipses. The code colors each point by gender (red for female, green for male) and builds the SVG chart using D3 v5 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a GitHub-hosted CSV file, with axes labeled “Charges” and “bmi” despite the actual mapped fields being age and height.

TTekmal-Bhavana

81% match

Loading thumbnail…

ICE7- Reusable scatter plot

This animated scatter plot visualizes an insurance dataset, plotting age on the x-axis against BMI, charges, or children, which cycle every two seconds. Built with D3.js, the SVG chart uses distinct symbols and colors to differentiate smokers from non-smokers, with axes labeled dynamically as the y-axis metric changes.

Kkotlavamsireddy@gmail.com

80% match