Reusable scatter plot with axis labels and tooltip

100%

Reusable scatter plot with axis labels and tooltip - TN

✓ Published0🌍 Public

Last edited Dec 30, 2022

Created on Dec 30, 2022

Forked from Reusable scatter plot with axis labels and tooltip

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.

AI-generated description

Reusable scatter plot with axis labels and tooltip inspired by Towards Reusable Charts.

Shows the Countries in the EU by population (2022) table of data.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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

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

78% match

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot displays population versus area for geographic data, with points colored by continent. The visualization uses D3.js v7 to load data via `d3.tsv`, applying a custom chart module that defines scales, axes, and tooltips. It renders circles positioned with `scaleLinear` and colored via `scaleOrdinal`, while interactive mouseover events trigger tooltips showing the point's label and values.

AAnurup Reddy

77% match

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

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

77% match

Loading thumbnail…

ScatterPlot

A scatter plot displays population totals for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The chart uses D3 v5, loading data from a CSV file and rendering to SVG. It applies `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, with formatted tick labels that convert billions to abbreviated notation and grid lines via tick sizes.

KKyllVis

75% match

Loading thumbnail…

Scatter plot

This scatter plot shows population counts for several countries, with each country positioned along the y-axis and its population scaled along the x-axis. The visualization uses D3 v5 within a React framework, rendering to SVG. It employs `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for labeled gridlines. A custom tick formatter abbreviates large numbers, and circles are appended with a fixed radius of 10.

VVPTomi

75% match