CSCE 5320 HW5

100%

✓ Published0🌍 Public

Last edited Sep 30, 2026

Created on Sep 30, 2026

This example presents a scatterplot of country-level data, plotting GDP per capita against CO2 emissions per capita, with each point colored by region and sized by population. The visualization summarizes the dataset’s rows, columns, and key statistics for the x-axis variable, including its mean and median. Built with D3 v7, it loads CSV data from a GitHub gist and uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for region-based coloring, and `d3.extent`, `d3.mean`, and `d3.median` to compute summaries. Rendering is SVG-based with axes and labels styled via CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 5

This scatterplot uses D3.js v7 to visualize the relationship between GDP per capita and CO2 emissions per capita, with each circle representing a country. The plot encodes quantitative data on both axes using linear scales, while a categorical region column will determine color and population determines circle size in subsequent versions. The code loads a CSV file, converts specified numeric columns, and renders the visualization using SVG elements. Axes are created with D3's axis functions, and a summary displays the data's row count and field names.

Ppezguy97@gmail.com

86% match

Loading thumbnail…

Project 6

This scatter plot shows the relationship between GDP per capita and CO₂ emissions per capita, with each dot representing a country-year observation. Points are colored by region and include a legend, while hovering over a point reveals a tooltip showing the country, year, and both variable values; clicking a point selects and highlights it. The visualization uses d3.csv to load data from a GitHub gist, d3.scaleLinear for the axes, d3.scaleOrdinal with d3.schemeTableau10 for categorical coloring, and d3.axisBottom and d3.axisLeft for tick marks. All marks are rendered as SVG circles, with the tooltip positioned absolutely and delayed via setTimeout.

Ppezguy97@gmail.com

83% match

Loading thumbnail…

Homework 6

This interactive scatterplot from D3 v7 uses an SVG canvas to explore the relationship between GDP per capita and CO₂ emissions per capita, with points colored by world region and a legend on the right. The visualization supports both hover-based tooltips that display detailed text and click-to-select functionality, with a toggleable 2000ms tooltip delay button for testing responsiveness. Data loads from a CSV file via `d3.csv` with `d3.autoType`, axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding.

GGuduru Naga Tejaswi

83% match

Loading thumbnail…

Fork of HTML Starter

This scatterplot, built with D3 v7, visualizes the relationship between GDP per capita and CO2 emissions per capita for countries over multiple years. Each point represents a country, colored by region and positioned by its economic and environmental metrics across a time series. The visualization includes axes, a legend, and a delayed tooltip that appears after a 2000ms hover, displaying additional country details. Data is loaded from a remote CSV file using `d3.csv`.

Llokeshpraveen01@gmail.com

83% match

Loading thumbnail…

HW6_3D_Visualization_Rakesh

This scatterplot visualizes the relationship between GDP per capita and CO₂ emissions per capita, with points colored by world region. The D3.js v7 code uses `d3.scaleLinear` and `d3.axisBottom` to render axes, while circles are placed via `d3.selectAll().join()`. A hover tooltip is intentionally delayed by two seconds, managed through a timer, to test interaction timing. Data comes from a CSV file loaded via `d3.csv`.

RRakesh vilasagaram

83% match

Loading thumbnail…

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.

AAnusha Pujari

82% 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

82% match

Loading thumbnail…

Drawing a Scatterplot

This visualization shows a scatterplot of 1995 World Bank data, plotting GDP per capita on the x-axis against CO2 emissions per capita on the y-axis, with circle size encoding population. Each country is rendered as a labeled SVG group with a circle and text label. The code uses `d3.csv` to load the data, `d3.scalePow` with an exponent of 0.5 for both axes, `d3.scaleSqrt` for sizing circles, and `d3.axisBottom`/`d3.axisLeft` to draw the grid. Clicking a country highlights it with a red stroke via the `classed` method.

ZZhengyan Yu

82% match