Skip to main content
SimilarExport ZIP
100%

Fork of Basic Scatter Plot with React & D3 Emissions

✓ Published0🌍 Public
BBrian Hulbert
Last edited Sep 10, 2025
Created on Sep 8, 2025

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.

AI-generated description

This is the link to the original data: https://www.kaggle.com/datasets/ulrikthygepedersen/co2-emissions-by-country

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot built with React and D3.js, displaying country-level data with land area on the x-axis and population on the y-axis. The chart renders a single SVG with circles for data points, labeled axes for both scales, and a hardcoded x-axis label. The code defines a custom `scatterPlot` function that uses D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs, along with the `join` operator to create incremental SVG elements within a React environment.

Rrevanthdasari10@gmail.com
81% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Ppvvaishnavi93@gmail.com
81% 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
80% match
Loading thumbnail…

Fork of React & D3 Starter

A simple scatter plot displays ten labeled points from a small CSV dataset, mapping x and y coordinates with linear scales. The visualization demonstrates a modular React and D3 integration where React manages the SVG container and D3 handles the rendering logic. The `viz.js` module uses `d3.scaleLinear` and `d3.extent` to compute scales, while `axes.js` employs `d3.axisLeft` and `d3.axisBottom` for chart axes. Data flows through a custom `useData` hook that loads and parses the CSV with `d3.csv`. The code separates concerns across files, making it a practical starting template for scalable projects.

Tteissierducros
80% match
Loading thumbnail…

CO2 emissions vs Year Project prototype v1

This interactive visualization toggles between a scatter plot of CO2 emissions over time and a world map. The scatter plot uses D3 scales and axes to render yearly emissions data from a CSV file, while the map displays a static SVG of world regions with randomly assigned colors. A React button switches between the two views.

BBrian Hulbert
79% 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
79% match
Loading thumbnail…

Project prototype v1

This interactive dashboard displays CO₂ emissions over time as a scatter plot, with each point colored by country using `d3.scaleOrdinal` and `d3.schemeCategory10`. A button toggles between the scatter plot and a world map rendered from an external SVG file. The scatter plot uses `d3.scaleLinear` scales and axes from `d3.axisBottom` and `d3.axisLeft`, while the map loads via `fetch` and applies randomly generated colors to regions. Data comes from a CSV file loaded with `d3.csv`.

BBrian Hulbert
79% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus test scores, with seven data points plotted on a fixed 500×400 SVG canvas. The code uses D3 v7 to create linear scales for both axes, append circles with steelblue fill, and render axis ticks via `d3.axisBottom` and `d3.axisLeft`. It also adds text labels for both axes. The visualization is implemented as a plain JavaScript function called `scatterPlot(container, data)`, which appends the SVG dynamically, while the included React starter demonstrates D3 selection in a `useEffect` hook. The dataset is hardcoded inline.

SSanjayRamaSwamyAdla@my.unt.edu
78% match