World Map

100%

✓ Published0🌍 Public

Last edited Mar 8, 2021

Created on Mar 8, 2021

This interactive world map visualizes global landmasses and country borders using a natural Earth projection. The visualization renders a sphere, graticule grid, land areas in teal, and interior boundaries in a lighter teal stroke. Built with React and D3 v5, it uses the `geoNaturalEarth1` and `geoPath` APIs to project and draw geographic features, while TopoJSON converts the world-atlas dataset into GeoJSON features and meshes. Styling is applied via CSS classes on SVG path elements.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This world map displays global landmasses and country borders using a natural Earth projection. Built with React and D3 v7, it renders SVG paths via `d3.geoPath` and `geoNaturalEarth1`, overlaying a graticule grid and sphere outline. The visualization loads GeoJSON from the world-atlas TopoJSON dataset, converting it with the `topojson` library’s `feature` and `mesh` functions. Land areas are filled in teal, with interiors highlighted by a distinct stroke color.

Jjackcaldwellnichols

96% match

Loading thumbnail…

World Map

This interactive world map visualizes global landmasses and country boundaries using a natural Earth projection. Land areas are filled in teal, while graticules and interior borders are rendered as subtle gray and blue strokes. The visualization loads geospatial data from the world-atlas TopoJSON dataset, processes it with the `topojson` library’s `feature` and `mesh` functions, and renders the map as SVG paths using D3’s `geoPath`, `geoNaturalEarth1`, and `geoGraticule`. React manages the interface, updating the scene once the data finishes loading.

HHarabi Adem

96% match

Loading thumbnail…

World Map

This world map visualization displays global landmasses and country boundaries using a natural Earth projection. The map renders land areas in teal, country interiors in a lighter stroke, and graticules as thin gray lines over a light sphere background. Built with React and d3-geo, the visualization uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw features. Geographic data comes from the world-atlas TopoJSON dataset, processed with `topojson.feature` and `topojson.mesh` for land polygons and country borders.

DDanier

95% match

Loading thumbnail…

World Map

A world map visualization displays country borders and landmasses using a Natural Earth projection. The map renders land areas in teal, interior borders in a lighter stroke, and includes graticules and a sphere outline for geographic context. Built with React and D3 v5, it uses `d3.geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project shapes, while TopoJSON processes the world-atlas dataset to extract land features and country boundaries. The SVG output updates asynchronously after loading the geographic data.

Cchamce

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

95% match

Loading thumbnail…

World Map

This interactive world map uses a natural Earth projection to display global landmasses, countries, and graticule lines. The visualization renders geographic features using d3.geoPath and geoNaturalEarth1, with data sourced from the world-atlas package. Land areas appear in teal, the sphere background in light gray, and country interiors are outlined with a distinct stroke. The example demonstrates how to combine React, D3, and TopoJSON to create a stylized SVG world map.

KKazushige Okuma

95% match

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection, with landmasses rendered in teal against a light gray sphere and graticule grid lines. The map also highlights country borders through interior mesh strokes. Built with React and D3 v7, the code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to project and draw geographic features. TopoJSON data from the world-atlas package is loaded and processed with topojson.feature and topojson.mesh to extract land polygons and interior boundaries.

Aahora

95% match

Loading thumbnail…

World Map

This world map uses a Natural Earth projection to display global landmasses and country borders. The visualization layers graticules, a sphere outline, land areas in teal, and interior boundary lines, all rendered as SVG paths. Built with React and d3-geo, it loads TopoJSON data from the World Atlas dataset, using d3.geoNaturalEarth1 and d3.geoPath to project features, while topojson.mesh draws country borders.

CCodeDuckie99

95% match