multi

100%

✓ Published0🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

This layered scatterplot visualizes the relationship between fertility, life expectancy, and population for different clusters by country and year. The visualization uses two overlaid circle layers rendered with Vega-Lite and embedded via `vegaEmbed`. A base layer displays hollow gray circles of varying sizes to show a population size legend, while a main layer encodes cluster membership through the stroke color of additional hollow circles. The chart reads from an external `data.json` file loaded using `d3.json`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Countries Scatter plot

A scatter plot displays the relationship between fertility rate and urban population for 50 countries, with each circle representing a nation. The chart uses D3.js to create a linear x-scale for fertility rate and a reversed linear y-scale for urban population percentage. Grid lines extend from both axes, and axis labels clarify the variables. Data comes from a CSV file parsed with `d3.csv`, while the visualization is rendered as an SVG with circles styled in semi-transparent purple.

Aarieltonglet

73% match

Loading thumbnail…

population dataset

This interactive scatter plot visualizes population data across multiple dimensions, cycling through life expectancy, GDP per capita, population, and year as the x-axis every two seconds. Each circle represents a country, positioned by its selected x-value and GDP per capita on the y-axis. Built with D3 version 6.7.0, it uses d3.csv for loading, scaleLinear for axes, and axisLeft/axisBottom for rendering. The animation updates via setInterval, re-invoking the custom scatterPlot module to redraw circles and axes.

Ppavan vasamsetti

72% match

Loading thumbnail…

Scatter Plot w/ Vega Lite API : Country, Religion, Population

This scatter plot visualizes the relationship between countries, religions, and population sizes. Each circle represents a country, positioned by its name and dominant religion, with the circle’s area encoding population magnitude. The visualization leverages the Vega Lite API, registered with Vega and Vega-Lite, to render the chart, while D3.js handles CSV data loading from a remote gist. A tooltip displays each country’s population on hover.

Hhunsingeruk@gmail.com

72% match

Loading thumbnail…

Gapminder Population Growth in Vega-lite

This example visualizes Gapminder population growth data by plotting each country as a circle on a scatterplot, with the year on the x-axis, total population on the y-axis, and circle size and color encoding population magnitude and country identity. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite, and loads the CSV data via d3.csv. It applies a custom configuration for axis styling and uses a tooltip handler to display country names on interaction.

Llakalia@wpi.edu

71% match

Loading thumbnail…

fresh block

This scatterplot visualizes Gapminder data from 1970, plotting fertility against life expectancy for various countries. Each circle’s size encodes population, while its color distinguishes geographic regions. The visualization uses d3.csv to load the data, d3.scaleLinear for the axes, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with schemeCategory10 for region colors. SVG elements are drawn via d3 selections, with axes generated using d3.axisBottom and d3.axisLeft, and a legend included.

AAitorCCE

71% match

Loading thumbnail…

Ejercicio 6 - v2

This visualization displays the relationship between fertility rate and life expectancy across countries for the year 1983. Each circle represents a country, with its position determined by these two variables and its size scaled to population. The chart uses color to differentiate world regions, and includes a legend and labeled axes with gridlines. Built with D3 v5, it loads data from a CSV file, employs scales such as `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, and renders the result as SVG circles.

MMiguelho

71% match

Loading thumbnail…

Fork of Fork of Circles with D3

This scatter plot displays the relationship between population density and median age for various countries. Circles are colored steelblue and turn orange on hover, with a tooltip revealing the country name and both values. Built with D3.js, the visualization loads data from `mergedata.json` and uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circle elements with mouse event handlers to control tooltip opacity.

MMonish Galla

71% match

Loading thumbnail…

Multing Data for Multiple Lines

This visualization shows population trends over time for multiple world regions, with each line color-coded and sorted by its final population value. The chart includes axes with gridlines, a legend generated by a custom `colorLegend` function, and smoothed lines using `curveBasis`. Data is processed by melting wide-format CSV rows from UN population estimates into tidy long-form data, then nested by region with `d3.nest`. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.line`, rendering to SVG with D3 v5.

Mmisferswift

71% match