World Map viz

100%

✓ Published0🌍 Public

Last edited Nov 3, 2021

Created on Nov 3, 2021

This visualization displays the world’s landmasses in teal on a light gray natural Earth projection, with white borders separating countries. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and render SVG paths from TopoJSON data loaded from the world-atlas package. The `topojson.feature` and `topojson.mesh` APIs extract land polygons and country boundaries, while distinct CSS classes style the sphere, land, and interior strokes.

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

World Map

This visualization displays a natural Earth projection of the world map, showing land masses in teal, graticule lines, and country borders. It uses React with D3 v5's geoNaturalEarth1 projection and geoPath to render SVG paths from TopoJSON data loaded from the world-atlas dataset. The code separates land features from interior boundaries using topojson's feature and mesh functions, with distinct CSS styling applied to spheres, graticules, land, and interior paths.

GGayan Priyadarshana

94% match

Loading thumbnail…

World map

This visualization presents a world map with landmasses filled in teal, displayed on a light gray sphere with subtle graticule lines, and highlighted country borders. It is constructed with React, using d3’s `geoNaturalEarth1` projection and `geoPath` to draw the geographic features. The data comes from a TopoJSON file loaded from the world-atlas package, processed with the topojson `feature` and `mesh` functions. The map is rendered as an SVG, with styles defined in CSS for the land, sphere, and graticules.

MmohitPassan

94% match

Loading thumbnail…

World Map

This visualization shows a world map with landmasses in teal, graticules, and country interiors outlined in a lighter shade. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render geographic features. The data is loaded from the World Atlas TopoJSON file using `d3.json` and processed with `topojson.feature` and `topojson.mesh` to distinguish land from country borders. Render is done with React in SVG, applying distinct CSS classes for land, sphere, graticules, and interiors.

TTousifAhamed

94% match

Loading thumbnail…

World Map

This map visualizes world landmasses and country borders using a Natural Earth projection. The React-based application loads GeoJSON data from the World Atlas TopoJSON file, converting it with `topojson.feature` and `topojson.mesh`. Using D3’s `geoNaturalEarth1` projection and `geoPath`, the SVG rendering displays land in teal, graticules in light gray, and country boundaries with a subtle stroke. The sphere outline and graticule grid provide geographic context, while the Poppins font styles the interface.

MMario Ibarra

94% match

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

94% match

Loading thumbnail…

World Map

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.

CCees Klap

94% match

Loading thumbnail…

World Map

This world map visualization uses a Natural Earth projection to display global landmasses and country boundaries, rendered as an SVG with D3's geoPath and geoNaturalEarth1 functions. The map features a light gray sphere background with teal land masses, thin gray country borders, and white graticule lines showing latitude and longitude. Data comes from the world-atlas TopoJSON dataset, processed through the topojson library's feature and mesh functions to extract land polygons and country interiors, while the React application manages state and renders the interactive visualization.

LLento Manickathan

94% match