reusable scatter plot

100%

reusable scatter plot

✓ Published0🌍 Public

Last edited Apr 2, 2025

Created on Apr 2, 2025

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.

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

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

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

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

83% match

Loading thumbnail…

Reusable scatter plot

This reusable D3 scatter plot visualizes the insurance dataset, mapping age on the x-axis and cycling through BMI, charges, and children values on the y-axis every two seconds. It uses SVG rendering with animated transitions to swap the y-axis label and rescale the data points. The plot differentiates data points by smoker status using distinct symbols and colors from D3's `schemeCategory10` scale, and is built with reusable accessors for width, height, data, and margins.

Kkotlavamsireddy@gmail.com

82% match

Loading thumbnail…

Reusable Scatter plot aSSIGNMENT

This interactive scatter plot visualizes healthcare data, plotting patient age against cholesterol levels with gender-based color coding (blue for male, pink for female). The visualization includes labeled axes, a title, and a legend, with a periodic redraw every five seconds. Built with D3.js, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` function, rendering SVG elements. Data is loaded asynchronously via `csv` from a GitHub-hosted healthcare dataset, demonstrating a modular approach to creating configurable chart components.

Vvineelaramulapalli32

77% match

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot component displays categorical data points across two quantitative axes, with color encoding by category and optional tooltips for interactivity. Built with D3 v6, it renders SVG circles, axes, and labels while supporting configurable margins, scales, and color schemes. The component uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is processed through customizable accessor functions, and the chart animates via D3 transitions when updated.

Bbassansackey@gmail.com

77% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes cancer mortality trends in the USA, cycling through liver, breast, and prostate cancer datasets. Built with D3 v6 as a reusable chart, it animates between cancer types every 3 seconds, updating the y-axis and point symbols (star, square, circle) accordingly. The chart leverages SVG rendering and custom symbol mappings to distinguish cancer types, with axes and margins configured for readability.

Bbhavana.bayyapu@gmail.com

77% match