Skip to main content
SimilarExport ZIP
100%

My World Map

✓ Published2🌍 Public
Bbootshine2
Last edited Sep 26, 2019
Created on Sep 26, 2019

This example displays a world map using the geoEqualEarth projection, with landmasses, country borders, graticules, and a surrounding sphere. The visualization is built with React and D3 v5, using d3.geoPath to render geographic features from the world-atlas TopoJSON dataset. Land areas are filled in brown, interiors are stroked with a neutral color, and graticules appear in blue. The map is rendered as SVG, with data loaded and processed through d3.json and TopoJSON's feature and mesh methods.

AI-generated description

A geoEqualEarth representation from geoJSON and topoJSON (https://unpkg.com/world-atlas@2.0.2/countries-50m.json).

MIT Licensed

Similar vizzes

Loading thumbnail…

My World Map

This example displays a world map using the geoEqualEarth projection, with landmasses, country borders, graticules, and a surrounding sphere. The visualization is built with React and D3 v5, using d3.geoPath to render geographic features from the world-atlas TopoJSON dataset. Land areas are filled in brown, interiors are stroked with a neutral color, and graticules appear in blue. The map is rendered as SVG, with data loaded and processed through d3.json and TopoJSON's feature and mesh methods.

Bbootshine2
100% match
Loading thumbnail…

World Map

This example renders a world map using the geoEqualEarth projection and geoPath to draw countries, graticules, and sphere outlines in SVG. It loads country boundaries from the world-atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract country polygons and interior borders. The visualization, built with React and D3 v5, fills countries in teal, with light gray graticule lines and a lighter sphere background.

11993-INDALKAR
93% match
Loading thumbnail…

World Map

This example visualizes world geography using an equal-area natural Earth projection, displaying landmasses in teal against a gray sphere with subtle graticule lines. The map also renders interior boundaries between countries as fine strokes. Built with React and D3, it pulls GeoJSON topology from the `world-atlas` package, applies D3’s `geoNaturalEarth1` projection and `geoPath` for SVG rendering, and uses `topojson.feature` and `topojson.mesh` to prepare the land and interior line data.

Jjbruzzo
93% match
Loading thumbnail…

World Map

This example displays a world map using an equal Earth projection, with each country rendered as a filled SVG path and the surrounding sphere shown in light gray. The visualization loads GeoJSON data derived from the World Atlas TopoJSON dataset and passes it through d3.geoPath with a d3.geoEqualEarth projection. Built with React and D3 v5, the map uses SVG elements for crisp, scalable rendering.

Tthe-1000th-summer
92% match
Loading thumbnail…

World Map

This world map visualization displays global landmasses and country boundaries using an equal Earth projection. The React app loads geographic data from the world-atlas TopoJSON dataset via d3.json, then converts it to GeoJSON features using topojson’s feature and mesh methods. SVG rendering with d3.geoPath and d3.geoEqualEarth draws the sphere, graticules, land areas in teal, and interior borders in a lighter shade, with the projection computed through d3.geoGraticule.

Vvangenned
92% match
Loading thumbnail…

World Map II

This example renders an equal-Earth projection world map using React and D3 v5. The visualization displays landmasses in teal, country borders as thin strokes, graticules, and a light gray sphere background. It loads GeoJSON data from the world-atlas TopoJSON source, converting it with `topojson.feature` and `topojson.mesh`. The SVG paths are generated with `d3.geoPath` and `d3.geoEqualEarth`, while `geoGraticule` creates the grid overlay.

AAndre J Denais
92% match
Loading thumbnail…

World map

This visualization presents a world map using an equal-area Earth projection, rendered as an SVG with React. It displays country boundaries in teal against a light gray sphere, with graticules and interior lines in a subtle gray. The code employs D3's `geoEqualEarth`, `geoPath`, and `geoGraticule` to project and draw geographic features from the `world-atlas` TopoJSON dataset, while `topojson`’s `feature` and `mesh` functions prepare the country and interior geometries.

JJulia Hack
91% match
Loading thumbnail…

Making a world map

This example visualizes world geography by rendering country boundaries, graticules, and a globe sphere using geographic projections. The map displays landmasses in teal with highlighted interior borders, set against a light gray sphere and graticule grid. The code uses `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule` to project and draw geographic features in SVG. It fetches TopoJSON data from the `world-atlas` package, converting it to GeoJSON with `topojson.feature` and `topojson.mesh`. React manages the component state and rendering, with styles defined in CSS.

EEhtisham UL Hassan
91% match