Skip to main content
SimilarExport ZIP
100%

6th visualisation 1

✓ Published1🌍 Public
Vvenkatabhaskaratetali@my.unt.edu
Last edited Apr 21, 2024
Created on Apr 21, 2024
Forked from 6th visualisation

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.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

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

ScatII

This scatterplot visualizes the relationship between GDP (x-axis) and population (y-axis) for various countries. Each circle represents a country, with tooltips revealing the country name, GDP, population, and calculated GDP per capita. Built with React and D3 v7, the visualization uses `d3.csv` to load data from a GitHub repository, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` for tick labels. It is rendered as an SVG, with data formatted using a custom `numMaker` utility that abbreviates large numbers into billions and millions.

Aadventuresenglish.info@gmail.com
84% 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
83% 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
83% match
Loading thumbnail…

Activity6_q4

This bubble chart visualizes the relationship between GDP (x-axis) and population (y-axis) for six countries, with circle area encoding land area and color distinguishing each country. Built with D3.js v7, it uses `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with the Tableau10 scheme for colors. Tooltips generated via SVG `<title>` elements display each country’s exact values. The data is loaded from a local CSV file using `d3.csv`.

Vvidyagangasani@my.unt.edu
83% match
Loading thumbnail…

Activity-6-Scatterplot

This scatterplot visualizes the relationship between population and GDP per capita for U.S. cities using D3.js v6. The SVG-based chart plots each city as a steel-blue circle with a black stroke, positioned along linear scales for both axes. The code loads data from a GitHub-hosted CSV file, converts the population and GDP values to numbers, and renders axes with formatted tick labels. Interactive tooltips appear on mouseover, displaying each city's name, population, and GDP per capita. The visualization employs d3.csv for data loading, d3.scaleLinear for mapping, and d3.axisBottom and d3.axisLeft for coordinate axes.

GGorantla Vishnusai
82% match
Loading thumbnail…

A6_ScatterPlot

This scatter plot visualizes the relationship between happiness scores and GDP per capita across multiple continents, with each circle colored according to its continent category. It shows how countries with higher GDP per capita tend to report higher happiness scores, while also revealing regional clusters and outliers. The visualization is built with D3 v7 and rendered as SVG, using a linear scale for both axes and an ordinal color scale for continental groupings. A d3-legend legend provides a color key for the continent categories, and the data is loaded from an external CSV file containing happiness and GDP metrics.

DDuc Pham
82% match
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
82% match