Fork of Fork of Fork of Reusable D3 Scatter Plot

100%

Fork of Fork of Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

Forked from Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between BMI and life expectancy across countries in 2021, with each circle representing a country. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. Interactive hover effects trigger a tooltip that shows the country name, BMI, and life expectancy values. The chart is rendered as an SVG with animated transitions on circle hover, changing the fill color from steelblue to orange.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot uses D3.js to visualize global population data, cycling through life expectancy, GDP per capita, population, and year on the x-axis every two seconds. The plot leverages `scaleLinear` for axes, animated circles with `attr`, and dynamic re-rendering via the `scatterPlot` component, which updates scales and axes through `svg.call()` as the x-value changes.

Ppavan vasamsetti

82% match

Loading thumbnail…

fork country

This interactive scatterplot explores global health indicators across countries, plotting health expenditure against life expectancy with each point colored by continent. Users select which attribute appears on each axis via dropdown menus, and hovering over the color legend highlights points from that continent while fading others. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding, and renders all marks as SVG circles with opacity transitions. Data is loaded as CSV from a GitHub gist.

Rrushithareddyy

81% match

Loading thumbnail…

Scatter Plot of World Life Expectancy Data based on BMI

This scatter plot visualizes the relationship between average BMI and life expectancy across 15 years of WHO data, with each point representing a country. Continent membership is encoded through color, while point size and tooltips also convey BMI information and country names. Built using the Vega-Lite API with a thin wrapper around d3.v5, the visualization loads CSV data from a gist URL and renders as an SVG, configured with custom axis styling and a dark color palette for improved readability.

Aaishwarya8615

81% match

Loading thumbnail…

Fork of Goals Scatter Plot with Hover

This scatter plot visualizes heart health data from a CSV source, plotting BMI against age categories with circles colored by sex. Built using D3.js, the visualization fetches data via d3-fetch's `csv` function and renders responsive axes with the `@curran/responsive-axes` library. Each circle includes a tooltip via `append('title')` that displays BMI and age values on hover, while mouseover transitions enlarge the circle radius using `select(this).transition().attr('r')`. The plot uses a linear scale for both axes and a gray background rectangle to highlight the data area.

Sshreyasribearelly@gmail.com

81% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Scatterplot for peng bird dataset

This interactive chart displays changes in life expectancy over time for a selected country, alongside the global average trend. A dropdown menu lets users choose a country, triggering a new SVG line chart with axes and a legend. The visualization uses D3.js v6 to load CSV data, compute yearly averages, and render paths via `d3.line` and scales. It is built with React and renders using SVG, with data sourced from a GitHub-hosted CSV.

Cc_peimann@coloradocollege.edu

81% match

Loading thumbnail…

Fork of Fork of Fork of Scatterplot for world dataset

This scatterplot visualizes the relationship between birth rate and calling code for countries in a 2023 world dataset, with each point’s radius encoding infant mortality. Built with React and animated via D3 v6 transitions, it uses SVG circles with hover interactions that display country names in a tooltip and enlarge stroke width. The code employs `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `.join('circle')` to render the visualization, pulling CSV data from a GitHub raw source.

QQuinn Sebso

80% match

Loading thumbnail…

Fork of Fork of Sruj 2

This animated scatter plot shows the relationship between GDP per capita and life expectancy for 156 countries, with each dot colored by region and sized by population. The visualization uses D3.js version 7.8.5 to render an SVG chart with smooth hover transitions, axis labels, grid lines, and a tooltip that displays country details. The chart is presented on a gradient background with a clean white card container, emphasizing the global health and economics dataset.

Ssrujana reddy

80% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

Ssrivalliwuyyuru

80% match