Skip to main content
SimilarExport ZIP
100%

Scatterplot

✓ Published2🌍 Public
Bbassansackey@gmail.com
Last edited Mar 25, 2025
Created on Mar 25, 2025
Forked from Bar Chart

This scatterplot displays the relationship between age and lung capacity, with each dot representing an individual and color-coded by disease type. Hovering over a dot reveals a tooltip with age, lung capacity, and disease information. The visualization uses D3.js v5 scales, axes, and event handlers within a React component, loading CSV data from a GitHub gist. React manages the component state while D3 handles the SVG rendering and interactive tooltip behavior.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ScatterPlot

A scatter plot displays the relationship between age and lung capacity, with each black dot representing an individual’s values and a tooltip revealing their disease type and hospital visits on hover. The data is loaded from a CSV file via `d3.csv` and rendered as an SVG using React. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` maps the data domains to pixel ranges.

Bbassansackey@gmail.com
94% match
Loading thumbnail…

Fork of Scatterplot

This example visualizes the relationship between lung capacity and age, with each dot representing an individual and a hover tooltip revealing their disease type. Built with React and D3 v5, the scatterplot uses `scaleLinear` and `extent` to map the CSV data onto axes labeled "Age (years)" and "Lung Capacity." The code renders SVG elements via `React.createElement`, applies axes with `axisLeft` and `axisBottom`, and implements interactive tooltips using D3's `select` on mouse events.

Ssivaparchuri2000@gmail.com
91% match
Loading thumbnail…

Fork of ScatterPlot

This scatter plot shows the relationship between a patient's age and their lung capacity, with each point colored or positioned to reveal patterns across the dataset. It loads CSV data from a GitHub gist, parses it with `d3.csv`, and maps the `Age` and `LungCapacity` fields to x and y axes using `d3.scaleLinear` and `d3.extent`. The React-based component, built with React's `useState` and `useEffect`, calls `d3.axisBottom` and `d3.axisLeft` to render axes and includes an interactive tooltip via `d3.select` that displays the patient's age, lung capacity, and disease type on mouseover.

Bbassansackey@gmail.com
89% match
Loading thumbnail…

reusable scatter plot

A reusable D3 scatter plot visualizes lung disease data, mapping age on the x-axis against lung capacity on the y-axis while coloring each point by smoking status. The chart is built as a customizable function, `scatterPlot()`, using D3 v6 scales (`scaleLinear`, `scaleOrdinal`) and axes to render the plot. A hover tooltip displays exact values for age, lung capacity, and smoking status. The rendering animates point appearance and uses `d3.schemeCategory10` for color assignment, with data bound directly to circles.

Bbassansackey@gmail.com
85% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot uses a responsive React component and D3 scales to map age against income from a CSV dataset. The visualization employs D3’s `scaleLinear` and `extent` functions to compute domains, with custom `AxisBottom` and `AxisLeft` components rendering SVG tick marks and labels. Each data point is an SVG circle with a `title` tooltip showing formatted values via D3’s `format`. The chart features rotated axis labels, a Poppins font, and a clean color palette, with styling applied through CSS classes.

SSamir Nandardhane
76% match
Loading thumbnail…

Scatter Plot with Menus on Medical Cost Personal Dataset

This interactive scatter plot explores the Medical Cost Personal Dataset, showing relationships between patient attributes like age, BMI, and children. Users select which attribute maps to the x- and y-axes via two ReactDropdown menus, with smoker status encoded by the color of each circle. Built with React and D3 v5, the visualization uses scaleLinear for axes, scaleOrdinal for colors, and custom SVG components for axis ticks and marks, loading data via d3.csv.

Llynz09
76% match
Loading thumbnail…

Streudiagramm Covidfälle Altersgruppe

A scatterplot visualizes cumulative COVID-19 case counts, daily case differences, and cumulative incidences across age groups. Users select the x- and y-axis metrics through dropdown menus, with points colored by age group via a legend. The React app loads CSV data from a GitHub gist, using d3.scaleLinear and scaleOrdinal for axes and color mapping, rendered as SVG circles with tooltips showing exact values.

CChrisHeinirch
76% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between age and insurance charges using data loaded from a CSV file. D3.js v7 scales map age and charge values to SVG circle positions, with axes labeled and a title displayed. The visualization uses d3.csv to fetch external data, d3.scaleLinear for both x and y domains, and d3.axisBottom and d3.axisLeft to render the axes. The SVG rendering approach draws each data point as a small blue circle.

PPranay Matalia
75% match