Fork of ICE-8 world map_ USA map

100%

Fork of ICE-8 world map_ USA map

✓ Published2🌍 Public

Last edited Nov 10, 2025

Created on Nov 9, 2025

This example presents two side-by-side SVG maps: a world map and a map of the United States, both filled with a constant blue color. It uses D3.js v7 and TopoJSON to load and render geographic features, with `d3.geoNaturalEarth1` for the world projection and `d3.geoPath` to draw paths. A graticule layer is added to the world map, and both maps include hover effects with a tooltip that displays country or state names. The maps use the world-atlas TopoJSON data source.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 1A kumar danam

This example presents two side-by-side SVG map visualizations: a world map showing population data and a U.S. map displaying crime rates. The world map uses the `d3.geoNaturalEarth1` projection with a sequential color scale (`d3.scaleSequential` with `d3.interpolateYlOrRd`) to encode population values from a hardcoded dataset, while U.S. states are rendered via `d3.geoAlbersUsa`. Both maps load TopoJSON data from `world-atlas@2` and `us-atlas@3`, converting it with `topojson.feature` and drawing paths using `d3.geoPath`. Graticules and tooltips via SVG `<title>` elements enhance the display.

KKumar Danam

88% match

Loading thumbnail…

Fork of World_Map_ICE_8_2

This interactive map displays the United States with a focus on state boundaries, rendered in SVG with a clean, minimal style. The example lets users toggle between different geographic scales—states, counties, or world countries—by fetching TopoJSON data from the us-atlas and world-atlas CDNs. Built with React and D3 v5, it uses `d3.geoAlbersUsa` and `d3.geoNaturalEarth1` projections with `d3.geoPath` to draw the shapes, clearing and redrawing the SVG when the map type changes.

CChandrashekharRamamuthi

88% match

Loading thumbnail…

Fork of ICE - 8 Making Maps Country

This example displays a world map rendered as violet countries with black outlines on a green background, using geographic data from the World Atlas TopoJSON file. It isolates the United States of America from the full country feature collection while drawing all countries via d3.geoPath with the d3.geoAlbersUsa projection. The visualization filters features by name property and appends SVG path elements for each country, demonstrating map generation with topojson.feature and D3’s v5 API.

Ppravalika.thogaru10@gmail.com

88% match

Loading thumbnail…

Fork of Fork of ICE-8 world map

This example shows a world map rendered in an SVG using D3 v5, with countries filled in orange and outlined in red against a skyblue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON data from a remote gist into GeoJSON for country boundaries. The visualization loads the world map data asynchronously via `d3.json` and appends each country path to the SVG. The sphere background and country styling are defined in the accompanying CSS.

GGARIDIDEEKSHITHREDDY

87% match

Loading thumbnail…

Fork of Fork of ICE 8 Making Maps

This example displays a world map with each country rendered as a green SVG path with white borders. It uses d3.json to load TopoJSON data from a GitHub gist, then extracts country features with the topojson feature function. The map projection and path generation are handled by d3.geoNaturalEarth1 and d3.geoPath, which project the geographic coordinates onto a 960×500 SVG canvas.

Aamiralitah

87% match

Loading thumbnail…

Fork of ICE8 - World Map

This example displays a world map rendered in an SVG using the Natural Earth projection. It loads country boundaries from a TopoJSON file via `d3.json` and converts them with `topojson.feature`. The code applies `d3.geoPath` and `d3.geoNaturalEarth1` to draw both a sphere outline and country shapes, which fill with pink and brighten to maroon on hover through CSS. The visualization demonstrates basic geographic data mapping with straightforward styling.

Ffouzanuddin

86% match

Loading thumbnail…

Fork of ICE8 - World Map

This example displays a static world map rendered as an SVG, using a light blue sphere background and pale green country polygons outlined with semi-transparent black strokes. It loads a TopoJSON dataset of 110-meter resolution country boundaries from the `world-atlas` package, converts it to GeoJSON features with the `topojson` library, and projects them using D3’s `geoNaturalEarth1` projection and `geoPath` generator. The map is drawn entirely client-side via D3 v5, with no interaction or animation.

MManohar Kowthavarapu

86% match

Loading thumbnail…

Fork of Fork of ICE 8 - Country Map

This example displays a static map of the United States using state boundaries rendered as green SVG paths on a light blue background. The code employs D3 v4 with `d3.geoPath` and `d3.geoAlbersUsa` for projection, and reads TopoJSON data from the us-atlas package via `topojson.feature`. State shapes are drawn with stroke styling, and the map is centered using a manual translation offset within an SVG container.

Aamiralitah

86% match