A scatter plot comparing EU fertility rate with urban population %

100%

A scatter plot comparing EU fertility rate with urban population %

✓ Published1🌍 Public

Last edited Nov 12, 2022

Created on Nov 5, 2022

This scatter plot displays the relationship between EU countries’ fertility rates and their urban population percentages, with each circle labeled by country name. The visualization uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data from a CSV file supplied by the author via a GitHub gist. Circles are positioned using the scaled values, and country labels are placed with adjusted vertical offsets to reduce overlap. The chart is rendered as an SVG that fills the browser window, with salmon-colored text labels distinguishing them from the default circle marks.

AI-generated description

I created this scatter plot with d3 for the Episode 8 exercise with Vanilla JS.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of A scatter plot comparing EU fertility rate with urban population %

This scatter plot visualizes the relationship between EU countries' fertility rates and their urban population percentages, with each data point labeled by country name. The visualization uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map the CSV data—sourced from a GitHub gist—to SVG circles and text elements. The plot fills the entire browser window, with axes positioned at the chart’s margins and salmon-colored country labels offset for readability. Data parsing converts string values to numbers for accurate scaling and positioning.

HHieuVu179

96% match

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

86% match

Loading thumbnail…

Episode 8: A scatter plot

This scatter plot compares EU countries’ fertility rates against their urban population percentages, with each circle labeled by country name. It uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and scale the data from a GitHub-hosted CSV, then renders SVG circles and text labels. The axes and point positions are computed from the raw dataset’s numeric fields, and the chart fills the full browser window.

YYiorgos Bagakis

85% match

Loading thumbnail…

Reusable scatter plot with axis labels and tooltip

This reusable D3.js scatter plot visualizes the relationship between urban population percentage and fertility rate for EU countries in 2022, sourced from Worldometer population data. Written as a modular `scatterPlot()` function, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes with red labels, while circles display tooltips on hover via a styled HTML `div` that shows each country's name. The SVG output adapts to the full window size, and the code includes commented-out logic for animated cycling through data columns, though that feature is not active.

YYiorgos Bagakis

83% match

Loading thumbnail…

Reusable scatter plot with axis labels and tooltip

A scatter plot visualizes EU countries by urban population percentage and fertility rate, with hover tooltips displaying country names. The chart uses D3’s scaleLinear, extent, axisLeft, and axisBottom for axes and scaling, with circle elements bound to mapped data. Styled axis labels and a tooltip div are appended via D3 selections, while the data comes from a CSV of 2022 EU population statistics. The reusable scatterPlot function supports configurable dimensions, margins, and value accessors, with mouseover and mouseout events toggling tooltip opacity.

TToly

78% match

Loading thumbnail…

Reusable scatter plot with axis labels and tooltip - TN

A reusable scatter plot displays EU countries by urban population percentage and fertility rate, with axis labels and hover tooltips showing country names. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and a custom `scatterPlot` function with getter-setter methods for configurability. SVG circles render the data from a CSV of 2022 EU population statistics, while tooltips appear via D3 selection events.

TToly

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

74% match

Loading thumbnail…

Untitled

An interactive scatterplot maps World Health Organization data, plotting urban population growth against the percentage of the population living in urban areas. Each circle represents a country, with its fill color encoding the total fertility rate using a threshold scale and a blue color scheme; missing values appear pink. The visualization uses D3.js 5.15.0, including `d3.scaleThreshold`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, to render axes, legends, and circles as SVG with mouseover events.

Aaustin-so

73% match