Skip to main content
SimilarExport ZIP
100%

ICE-7 - Reusable Scatter Plot

✓ Published0🌍 Public
SSaahithi49
Last edited Jul 3, 2022
Created on Jul 1, 2022
Forked from Hello VizHub

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.

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…

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
91% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the relationship between age and BMI using an insurance dataset, with each point colored by species. The visualization uses D3 v6 with SVG rendering, loading data from a GitHub gist via `d3.csv` and parsing numeric values. Axes are generated with `axisLeft` and `axisBottom`, while `scaleLinear` maps data domains to pixel ranges. Circle marks are drawn using `selectAll` and `join`, with axis labels styled via SVG text elements in a React-friendly HTML page.

SSrujana390
86% 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
85% 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
84% 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
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…

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
82% match
Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com
82% match