Anusha Pujari

@AnushaHR11·3 public vizzes

HW6 project

This interactive scatter plot visualizes the relationship between GDP per capita and CO₂ emissions per capita for countries across multiple regions from 2018 to 2023, with circle size encoding energy consumption per capita. A slider lets viewers step through years, updating the displayed points and filtering data accordingly. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleSqrt` for circle sizing, and `d3.scaleOrdinal` with `d3.schemeTableau10` for regional color encoding. Tooltips appear on hover, and a status bar shows the currently selected country. Data is loaded from a local CSV file.

Oct 5, 2026

Loading thumbnail…

Scatter Plot

A scatter plot shows the relationship between GDP per capita on the x-axis and CO2 emissions per capita on the y-axis for countries. Circles represent individual countries, colored by region. The visualization uses D3 v7 scales, axes, and SVG circle marks rendered within a React component. Data loads from a CSV file via d3.csv, with numeric columns parsed and categorical region names normalized before plotting.

Sep 28, 2026

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a minimal integration of React 19 and D3.js version 7, where a single line of text is rendered. The code uses React hooks (`useRef`, `useEffect`) to manage the DOM element and the D3 `select` API to update its content, displaying "Hello D3 & React" via an SVG-less `<div>`. The starter template relies on ES modules with an import map, loading both React and D3 from a CDN without any build tools. The visualization itself is not data-driven; it focuses on the basic setup and interaction between the two libraries.

Sep 28, 2026