World Map

100%

✓ Published1🌍 Public

Last edited Feb 24, 2022

Created on Feb 23, 2022

Forked from Line Chart – Working With Time

This world map visualization displays global landmasses and country boundaries using a stereographic projection. The map shows the sphere, graticules, and land features as SVG paths, with country interiors highlighted in a distinct color. The visualization uses d3.geoPath and d3.geoGraticule within a React framework, pulling geographic data from the world-atlas TopoJSON source. Land and interior features are rendered as styled path elements, with a muted color palette for the sphere and graticules.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset using[d3-time-format] (https://github.com/d3/d3-time-format)

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This world map visualization displays landmasses and country borders using a natural Earth projection with d3.geoPath and d3.geoGraticule. The SVG rendering, built with React, layers a light gray sphere, teal land fills, green interior boundaries, and cyan graticule lines. Data comes from the world-atlas TopoJSON dataset, processed through topojson.feature and topojson.mesh to extract land geometry and internal borders. The visualization emphasizes clean, stylized geographic outlines rather than thematic data encoding.

Mmclee933

94% match

Loading thumbnail…

World Map

This world map visualization presents global landmasses and country boundaries using a natural Earth projection. It displays the sphere, graticule grid, land areas in teal, and interior borders distinguishing countries. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render geographic features from TopoJSON data sourced from the world-atlas package. React manages the component structure, while SVG paths draw each geographic element with distinct CSS styling.

DDeborah Ong

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

93% match

Loading thumbnail…

World Map

A world map displays country boundaries and landmasses on a graticule grid within a natural Earth projection. The visualization uses React to render SVG paths generated by d3.geoPath, with geographic data from the world-atlas TopoJSON dataset. Land areas appear teal against light gray spheres, while interior borders are drawn as thin gray lines. The code employs d3.geoNaturalEarth1 for projection and d3.geoGraticule to generate the latitude-longitude grid.

OOlof Ollerstam

93% match

Loading thumbnail…

Map of the World

A world map displays landmasses and country interiors over a blue sphere with graticule lines. It uses d3.geoPath to project geographic features and topojson's mesh and feature functions to derive country boundaries from a World Atlas TopoJSON source. The visualization renders as an SVG within a React app, styling land and interior paths via CSS.

WWaseem Medhat

92% match

Loading thumbnail…

World Map

This example visualizes world country boundaries and landmasses using a natural Earth projection, rendered as SVG paths. It displays graticules and interior borders alongside a styled sphere, with land and water distinguished by teal and blue fills. The visualization uses React with D3 v5, specifically `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic projections. Data comes from the World Atlas TopoJSON, processed via `topojson.feature` and `topojson.mesh` to extract land polygons and country boundaries.

AAdriana Rodriguez Sanabria

92% match

Loading thumbnail…

World Map

This world map visualizes global landmasses and country boundaries using an Eckert III projection. It renders the sphere, graticules, and interior borders as SVG paths, with landmasses filled in purple and graticules in blue. The visualization is built with React, D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, and TopoJSON’s `feature` and `mesh` to process the world-atlas dataset.

Kkakumanusreya

92% match

Loading thumbnail…

World Map

A world map displays country boundaries as filled landmasses against a light sphere, with graticules and interior borders drawn in contrasting strokes. The visualization is built with React and D3 v5, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and render the SVG paths. Country and land geometry comes from the World Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. A muted teal and gray palette gives the map a polished, stylized appearance.

Mmarianamartins87

92% match