ICE-8

100%

✓ Published0🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8

This example renders a world map using the equirectangular projection, filling each country solid red against a blue sphere. It highlights countries in black on hover. The visualization loads TopoJSON world-atlas data, converts it to GeoJSON with TopoJSON’s `feature` method, and draws paths using `d3.geoPath` and `d3.geoEquirectangular`. The SVG output is styled via CSS, and interactions rely on the `:hover` selector.

Vvineeth0000

91% match

Loading thumbnail…

ICE-8

This example displays a natural Earth projection of the world map, with countries rendered in a golden color and outlined with black borders. Hovering over any country turns it white. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the map, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas dataset. The SVG sphere background appears sky blue, and the CSS `:hover` rule handles the color change, with body overflow hidden for a clean layout.

JJasvitha Allamsetty

91% match

Loading thumbnail…

ICE-8_world_map

This example shows a world map with countries colored in red against an orange sphere, and hovering highlights each country in gray. It uses D3 v5’s `geoAzimuthalEqualArea` projection with `geoPath` to render the map, and TopoJSON’s `feature` method to extract country boundaries from the world-atlas countries-10m dataset. The SVG elements are styled via CSS, including hover effects and stroke opacity.

NNiharika-Guthikonda

91% match

Loading thumbnail…

ICE 8

This example displays a world map with each country rendered as a green SVG path with a red outline. It uses a `d3.geoPath` projection with `geoNaturalEarth1` to generate the map, and fetches country boundaries from the world-atlas dataset. The `topojson` library's `feature` function extracts the geometries from the TopoJSON data, and the resulting paths are appended to the SVG canvas with a fixed blue background.

AArv1228

90% match

Loading thumbnail…

ICE 8 WORLD MAP

This example renders a natural Earth projection world map using D3 v5 and TopoJSON. It draws a blue sphere outline and gold country polygons with black strokes, generated via `d3.geoPath` and the `geoNaturalEarth1` projection. Country boundaries come from the world-atlas countries-110m.json dataset, parsed using the TopoJSON `feature` function. The SVG output is styled with CSS classes for the sphere and countries.

Ggeethikal

90% match

Loading thumbnail…

ICE8 - World Map

This example displays a world map rendered as an SVG, with countries drawn in pink and the globe’s sphere filled in light blue. It uses D3 v5 and the TopoJSON library to load country boundaries from the world-atlas dataset, specifically the countries-110m.json file. The map employs a natural Earth projection via `geoNaturalEarth1` and generates SVG paths with `geoPath`. Country features are extracted using TopoJSON’s `feature` method and bound to SVG elements.

KKande2011

89% match

Loading thumbnail…

ICE-8 world map

This example presents a static world map with country boundaries rendered in light purple. Hovering over a country reveals its name in a tooltip. The map is drawn using the `d3.geoNaturalEarth1` projection and `d3.geoPath`, with a graticule overlay created by `d3.geoGraticule10`. Country shapes come from the TopoJSON dataset `countries-110m.json`, loaded via `d3.json` and converted to GeoJSON features using the `topojson-client` library. The visualization is built with D3 v7 and rendered as SVG.

Ppasalabala22@gmail.com

89% match

Loading thumbnail…

ICE 8 world map

This example displays a world map rendered from TopoJSON country boundaries, with each country filled in light blue and outlined in blue. The visualization uses d3.geoPath with a d3.geoNaturalEarth1 projection to convert geographic data into SVG paths. It loads the worlddata.csv file from a GitHub gist, extracts the country features using the topojson.feature API, and maps them onto a 960x500 SVG canvas.

Ggayathri

89% match