Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
HHieuVu179
Last edited Jan 3, 2023
Created on Jan 3, 2023

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

A scatter plot comparing EU fertility rate with urban population %

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.

YYiorgos Bagakis
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
84% 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
83% 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
81% 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…

Infant Mortality Rate | Week 5

Scatterplot of 2012 infant mortality rates against 1960 rates for 27 EU and EFTA countries. Each circle represents a country, with hover tooltips showing both values, and the visualization animates the points growing from a radius of 0.1 to 4 in sorted order. Built with d3.v3, the SVG chart uses d3.csv to load the PORDATA-sourced dataset, with linear scales for both axes and transitions with staggered delays.

CCatLeal
73% match