World Map

100%

✓ Published14🌍 Public

Last edited Mar 14, 2022

Created on Mar 9, 2022

This example displays an orthographic world map, highlighting landmasses in teal against a light gray sphere with graticules. The visualization uses a React front-end with D3's `geoOrthographic` and `geoPath` functions to project geographical data from a remote TopoJSON source (`world-atlas`). The `topojson` library's `feature` and `mesh` functions process the country boundaries and interior borders, rendered as SVG paths within a single view.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

World map

This example visualizes a world map with landmasses in teal, graticules in gray, and country interiors highlighted with a contrasting stroke. The map is rendered as an SVG using React components. The data is sourced from the world-atlas TopoJSON dataset, and the code utilizes d3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to generate the geographic shapes and grid lines. The `topojson` library's `feature` and `mesh` functions extract the land and interior boundaries from the topology. The visualization also includes a sphere background to frame the map.

BBenjamín Salas Sadler

94% match

Loading thumbnail…

World map

This example shows a world map rendered as an orthographic projection of landmasses and graticules, with country borders highlighted. It uses D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` to project and draw the sphere, graticule grid, and land features from a TopoJSON world-atlas dataset, while `topojson.feature` and `topojson.mesh` extract geometries and interior borders. React manages the component structure and data loading via a custom `useData` hook, with all shapes output as SVG paths.

FFrederick O'Brien

94% match

Loading thumbnail…

World Map

This example shows a world map rendered with landmasses in teal and country borders in a lighter teal, overlaid with graticules and a sphere outline. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3 to draw geographic features. TopoJSON data from the world-atlas package is loaded with `d3.json` and converted to GeoJSON using `feature` and `mesh`. React manages the component structure, and the map is rendered as SVG elements styled with CSS.

CCarlos Caballero

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

92% match

Loading thumbnail…

World Map

This example renders a world map using a natural Earth projection. It displays landmasses and interior borders in teal and gray against a light sphere, with graticules indicating latitude and longitude lines. The visualization loads GeoJSON topology from the world-atlas package and processes it with topojson’s `feature` and `mesh` functions. It uses d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs within a React component, drawing all paths as SVG.

PPadoSensei

92% match

Loading thumbnail…

World Map

This world map visualization displays global landmasses and interiors using a natural Earth projection, with graticule and sphere outlines for context. The example leverages React and D3 v7, specifically `d3.geoNaturalEarth1` for projection and `d3.geoPath` for rendering paths, while `topojson` features and meshes supply the geographic data. Land areas are filled in teal, with interior boundaries in a lighter shade, all rendered as SVG paths. The data originates from the World Atlas TopoJSON dataset.

JJun Suzuki

92% match

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

92% match

Loading thumbnail…

Worldmap

This map displays the world's landmasses filled in teal, with interiors outlined in silver, all set within a light gray sphere and graticule. It uses d3.geoNaturalEarth1 and d3.geoPath to project and render geographic features from the world-atlas TopoJSON source. The React application imports data via d3.json and topojson.feature to draw the geographic shapes as SVG paths.

DDaniel Zsido

92% match