ICE 7 Q1 11699544

100%

ICE 7 Q1 11699544

✓ Published0🌍 Public

Last edited Oct 28, 2025

Created on Oct 27, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7-Q1-Reusable-Scatter

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.

CCharith Kapuluru

84% match

Loading thumbnail…

ice-7 q1

This scatter plot visualizes air quality by comparing PM2.5 and NO2 AQI values across global cities. Each circle represents a city, with its position determined by the two pollutant levels; hovering highlights a point in orange and a tooltip displays the city and country name. Built with D3.js v7, the visualization renders as an SVG with hardcoded data from the first 100 rows of the v3 source dataset. The chart includes labeled axes and uses standard D3 scales to map the data values to pixel coordinates.

Nnagalakshmibadineedi2@gmail.com

80% match

Loading thumbnail…

ICE-8 - Choropleth map - GDP per capita

This choropleth map visualizes global GDP per capita using a logarithmic color scale, with countries colored from dark to light based on economic output. Hovering over any country reveals a tooltip showing its name and exact GDP value. The visualization uses D3 v7 with `d3.geoNaturalEarth1` projection and `d3.geoPath` to render world geography from TopoJSON data, while `d3.scaleSequentialLog` with the Plasma interpolator handles color encoding. A graticule layer and interactive legend complete the SVG-based rendering.

AAbhiramPudi@my.unt.edu

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

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

76% match

Loading thumbnail…

ICE 6 -1

This bar chart ranks countries by their 2024 GDP in billions of U.S. dollars, using a horizontal layout with rotated country labels and tick marks for readability. The visualization loads a CSV from a GitHub gist via `d3.csv`, filters it to the year 2024, and sorts values in descending order. It renders an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and includes axes via `d3.axisBottom` and `d3.axisLeft`. Tooltips with exact values appear on each bar using SVG `<title>` elements.

CCharith Kapuluru

76% match

Loading thumbnail…

ICE 6 -1

This bar chart ranks countries by their GDP in billion USD, with bars sorted from largest to smallest and a tooltip on each bar showing the exact value. The visualization is built with D3 v7, using `d3.csv` to load the data from a remote gist, and `d3.scaleBand` for the categorical x-axis plus `d3.scaleLinear` for the numeric y-axis. Rotated country labels on the bottom axis and horizontal grid lines from `d3.axisLeft` aid readability.

CCharith Kapuluru

76% match

Loading thumbnail…

ICE 7 line chart

This example visualizes the GDP of countries in trillions of USD as a line chart, with the data sorted in descending order and sourced from a CSV file hosted on GitHub. The chart plots each country along a point scale and connects the values with a smooth monotone curve, while orange dots mark individual data points. Built with D3.js v7, it uses `d3.csv` for loading, `d3.scalePoint` and `d3.scaleLinear` for axes, and `d3.line` with `d3.curveMonotoneX` to generate the SVG path. Axis labels, rotated tick text, and a bold title complete the presentation.

Aadithiarikatla@gmail.com

75% match