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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot

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.

Bbassansackey@gmail.com
94% 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
92% 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
90% 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
87% 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
79% 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
78% 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
78% match
Loading thumbnail…

Scatter plot practice

This example displays a small scatter plot of four data points, mapping position on the x-axis and age on the y-axis. The visualization uses D3.js to create an SVG, computing linear scales with `scaleLinear` and drawing axes with `axisLeft` and `axisBottom`. The circles are red, and the chart resizes to fit the browser window. The data is hardcoded in the script, and the plot is rendered as an interactive SVG within the page.

GGbemiga Atolagbe
78% match