World Map II

100%

✓ Published1🌍 Public

Last edited Mar 29, 2021

Created on Mar 29, 2021

A world map displays country boundaries and graticules from World Atlas TopoJSON, with city populations from Simplemaps overlaid as scaled circles. A dropdown menu switches between six geographic projections. The visualization uses React with d3.geoPath for rendering geographic features, d3.scaleSqrt for circle sizing, and d3-geo-projection functions like geoEqualEarth and geoOrthographic. SVG renders the map, with the sphere, landmasses, interiors, and graticules drawn as separate path elements.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules. Additionally loads city populations from Simplemaps: World Cities Database and displays as circles on the map.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This interactive world map visualizes geographic landmasses and interior boundaries using a variety of map projections. Users choose from six projections via a dropdown menu, including Equal Earth, Aitoff, and Orthographic. The visualization loads world-atlas GeoJSON data, and renders the sphere, graticules, and land paths using D3’s `geoPath` and `geoGraticule`. React manages the UI state and rendering, while the `topojson` library processes the topology for interior borders.

Llaurajchang

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

90% match

Loading thumbnail…

World Map

This map uses D3.js geo utilities (geoEqualEarth, geoPath, geoGraticule) within a React component to render country borders from the World Atlas TopoJSON. The SVG view shows landmasses in cyan, ocean in gray, and a graticule for reference. The code projects sphere geometry, graticules, and TopoJSON features, with interiors drawn as stroked paths, creating a polished geographic visualization.

KKahlaoui-Ismail

90% match

Loading thumbnail…

World Map

A world map displays country and land-mass boundaries on an equirectangular projection, filled with a pale blue and accented by graticule lines and interior borders. Built with React and D3 v5, it loads World Atlas TopoJSON data via `d3.json`, processes it with `topojson.feature` and `topojson.mesh`, and renders SVG paths using `d3.geoPath` and `geoEquirectangular`. The visualization also draws a sphere outline and graticules for a polished, cartographic look.

Ssmile2git

89% match

Loading thumbnail…

World Map

A world map visualization displays global cities as semi-transparent circles sized by population, overlaid on a natural Earth projection. The map renders landmasses, country interiors, and graticules using `d3.geoNaturalEarth1` and `d3.geoPath`. City coordinates and population data load via `d3.csv` from a world cities dataset, while geographic boundaries come from TopoJSON world-atlas data. React manages the asynchronous data loading and SVG rendering, with a square-root scale mapping population values to circle radii.

Uuplusv

89% match

Loading thumbnail…

world Map2

This interactive world map uses D3.js geographic projections to render Earth's landmasses, graticules, and a semi-transparent sphere overlay. The application fetches topology data from the `world-atlas` package and processes it through `topojson`'s `feature` and `mesh` functions. The D3 `geoNaturalEarth1` projection defines the map's coordinate system, while `geoPath` converts geographic features into SVG paths. React handles the user interface, and CSS styling differentiates the landmasses in teal, the graticule lines in gray, and the interiors in a contrasting cyan color.

Ddumbdataguy@gmail.com

89% match

Loading thumbnail…

World Map

This visualization displays a world map with the population of major cities represented by proportional circles. Circles are sized using a square root scale based on each city’s population, overlaid on a gray landmass with graticules and interior borders. Built with React and D3 v5, it uses `geoEqualEarth`, `geoPath`, and `geoGraticule` for the map projection, while city data comes from a CSV file and world geography from TopoJSON.

33ssalunke

89% match

Loading thumbnail…

World Map v2

This example displays a world map with cities plotted as points, using a natural Earth projection to render country boundaries, graticules, and a sphere outline. The visualization loads geographic data from a TopoJSON world atlas and city coordinates from a CSV file, then projects them using d3.geoNaturalEarth1 and d3.geoPath. React manages the component state and rendering, while d3.csv and d3.json fetch the datasets. The map is drawn entirely in SVG, with each city represented as a small circle positioned by its longitude and latitude.

JJohn Lewis

88% match