Skip to main content
SimilarExport ZIP
100%

Fork of Basic Scatter Plot with React & D3

✓ Published0🌍 Public
Sskasliwal@wpi.edu
Last edited Oct 4, 2025
Created on Oct 4, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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…

Fork of GapMinder (CP341 Style)

This visualization presents a fork of the classic GapMinder chart, displaying country-level GDP per capita against average lifespan across time. The left panel shows a scatterplot of circles scaled by population, while the right panel traces each country’s lifespan trajectory over years. Users control the year via a slider and filter by continent through a dropdown. Built with React and D3 v6, the code uses `d3.scaleLog`, `d3.axisBottom`, and `lineGenerator` for SVG rendering. Data comes from a JSON file, with hover tooltips and historical annotations displayed via custom event handlers.

Kkaijavanzante@gmail.com
82% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example visualizes global GDP data as a responsive scatter plot using Chart.js, rendering points on a canvas. It shows yearly GDP values fetched from a CSV file hosted on GitHub, with point colors encoding value ranges: orange below 30 trillion, blue between 30 and 60 trillion, and green above 60 trillion. The code parses the CSV with `split` and `parseInt`/`parseFloat`, filters invalid rows, and configures axes labeled "Year" and "Value". The chart uses the `scatter` type, with `backgroundColor` set per data point for categorical coloring.

RRakesh Kumar Chekuri
82% 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
81% match
Loading thumbnail…

scatter plot practice

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.

Ookahne@gmail.com
81% match
Loading thumbnail…

Fork of Scatter project

This scatter plot visualizes the relationship between country code (on the x-axis) and GDP (on the y-axis) for a dataset of international tourism receipts, with each country represented as a semi-transparent red circle. The visualization uses the D3 v5 library, specifically importing functions like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and scale the data. The data is loaded from a CSV file and processed in JavaScript, with the GDP values converted to numbers before being rendered as SVG circles within a 960x500 pixel canvas.

Rrallabandisushen@gmail.com
80% match
Loading thumbnail…

Fork of Interactive Scatter Plot

This interactive scatter plot explores relationships between variables like GDP, CPI, and birth rate across countries, with each point representing a country and colored by continent. Users can switch the x- and y-axis variables via dropdown menus and click legend entries to highlight specific continents. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and the `axes` helper from `@curran/responsive-axes`, with hover tooltips showing country names. Data comes from the World Data 2023 CSV, and the visualization updates dynamically through D3's data joins and transition methods.

Gg_beck@coloradocollege.edu
80% match
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3 Emissions

This example uses a React app to render a basic scatter plot of CO2 emissions over time. The chart displays data points for various countries and regions from 1960 onward, sourced from a CSV file. The visualization is created using D3.js version 7, with the `select`, `csv`, `scaleLinear`, and `extent` APIs. A React `useEffect` hook loads the data and calls a custom `viz` function to render circles, mapping the year to the x-axis and emission value to the y-axis.

BBrian Hulbert
80% match