ice 8 Task 1

100%

✓ Published1🌍 Public

Last edited Nov 2, 2025

Created on Nov 2, 2025

This example shows a global choropleth map of average annual temperatures by country, with selected nations colored from blue (cold) to red (hot) and unlisted countries in gray. It uses d3.json to load TopoJSON world boundaries via topojson.feature, then d3.geoPath with a geoNaturalEarth1 projection to render SVG paths. A d3.scaleSequential with d3.interpolateRdYlBu encodes temperature values, while a linear-gradient legend and browser tooltip titles provide context from a hardcoded dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 Task1

The visualization displays average annual temperatures by country on a world map, with a blue-to-red sequential color scale representing cold to hot climates. Unmapped countries appear gray. The map uses D3 v7 and TopoJSON to render geographic features via `d3.geoPath` with a natural Earth projection. A hardcoded dataset supplies temperature values for twelve countries, while hover tooltips reveal exact temperatures. The SVG includes a gradient legend with an axis, showing the temperature scale from -10°C to 30°C.

GGorantla Sravani

92% match

Loading thumbnail…

ice 8 Task 1

This visualization displays a world map colored by average daily internet usage hours per person, using a blue sequential scale where darker shades indicate higher usage. It renders geographic boundaries with TopoJSON data and `d3.geoPath`, while `d3.scaleSequential` maps values to colors. Countries without data appear gray. Interactive tooltips appear on mouseover showing the country name and hours. The map uses a Natural Earth projection, includes a gradient legend, and animates tooltip transitions via D3’s `transition.style`.

Kkmuktha09@gmail.com

83% match

Loading thumbnail…

World map

This interactive world map visualizes average annual temperatures by country, with each nation colored on a blue-to-red sequential scale. Hovering over any country reveals a tooltip with its name and exact temperature. The visualization uses d3.geoPath with a Mercator projection to render TopoJSON data from world-atlas, supports zooming via d3.zoom, and includes a gradient legend built with d3.scaleSequential and an SVG linearGradient.

NNita

82% match

Loading thumbnail…

ICE 8 TASK 1.1

This choropleth map uses a Natural Earth projection to visualize population data for 20 countries, with darker blue shades representing higher values. The visualization loads world geometries from the world-atlas TopoJSON dataset via `d3.json` and merges CSV population data using a lookup dictionary. Countries are rendered as SVG paths using `d3.geoPath`, with missing data shown in light gray. A sequential blue color scale (`d3.scaleSequential`) and gradient legend communicate the population range, while a tooltip displays exact values on hover.

Uuguggila@gitam.in

82% match

Loading thumbnail…

ICE-8

A world choropleth maps country-level numeric values from a CSV file onto a natural Earth projection, using a plasma color scale and gradient legend to encode magnitude. The visualization links ISO numeric country codes to TopoJSON geometry from the world-atlas dataset, rendering with D3 v7’s `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.scaleSequential`. Hovering over a country reveals a tooltip with its name and value, while countries without data appear in a muted blue.

LLokesh

82% match

Loading thumbnail…

ICE 8 TASK 1.1

This visualization shows a static world map using a Natural Earth projection, with country boundaries drawn as light gray SVG paths against a blue ocean sphere. It uses D3 v7 and topojson-client to load and convert the world-atlas TopoJSON dataset at 110m resolution. The map renders each country via `d3.geoPath` and adds a tooltip title showing the country name from the TopoJSON properties.

Uuguggila@gitam.in

81% match

Loading thumbnail…

ICE-8 1A Rithvik Reddy

This choropleth map of the world uses a Natural Earth projection to show numeric values per country, with a yellow-to-blue sequential color scale and interactive tooltips revealing ISO-Numeric IDs. Built with D3 v7, it loads TopoJSON from world-atlas, computes paths via `d3.geoPath`, and renders countries as SVG elements. A linear gradient legend and `d3.axisBottom` display the value range, while `d3.csvParse` maps the small inline dataset.

RRithvik

81% match

Loading thumbnail…

ICE-8

This example shows a world map highlighting individual countries in blue that turn red on hover, built with D3 v7 and TopoJSON. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country boundaries from the world-atlas dataset, with data loaded from a CDN via `d3.json`. The SVG rendering applies simple CSS classes for the hover interaction.

CCharith Kapuluru

81% match