Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published6🌍 Public
RRavi Teja Bonam
Last edited Apr 5, 2022
Created on Apr 4, 2022
Forked from HTML Starter

This example displays a world map with green landmasses, black country borders, and an aqua ocean rendered as SVG. It uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw geographic features, with `topojson.feature` extracting country polygons from a world-atlas TopoJSON source. The code also appends a sphere path to outline the globe, with styling controlled by CSS classes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map rendered with SVG, showing landmasses, country borders, graticules, and a sphere outline. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, with data loaded from the TopoJSON world-atlas dataset via `topojson.feature` and `topojson.mesh`. React manages the asynchronous data loading, and CSS styling separates land, interiors, graticules, and sphere appearances.

NNikita Toropov
94% match
Loading thumbnail…

World Map

This example presents a world map rendered as SVG, showing continents as filled green shapes against a light gray sphere, with graticule lines and country borders drawn in subtle gray and teal strokes. The map uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw geographic features, while `topojson` and the `json` API load and convert the World Atlas TopoJSON data. All visual elements are styled via CSS classes within the React-based rendering.

OOleg Zhernovoy
94% match
Loading thumbnail…

World Map

This example shows a world map rendered with a Natural Earth projection, displaying landmasses in teal with graticule lines and country borders overlaid. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from the world-atlas TopoJSON dataset via `d3.json` and processed through `topojson.feature` and `topojson.mesh`. A React component orchestrates the visualization, applying CSS styling for the sphere, land, and boundary strokes.

AAmir
94% match
Loading thumbnail…

World Map

This example displays a natural Earth projection of the world, rendering land masses in teal with graticule lines and country borders overlaid on a light gray sphere. Using React and D3 v7, it applies `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw the map, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from a World Atlas TopoJSON file. The SVG output includes distinct paths for the sphere, graticules, land, and borders, with styling applied via CSS classes.

SSerind Joshua McCue
94% match
Loading thumbnail…

World Map

This example displays a world map with country boundaries rendered as SVG paths on a Natural Earth projection. It visualizes land masses, country interiors, graticules, and the globe’s sphere using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3-geo. The data comes from the World Atlas TopoJSON, processed with `feature` and `mesh` from topojson to generate land polygons and interior boundaries. Styling applies distinct fills and strokes for each layer.

Nnghosh319
94% match
Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, with graticules and country borders drawn as SVG paths. The visualization colors land masses in teal, uses a light sphere background, and highlights internal country boundaries while omitting external ones. Built with React and D3 v6, the code leverages `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for projection and path generation, while TopoJSON's `feature` and `mesh` methods process the world-atlas dataset for land and interior boundaries.

TTaweewat Somboonpanyakul
94% match
Loading thumbnail…

World Map

This example renders a world map using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. It displays land masses in teal, country borders as interior lines, graticules, and a light-gray sphere background. The SVG is built with React, while D3’s `geoGraticule` generates the latitude/longitude grid and TopoJSON’s `feature` and `mesh` methods extract geometries from the world-atlas dataset.

MMorgan Worrell
93% match
Loading thumbnail…

World Map

This example renders a world map using D3’s `geoNaturalEarth1` projection and `geoPath` to draw SVG paths for landmasses, country borders, and the sphere outline. Data comes from the World Atlas TopoJSON file via `topojson.feature` and `topojson.mesh`, loaded asynchronously with `json()` into React state. The map fills land in teal, strokes interior borders in a lighter shade, and uses a light gray background for the ocean.

JJanet Li
93% match