Skip to main content
SimilarExport ZIP
100%

scatter plot practice

✓ Published0🌍 Public
Ookahne@gmail.com
Last edited Apr 30, 2024
Created on Apr 30, 2024

This example displays a scatter plot that maps each country’s GDP on the x-axis against its CO2 emissions on the y-axis, using static data from a CSV file. The visualization uses React with d3.v6 to create an SVG chart, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` for data loading. Circles represent countries with a fixed radius of 10 pixels, colored in green, and hover events log data to the console. The chart is rendered within a specified margin and width, ensuring a clean layout.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

interactive scatter

This interactive scatter plot visualizes the relationship between CO2 emissions and GDP for over 190 countries, with each circle representing a nation. The chart uses D3's `scaleLinear` for both axes, and employs `axisBottom` and `axisLeft` for custom tick marks and labels. The data is loaded from a local CSV file using `csv()`. The code includes commented-out instructions for using `scaleLog` to switch to a logarithmic scale, though the active visualization uses a standard linear scale for both variables.

Ookahne@gmail.com
85% 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
82% match
Loading thumbnail…

Reusable Scatter Plot (CO₂ vs GDP, 2025)

This reusable scatter plot compares GDP per capita against CO₂ emissions for countries in 2025, with circle size encoding population and color distinguishing regions. Built with D3 v7, the chart renders as SVG and uses d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal to map data dimensions. Interactive tooltips appear on mouseover, showing country details such as renewable energy percentage, while data is loaded from a CSV file.

Vvunnamnandini13@gmail.com
82% match
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

This example plots global economic growth using a scatter plot of GDP per capita against time. Each small blue circle represents a single country's GDP value for a given year. The visualization uses a logarithmic y-axis scale to handle the wide range of data values, revealing trends across nations from 1800 to 2100. The code combines React's state management with D3.js v7, using `scaleLog` for the axis, `scaleLinear` for time, and `csvParse` to transform the loaded Gapminder dataset into a long format for plotting.

Sskasliwal@wpi.edu
81% match
Loading thumbnail…

Chocolate_price_ScatterPlot

This reusable scatter plot, built with D3.js v7, visualizes the relationship between a country's CO₂ emissions and its GDP using data loaded from a CSV file. It clearly shows the data distribution across these two variables, with each country represented as a steel-blue circle. The visualization employs D3's `scaleLinear` for both axes, `axisBottom` and `axisLeft` for the tick marks, and `d3.extent` to set the domain. The function `scatterPlot` is designed to be reusable, accepting any container, dataset, and variable names for flexible comparisons.

AALIMINETI SPOORTHY REDDY
81% 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
81% match
Loading thumbnail…

Fork of ICE-7 Common Visualization Idioms

This example demonstrates a reusable scatter plot that visualizes the relationship between CO₂ emissions and GDP for six countries using data from a local CSV file. It employs D3 v7 with SVG rendering, implementing a `scatterPlot` function that accepts container, data, and variable parameters for reusability. The visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to create proportional scales and axes, with circles positioned via `attr` bindings. The code also clears previous SVG elements before re-rendering, ensuring clean updates without duplication.

Sskmriyaz0786@gmail.com
81% 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
81% match