Basic Scatter Plot

100%

Basic Scatter Plot

✓ Published0🌍 Public

Last edited Sep 23, 2017

Created on Sep 23, 2017

This scatter plot shows the relationship between GDP per capita and year for seven selected countries—China, the United States, India, Japan, Russia, Brazil, and France—between 1990 and 2014. Each circle represents a country-year observation, colored by country, with axis labels and a color legend. The visualization uses D3 v4’s scaleLinear, axisBottom, axisLeft, and legendColor APIs, rendering SVG circles. Data comes from Our World in Data, filtered from a CSV file containing internet usage, GDP, and population metrics.

AI-generated description

Built with blockbuilder.org

The figure represents the GDP per capita by country from 1990 to 2014

The dataset is from <a href=''>Our World in Data</a>

This visualization was forked from <a href='https://bl.ocks.org/curran'>Curran Kelleher</a>'s block: <a href='https://bl.ocks.org/curran/ecb09f2605c7fbbadf0eeb75da5f0a6b'>Stylized Scatter Plot with Color Legend</a>

mit Licensed

Similar vizzes

Loading thumbnail…

New_Scatter_Plot

This scatter plot displays the relationship between GDP per capita and population for countries, using World Bank data. The visualization uses red, semi-transparent circles to represent each country, with axes showing population in millions and GDP per capita in thousands. Built with D3 v7, the code applies `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and renders the plot as SVG. The chart includes gridlines, axis labels, and a title, with data loaded via `csv` from a GitHub-hosted dataset.

Mmartin

83% match

Loading thumbnail…

scatter plot

This scatter plot shows the relationship between GDP and CO₂ emissions for countries in 2020, with circle size encoding population and color highlighting China, the United States, and India. Hovering over a point reveals a tooltip with country details. Built with D3 v7, the visualization uses d3.tsv for data loading, d3.scaleLinear for axes, d3.scaleSqrt for sizing, and d3.axisBottom/axisLeft for rendering SVG axes with animation on tooltip transitions.

Bbadrinath888@gmail.com

82% match

Loading thumbnail…

Activity6_q3

This scatterplot shows the relationship between GDP per capita and life expectancy for seven countries, with each circle colored by country. The visualization uses D3.js v7 to load a local CSV file, scale the data linearly on both axes, and render circles as SVG elements. Axes are drawn using d3.axisBottom and d3.axisLeft, with labels for both variables. The d3.scaleOrdinal with schemeCategory10 assigns distinct colors to each nation, making it easy to compare economic output against health outcomes across the sample.

Vvidyagangasani@my.unt.edu

82% match

Loading thumbnail…

Drawing a Scatterplot

This scatterplot shows the relationship between GDP per capita and CO2 emissions per capita for countries in 1995, with circle size encoding population. It uses d3.csv to load World Bank data and d3.scalePow and d3.scaleSqrt to map values. The SVG visualization includes clickable country nodes, each with a labeled circle, and displays axes with tick marks created using d3.axisBottom and d3.axisLeft.

ZZhengyan Yu

81% match

Loading thumbnail…

GDP Variation over time plot-2

This scatter plot shows GDP variation over time, with each circle representing a country-year observation. The color of each point corresponds to the year, using an ordinal color scale with a diverging RdYlBu color scheme. The visualization includes an interactive color legend that filters points by year through click events. Built with D3 v5, the example uses `d3.scaleOrdinal`, `d3.schemeRdYlBu`, and custom modules for the scatter plot and legend, rendering as SVG with data loaded from a CSV file.

MMukund Khandelwal

81% match

Loading thumbnail…

Country stats

This scatterplot shows the relationship between GDP per capita and birth rate for countries around the world, with each circle representing a country. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` loading functions to map the data from the provided CSV file onto an SVG canvas. The chart includes labeled axes and a title, with circles positioned according to each country's metrics.

1123fischer

81% match

Loading thumbnail…

countries GDP in 2015 or before

This scatter plot visualizes countries' population and GDP from a 2015-or-earlier dataset, with each circle representing a country. The x-axis maps population in millions, while the y-axis shows GDP in millions of USD. The chart uses D3’s scaleLinear, extent, axisLeft, and axisBottom to construct axes. Circles are rendered via SVG, and each includes a title element showing detailed country data on hover. The reusable scatterPlot function, inspired by Towards Reusable Charts, is configured with margin, radius, and text value setters. The code loads CSV data from a GitHub repository using d3.csv.

KKerim

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

80% match