Skip to main content
SimilarExport ZIP
100%

Episode 8: A scatter plot

✓ Published1🌍 Public
YYiorgos Bagakis
Last edited Nov 9, 2022
Created on Oct 30, 2022
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

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
85% match
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
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
82% 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
78% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of eight countries, with each circle positioned along a horizontal axis scaled by population and a vertical axis listing country names. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles and labeled axes. Data from a CSV file is parsed, with population values multiplied by 1000, and formatted using a custom tick formatter that converts abbreviations to billions. The chart includes gridlines, axis labels, and a title, all styled via external CSS.

BBKirst3
77% 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
77% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of nine countries from a CSV file, with country names on the y-axis and population on the x-axis. Built with D3 v5, it loads the data via `d3.csv` and uses `scaleLinear` and `scalePoint` to map values to SVG coordinates. The chart includes axes from `axisLeft` and `axisBottom`, grid lines, and a title, while circles are rendered with a fixed radius of 18 pixels. The styling is applied through external CSS, and the visualization updates dynamically after parsing the data.

SSophia Murage
75% match