ice - 8 Ar — VizHub

100%

ice - 8 Ar

✓ Published3🌍 Public

Last edited Oct 31, 2025

Created on Oct 30, 2025

Forked from Map

The example displays two interactive SVG maps in a single page: a world map using the Natural Earth projection and a United Kingdom map using the Mercator projection. Both maps load TopoJSON data from external sources—world-atlas for countries and a UK counties dataset—then render geographic features with D3 v7's `d3.geoPath` and projections like `d3.geoNaturalEarth1` and `d3.geoMercator`. Graticules and country/region outlines are styled via CSS classes, with hoverable tooltips showing feature IDs or names.

AI-generated description

MIT Licensed

Similar vizzes

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

83% match

Loading thumbnail…

ice 8

This example displays a polished world map rendered in SVG using React and D3 v5. It shows land masses in teal, country borders, graticules, and a light sphere background. The code uses `geoNaturalEarth1` and `geoPath` for projection and path generation, plus `geoGraticule` for the grid. Geographical data comes from the world-atlas TopoJSON source, processed via `feature` and `mesh` to create land and interior boundaries.

Ccharchana0527@gmail.com

83% match

Loading thumbnail…

ice-8

This example displays a world map using a Natural Earth projection, with countries rendered as semi-transparent yellow polygons over a light blue spherical backdrop. The visualization loads geographic data from the world-atlas JSON and processes it with the topojson library’s feature method. The map is drawn by generating SVG paths via d3.geoPath and the geoNaturalEarth1 projection, while the sphere outline is created from an explicit Sphere geometry. The d3 select and append methods build the SVG hierarchy, with CSS classes styling the sphere and country fills.

Kkartik900

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

82% match

Loading thumbnail…

ICE 8: World Map with Topojson Data

This example displays an interactive world map using a natural Earth projection, with each country rendered as a distinct filled path. The visualization loads GeoJSON data from the world-atlas TopoJSON file, converts it using the `feature` method from topojson, and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output includes a light sphere background and hover highlighting on countries, driven by CSS and D3 v5’s `select` and `data` binding.

Bbharathsivakumar07

82% match

Loading thumbnail…

ICE8 - World Map

This example displays a world map using a natural Earth projection, rendering countries as green polygons with a blue ocean sphere. It uses D3 v5’s `d3.geoNaturalEarth1()` projection and `d3.geoPath()` to convert geographic coordinates into SVG paths. Country boundaries come from the world-atlas TopoJSON dataset, processed with `topojson.feature`. The map is drawn entirely in SVG, with the sphere background and country layers styled via CSS.

Ggeethikal

82% match

Loading thumbnail…

ICE 8 Araib

This example displays a world map using the Natural Earth projection, coloring each country with a purple fill on a blue background. It loads geographic data from the `world-atlas` TopoJSON file, converts it to GeoJSON using `topojson.feature`, and renders the paths with `d3.geoPath` projected through `d3.geoNaturalEarth1`. The SVG also includes a sphere outline, and countries change color on hover via CSS. D3 v5 and v7 code coexist, with React dependencies declared but unused.

SSyed Araib Karim

82% match

Loading thumbnail…

ICE8 World Map

This example displays a world map using the Natural Earth projection, with country boundaries rendered as filled paths on an SVG canvas. It demonstrates fundamental D3.js DOM manipulation by loading geographic data from a remote TopoJSON file, converting it to GeoJSON with the `feature` function, and projecting it using `d3.geoPath` and `geoNaturalEarth1`. The sphere outline and countries are styled via CSS, with sky-blue fills and thin stroke outlines. The visualization relies on D3 v5 and TopoJSON v3 to generate the map.

SSnigdha6698

82% match