ICE-8

100%

✓ Published0🌍 Public

Last edited Nov 11, 2025

Created on Nov 11, 2025

ICE-8 presents a pair of interactive SVG choropleth maps showing world GDP and US state values. The world map projects Natural Earth TopoJSON countries with a Natural Earth projection and uses a green sequential color scale, while the US map uses an Albers USA projection. Both maps use `d3.geoPath`, TopoJSON features, and tooltip interactions. Data is joined from remote CSV sources, with JavaScript fetch and D3’s data loaders handling URL fallbacks.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8

This visualization presents global GDP data for 2022 on an interactive world map. Countries are colored using a sequential logarithmic scale with the RdYlGn interpolator, where hovering reveals tooltips with country names and values. A second map displays countries with rainbow-hued fills using d3.scaleSequential with interpolateRainbow, also featuring interactive tooltips. Both maps use d3.geoPath with different projections (geoEqualEarth and geoNaturalEarth1), loading geographic data from world-atlas TopoJSON and economic data from a CSV file.

HHARISH ARMUGAM

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

85% match

Loading thumbnail…

ICE-8 NIHA

Two map examples show how D3.js renders geographic data with TopoJSON and custom projections. The world map uses `d3.geoNaturalEarth1` and a sequential blue color scale to encode population values from a CSV, overlaid with a graticule. The US map uses `d3.geoAlbersUsa` with state boundaries from `us-atlas@3`. Both use SVG paths via `d3.geoPath` and a fixed tooltip on hover.

118121a1545

85% match

Loading thumbnail…

ICE8_WorldMap_hd

This example presents two interactive SVG maps built with D3 v7 and TopoJSON: a world map showing random population density values and a U.S. map displaying random crime rates. The world map uses a Natural Earth1 projection, while the U.S. map employs an AlbersUsa projection. Both maps encode data through sequential color scales—YlOrRd for density and Blues for crime—applied to country and state polygons via `d3.geoPath`. The code fetches geographic data from world-atlas and us-atlas CDN packages, then appends tooltips with the corresponding random values.

HHarshithaDontha@my.unt.edu

85% match

Loading thumbnail…

ICE-8 World Map

This interactive world map lets users explore country boundaries by clicking on them, which switches the projection between Mercator and orthographic views, with the United States triggering a third Albers USA projection. Built with D3 v6 and TopoJSON, the visualization uses d3.geoPath to render country shapes from world-atlas data, while d3.drag and d3.zoom enable rotating the orthographic globe and panning/zooming the map. A graticule overlay and country hover effects are drawn as SVG paths, with transitions animating projection changes.

Ddheeraj1509

84% match

Loading thumbnail…

ICE 8-1

This visualization displays a world map using the Natural Earth projection, with countries filled in pastel green and separated by white borders. The map loads country boundaries from the world-atlas TopoJSON dataset via d3.json, then converts them to GeoJSON features using topojson.feature. Each country path is rendered as an SVG element through d3.geoPath, and hovering reveals the country name through an appended SVG title tooltip. The code relies on d3.v7 and the topojson library for geographic data handling.

Aanirudhrao345@gmail.com

84% match

Loading thumbnail…

ICE 8

This visualization displays a choropleth map of the United States, with each state filled by a categorical color from the D3 category10 scheme. The map uses the geoAlbersUsa projection and renders state boundaries as SVG paths with white strokes via d3.geoPath. It loads US Atlas TopoJSON data from a CDN, extracts state features using topojson’s feature function, and shows state names as tooltips on hover.

66264kusuma@gmail.com

84% match

Loading thumbnail…

ICE8

This interactive world map visualizes country populations with a sequential YlGnBu color scale. It loads TopoJSON world boundaries via `d3.json` and population data from a CSV, then joins them through ISO country codes. The SVG map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render countries, with hover tooltips and an axis-labeled gradient legend built using `d3.scaleSequential` and `d3.axisBottom`. Missing values are shown in gray.

Ppashamsahithi2391@gmail.com

84% match