Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Nnithinreddypinikesi@my.unt.edu

Last edited Mar 7, 2026

Created on Mar 7, 2026

This scatter plot visualizes the relationship between population in 2025 and GDP per capita for various countries. Each circle represents a country, with its horizontal position determined by population and vertical position by GDP per capita. The visualization uses D3 v7 to load CSV data from a GitHub gist, applies linear scales for both axes, and renders SVG circles with axis labels and a legend. The code demonstrates `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for data binding and chart construction.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plot

This scatter plot visualizes the relationship between population and GDP per capita for countries in 2025, using logarithmic scales on both axes. The code loads CSV data with d3.csv, applies jitter to each circle’s position to reduce overplotting, and renders the chart as an SVG. It uses d3.axisBottom and d3.axisLeft, with scaling via d3.scaleLog, and includes title, axis labels, and a legend.

Nnithinreddypinikesi@my.unt.edu

86% match

Loading thumbnail…

Fork of HTML Starter

This scatterplot, built with D3 v7, visualizes the relationship between GDP per capita and CO2 emissions per capita for countries over multiple years. Each point represents a country, colored by region and positioned by its economic and environmental metrics across a time series. The visualization includes axes, a legend, and a delayed tooltip that appears after a 2000ms hover, displaying additional country details. Data is loaded from a remote CSV file using `d3.csv`.

Llokeshpraveen01@gmail.com

85% match

Loading thumbnail…

Fork of 6th visualisation 1

This scatter plot visualizes the relationship between population and GDP across countries, with each point colored by region and interactive tooltips showing country details. It uses D3 v7 to load CSV data from a GitHub repository, then renders an SVG chart with linear scales for both axes and an ordinal color scale based on region_id. The code employs d3.csv, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, and d3.axisLeft to construct axes, circles, and a categorical legend, all within a responsive layout.

Cchintamanenithp@gmail.com

83% match

Loading thumbnail…

Fork of HTML Starter

A horizontal bar chart displays population figures for ten countries in the year 2000, using yellow bars with green tick labels on a red axis grid. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles through reusable components. Axis formatting uses `d3.format` to abbreviate large numbers, and tooltips appear via SVG `<title>` elements.

Ssahithya.voleti@gmail.com

82% match

Loading thumbnail…

New Scatter Plot

This scatter plot visualizes worldwide GDP versus population for 1980, with each circle representing a country and tooltips revealing GDP per capita. The code loads CSV data from a GitHub gist using D3 v7’s `csv` loader, then renders an SVG with `scaleLinear`, `axisLeft`, and `axisBottom`. Axis ticks are formatted via a custom `numMaker` utility that converts large numbers into abbreviated units (e.g., “B” for billions). Circle tooltips use D3’s `title` element, driven by React-free DOM selection and data joins.

Aadventuresenglish.info@gmail.com

82% match

Loading thumbnail…

Fork of HTML Starter

This D3.js v7 example visualizes country population and area data from a GitHub-hosted CSV file. It shows a bar chart of populations with value labels, alongside a data summary and a data table. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the SVG chart, plus `d3.format` for number formatting. The visualization also provides a computed summary of total population and the largest country by area.

Nnabeel.ahmed2003.na@gmail.com

81% match

Loading thumbnail…

HTML Starter

A bar-less scatterplot of the 10 most populous countries uses circles scaled by population on the x-axis and categorical country names on the y-axis. It renders with D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` within an SVG. Data comes from a local `data.csv` file, parsed via `csv`. Axis grids use tick lines, and the chart includes a title and formatted population labels using `format('.3s')`.

DDanzeOnn

81% match

Loading thumbnail…

6th visualisation 1

A responsive scatter plot visualizes the relationship between population and GDP across countries, coloring each point by region and providing hover tooltips with country details. It uses d3.csv to load an external dataset, then d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and a d3.scaleOrdinal with d3.schemeCategory10 for regional colors. The SVG output includes labeled axes, a title, and a legend, with all elements rendered via standard D3 data joins.

Vvenkatabhaskaratetali@my.unt.edu

81% match