Skip to main content
SimilarExport ZIP
100%

Fork of Scatterplot

✓ Published0🌍 Public
Ssivaparchuri2000@gmail.com
Last edited Mar 25, 2025
Created on Mar 25, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of sleep duration against age, with each circle representing a person’s data point. The visualization uses D3.js v6 to load a CSV dataset, apply linear scales, and render axes with labels. Circles are drawn with an SVG selection join, while the chart is built as a reusable function with configurable properties for width, height, data, margins, and radius. The plot is sized to fill the browser window and updates its dimensions accordingly.

Bbhargavinalamothu@gmail.com
80% 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…

Fork of Basic Scatter Plot with React & D3 with Diabetes Data

A scatter plot visualizes the relationship between Glucose and Insulin levels in a diabetes dataset, with each circle representing a patient. The React app loads the CSV data and passes it to the D3 visualization module. D3's `scaleLinear` and `extent` functions calculate the axis domains, while the `join` operator binds data points to SVG circles, setting their positions, radius, and fill color.

Rrpkupfer@wpi.edu
78% match
Loading thumbnail…

Fork of HTML Starter

This visualization uses a scatterplot to show cancer mortality trends in the USA from 1990 to 2019, with each circle representing a specific cancer type’s annual death count. It displays data from a CSV file loaded via D3’s `csv` function, with time-scaled x-axis and linear y-axis. React manages the component state and lifecycle, while D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` render the axes. Hovering over a circle triggers a tooltip with details, and a color-coded legend identifies each cancer type.

NNandini Maddula
78% match