Skip to main content
SimilarExport ZIP
100%

ICE7-Q1-Reusable-Scatter

✓ Published2🌍 Public
CCharith Kapuluru
Last edited Oct 25, 2025
Created on Oct 25, 2025

A reusable scatter plot displays the relationship between population and GDP for cities in 2023, with population on the x-axis and GDP on the y-axis. The chart is rendered as an SVG using D3 v7, leveraging the `d3.scaleLinear` scales and `d3.axisBottom` and `d3.axisLeft` for axes. Data from the `global_cities_extended.csv` file is loaded with `d3.csv` and filtered to the target year, with points drawn as circles with a fixed radius and opacity.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Q1 11699544

This scatter plot visualizes the relationship between air quality (PM2.5 levels) and GDP per capita across global cities. The reusable D3 v7 chart applies logarithmic scaling with deterministic jitter to both axes, allowing dense data points to separate visually. Cities are colored by income tier (Low, Middle, High) using `d3.scaleOrdinal`, with a legend indicating the categories. The visualization uses `d3.csv` to load the dataset, `d3.scaleLinear` for axis scales, `d3.axisBottom` and `d3.axisLeft` for ticks, and includes hover tooltips displaying city details.

Aakshayamsgrad@gmail.com
84% match
Loading thumbnail…

ICE_6-SCATTER PLOT

This looping scatter plot animates between two views of U.S. city demographics, alternating between circular and triangular/square markers. The visualization compares population against GDP per capita, with color coding indicating which metric is larger. Built with D3.js v7, the example loads CSV data, computes linear scales, and toggles between two SVG charts using symbol generators. Axes and legends are drawn separately for each view, with the display switching via the `style.display` property.

GGorantla Vishnusai
82% match
Loading thumbnail…

ICE 6

This visualization combines bar charts and line charts to compare GDP and population across continents for 2024. The chart uses aggregated data from a CSV file, displaying GDP as blue bars and normalized population as a red line with points. Built with d3.csv, d3.rollups, and d3.scaleBand, the visualization maps population values to the GDP scale using d3.scaleLinear for comparison. The SVG rendering includes axes, legends, and tooltips, with d3.axisBottom and d3.axisLeft for the coordinate system.

CCharith Kapuluru
80% match
Loading thumbnail…

Shish's ICE7- Reusable scatter plot

This scatter plot visualizes world population data for 2025, comparing each country’s population against its median age. Using D3.js v7, the code loads a CSV file, parses numeric values, and renders circles scaled with `d3.scaleLinear` for both axes. The SVG visualization includes axis labels, hover effects that change circle color, and tooltips via appended `title` elements. Data comes from a GitHub-hosted CSV source, and rendering uses standard D3 SVG primitives with margins and transitions.

SSai Shishir Koppula
80% match
Loading thumbnail…

Reusable D3 Scatter Plot ice 7

An interactive scatter plot visualizes the relationship between GDP and M2 Money Supply for a dataset loaded from a CSV file. The chart uses a reusable function pattern, defined in `scatterPlot.js`, which is configured through getter and setter methods. The visualization is rendered as an SVG using D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The data is parsed to remove commas from numerical values. The plot displays steelblue circles with axes and labels, using the 'Share Tech' font.

Ddiwashhumagain@my.unt.edu
79% match
Loading thumbnail…

shish's ice7-reusable scatter plot

This scatter plot visualizes projected 2025 world population data, showing each country’s total population against its urban population percentage, with circle size encoding each nation’s share of the global population. Built with D3 v7, it renders as an SVG with linear scales for both axes and a square-root scale for radius. Interactive tooltips appear on mouseover, displaying the country name, population, urban percentage, and world share. The chart loads data from a CSV file and uses D3’s `d3.csv`, `d3.scaleLinear`, and `d3.scaleSqrt` APIs.

SSai Shishir Koppula
79% match
Loading thumbnail…

ICE-7 Common Visualization Idioms

This example demonstrates a reusable scatter plot comparing CO₂ emissions against GDP for six countries. The visualization positions circles along a linear scale for each variable, with axes, labels, and a title generated dynamically. It uses d3.csv to load the data from a CSV file, d3.scaleLinear for coordinate mapping, d3.extent to determine domains, and d3.axisBottom and d3.axisLeft for the axes. The plot is rendered as an SVG with circles styled in steelblue with partial opacity, and the code encapsulates the plotting logic into the `scatterPlot` function, allowing it to be reused with different data variables.

Bbadrinath888@gmail.com
79% 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
79% match