100%

ICE8 NIHA

✓ Published1🌍 Public

Last edited Oct 30, 2025

Created on Oct 30, 2025

This example displays a world choropleth base map using the Natural Earth projection, offering a visually balanced view of global landmasses and country borders. The visualization loads country boundary data from the world-atlas TopoJSON file via `d3.json`, then converts it to GeoJSON features using `topojson.feature` and mesh borders with `topojson.mesh`. The projection is applied through `d3.geoNaturalEarth1()` and paths are generated with `d3.geoPath`, while the SVG output renders land polygons with hover tooltips and boundary lines through D3's selection and joining API.

AI-generated description

ICE-8 Q1.1 — World Map (Natural Earth)

What this shows: A world choropleth base (no colors yet) using the Natural Earth projection.

Why this projection? Natural Earth gives a visually balanced world view with a good compromise between shape and area.

How to run

Use the provided index.html (with importmap) and style.css.
Paste this index.js and hit Run in VizHub.

Files

index.html — includes importmap + <svg id="viz">
style.css — simple styles for land/borders
index.js — draws countries + borders from world-atlas TopoJSON

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 World Atlas

This visualization displays a world map using the Natural Earth projection, filling landmasses in green with black borders and the ocean sphere in orange. It loads country boundaries from a TopoJSON file via the `json` method, then converts them to GeoJSON using `feature` from Topojson. The map is rendered as SVG paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The code asynchronously fetches data and appends country paths to the SVG, with styling defined in external CSS.

Llikith1266

90% match

Loading thumbnail…

ICE 8 World Map

This example displays a world map using a natural Earth projection, rendering countries as white shapes with dark blue outlines against a light blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset via `d3.json`, converts it to GeoJSON with TopoJSON’s `feature` function, and draws paths using `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization is built with D3 v5 and rendered as SVG elements.

SSnapika

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

90% match

Loading thumbnail…

ICE 8

This visualization shows a world map rendered with the Natural Earth projection, displaying country boundaries as blue filled polygons with white strokes overlaid on a graticule grid. The map loads geographic data from the `world-atlas@2/countries-110m.json` TopoJSON file, which is converted to GeoJSON using `topojson.feature`. The code defines a `d3.geoNaturalEarth1` projection, applies it through `d3.geoPath`, and draws both the graticule and country paths as SVG elements. A caption below the map identifies the data source and projection used.

Aaravindsg99@gmail.com

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

90% match

Loading thumbnail…

ICE8 - World Map

This example renders a world map using the Natural Earth projection. It draws a blue sphere as the globe’s background, then fills each country with a light green color and subtle black strokes. The visualization loads geographic data from the world-atlas TopoJSON file, converts it using `topojson.feature`, and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output is generated entirely through D3’s selection and data-join methods.

LLakshmiVandanaNunna

90% match

Loading thumbnail…

ICE 8 - WORLD MAP

This example displays a world map using a natural Earth projection, rendering each country as a purple SVG path with white borders against a pink background. It loads geographic data from the `world-atlas` TopoJSON dataset and converts it to GeoJSON using the `feature` function from `topojson`. The visualization is built with D3 v5, using `geoNaturalEarth1` for the projection, `geoPath` to generate SVG paths, and `select`/`json` for DOM manipulation and asynchronous data loading. A gray sphere outlines the earth's boundary.

AAshrith Kudidhi

89% match

Loading thumbnail…

ICE-8 World Map

This example displays a world map using the Natural Earth projection, with countries filled in orange and the sphere background in light green. It loads geographic data from a GitHub-hosted TopoJSON file, parses it with `topojson.feature`, and renders paths via `d3.geoPath` with the `geoNaturalEarth1` projection. The visualization is built with D3 v5, using SVG elements, and includes a CSS-styled sphere outline. A video tutorial accompanies the code, which is structured across separate HTML, JavaScript, and stylesheet files.

MManasaPatange

89% match