100%

World Map

✓ Published0🌍 Public

Last edited Oct 7, 2025

Created on Oct 7, 2025

Forked from 1Scatter Plot with React & D3

This world map visualizes countries using a Natural Earth 110m TopoJSON dataset, with nations color-coded by continent: North America alternates blue and red, Europe alternates red and green, and Africa appears in black. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render countries as SVG paths within a React component. Hovering over a country darkens its fill and thickens its stroke via mouseenter and mouseleave event handlers.

AI-generated description

World Map Visualization

An interactive world map built with React and D3.js using TopoJSON data.

Features

Renders a world map using the Natural Earth 110m dataset
Interactive hover effects on countries
Responsive SVG rendering

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This visualization displays a world map using a Natural Earth projection, with each country rendered as a distinct colored region on a white background. The map is constructed with React and D3 v5, projecting geographic data from the world-atlas TopoJSON dataset. The code uses d3.geoPath with a geoNaturalEarth1 projection to generate SVG paths for both the globe outline and individual country boundaries, with countries filled in light green and outlined in black.

SSaiSree0122

89% match

Loading thumbnail…

World Map

SSaiSree0122

89% match

Loading thumbnail…

World Map

This interactive world map visualizes the Earth’s countries using a natural Earth projection, displaying the globe’s sphere, graticules, and landmasses with custom styling. Built with React and D3 v6, the visualization loads TopoJSON data from the `world-atlas` package and processes it using `topojson`'s `feature` and `mesh` APIs to extract country boundaries and interiors. The `d3.geoNaturalEarth1` projection and `d3.geoPath` render all geographic elements as SVG paths, while CSS classes define teal and gray color schemes for a polished aesthetic.

Ee-ines

89% match

Loading thumbnail…

World Map

This visualization presents a world map using D3's geoNaturalEarth1 projection, rendering landmasses in teal with country borders highlighted and graticules overlaid on a light gray sphere. The data comes from the World Atlas TopoJSON dataset (countries-50m.json), processed with topojson’s feature and mesh functions. React manages the SVG output, while D3’s geoPath and geoGraticule construct the geometric paths. The map emphasizes clean, minimalist styling with muted colors, illustrating global geography through a responsive, interactive-free interface.

AAudrey

89% match

Loading thumbnail…

World Map

A world map rendered with D3’s geoNaturalEarth1 projection, drawn in SVG using d3.geoPath. The map displays landmasses filled with teal, country interiors as thin light-blue lines, and graticules in gray. Data comes from the TopoJSON World Atlas (countries-50m.json), processed via TopoJSON’s feature and mesh APIs. The React-based visualization shows a static globe with a subtle color scheme, prioritizing clean spatial form over interactivity.

WWolfgang

89% match

Loading thumbnail…

World Map

This world map visualizes country boundaries using Natural Earth projection, with countries filled in dark green, graticules in grey, and interior borders in dark grey. The visualization uses React for component structure, D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map rendering, and TopoJSON’s `feature` and `mesh` functions to parse world-atlas data. Hovering over a country reveals its name via an SVG `<title>` tooltip.

PPhronesis

88% match

Loading thumbnail…

World Map

This world map visualization displays countries and landmasses using an equal-area Natural Earth projection. The SVG rendering layers a graticule, sphere outline, land polygons, and interior boundaries in muted teal and gray tones. Built with React and D3 v7, it fetches world-atlas TopoJSON data, converts it with topojson’s `feature` and `mesh` functions, and projects geometries via `geoNaturalEarth1` and `geoPath`. The map highlights relationships between countries by drawing interior boundaries where adjacent nations meet.

JJenna Hamza

88% match

Loading thumbnail…

World Map

This visualization displays a world map using the Natural Earth projection, with countries rendered as filled shapes in teal against a light gray graticule and sphere background. The map shows landmasses and interior boundaries between adjacent countries. Built with React and D3 v5, the code uses `d3.geoNaturalEarth1()` for projection, `d3.geoPath()` to generate SVG paths, and TopoJSON’s `mesh()` to compute country interiors. Geographic data comes from the `world-atlas` package’s countries-50m.json file, and rendering is done entirely through SVG elements.

Rroc286

88% match