Skip to main content
SimilarExport ZIP
100%

Making World Map

✓ Published1🌍 Public
Zzakaria badri
Last edited Jun 16, 2020
Created on Jun 16, 2020
Forked from HTML Starter

This visualization displays a world map using a natural Earth projection, with countries rendered as light green polygons and the globe’s background as a light blue sphere. It loads GeoJSON from the VisionsCarto World Atlas, converts it into feature geometries with the `topojson` library, and projects each using `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output, built with React, appends paths for the sphere and each country, styling them via CSS classes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a World Map

This example shows how to construct a world map from GeoJSON and TopoJSON data using D3’s geographic projections. The visualization renders landmasses as filled green paths, with a blue sphere backdrop, graticule grid lines, and country borders outlined in light strokes. The code fetches country boundaries from the world-atlas dataset, converts TopoJSON features with `topojson.feature` and `topojson.mesh`, then projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. React manages the component state and SVG rendering.

ZZoe Ferencova
91% match
Loading thumbnail…

Let's make a Map!

This visualization renders a world map using the Natural Earth projection, displaying countries as light green polygons against a blue ocean sphere. The code loads GeoJSON data from the World Atlas TopoJSON file (110m resolution), converts it using the `feature` method from topojson, and draws the paths with `d3.geoPath` and `geoNaturalEarth1`. It demonstrates the classic D3 pattern of fetching external geospatial data, projecting it, and appending SVG paths to the canvas.

Aases1996
90% 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
90% match
Loading thumbnail…

World Map

This visualization renders a natural Earth projection world map using SVG paths. The map displays landmasses in teal with country borders drawn as interior mesh lines, set against a light gray sphere and graticule grid. Built with React and D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, it loads geographic data from World Atlas TopoJSON, converting it with `feature` and `mesh` to draw each country. The static composition highlights global geography with clean styling.

GGonzalo Alarcón Usui
90% 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
90% match
Loading thumbnail…

Lets make a map!

This example renders a world map using a natural Earth projection, displaying countries as light green filled regions with subtle black borders against a dark blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset and uses D3 v5’s `geoPath` and `geoNaturalEarth!` projection, along with the `topojson` library’s `feature` method to convert TopoJSON into GeoJSON. The SVG output is generated through a React setup, with the sphere drawn first and country boundaries appended dynamically after data loads.

Ggregosaure
90% match
Loading thumbnail…

world map

This visualization displays a world map using a natural Earth projection, with landmasses, country borders, graticules, and a sphere outline rendered in muted colors. The map is built with React and D3, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw geographic features. Country and land data come from the World Atlas TopoJSON file, processed with `feature` and `mesh` from TopoJSON. The SVG output is generated declaratively through React components, with each map element styled via CSS classes.

AAnthony Zornig
90% match
Loading thumbnail…

World_Map

This visualization shows a world map using the Natural Earth projection, with landmasses filled in a warm beige and an ocean-colored sphere background. The code loads geographic data from the world-atlas TopoJSON dataset and uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 to render SVG paths. TopoJSON’s `feature` and `mesh` utilities extract land polygons and country borders, which are drawn as separate path elements in React. The map also displays graticule lines and country boundary strokes, with styling defined in CSS.

SSUSHMA CHIRRA
90% match