Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published1🌍 Public
TtrwMK
Last edited Oct 25, 2022
Created on Oct 25, 2022

This world map visualization displays Earth’s landmasses in teal against a light gray sphere, with graticule lines and interior borders in subtle contrasting strokes. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to project features from the World Atlas TopoJSON dataset, while `geoGraticule` generates the coordinate grid. The `Marks` component renders SVG paths for the sphere, graticules, land, and country interiors, and the data is processed with the TopoJSON `feature` and `mesh` APIs.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map rendered as SVG paths, showing landmasses in teal with country borders in darker teal, overlaid on a graticule grid and pale sphere background. It uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to generate the geometric shapes, with TopoJSON `feature` and `mesh` extracting land and interior boundaries from the world-atlas dataset. The React component `Marks` maps each land feature to a path element, while the sphere and graticules are drawn first as base layers.

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

A world map displays Earth’s landmasses in teal and grey, with country borders drawn as interior lines. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geometric paths with `d3.geoPath`, including graticules and a sphere outline. Geographic data comes from the World Atlas TopoJSON file, processed with `feature` and `mesh` from the topojson library. React manages the component structure, while D3 handles the SVG path generation within a fixed 960×500 viewport.

KK3zter
94% match
Loading thumbnail…

World Map

This visualization displays a world map using an SVG projection, with landmasses filled in teal, graticules in light gray, and country borders drawn as interior lines. The map is rendered with React and D3 v5, using `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and `d3.geoGraticule` for the grid. Geographic data comes from the World Atlas TopoJSON file, which is loaded via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. A subtle sphere outline frames the map against a neutral background.

Vvmonney
94% match
Loading thumbnail…

World Map

This visualization displays a world map using a Natural Earth projection, with landmasses filled in teal against a light gray sphere and graticule lines. It renders country borders as interior mesh lines and includes a subtle stroke detail. The implementation uses React with d3.geoNaturalEarth1 and d3.geoPath to project and draw geographic features, while d3.json and topojson’s feature and mesh functions load and parse the world-atlas dataset from unpkg. The SVG output is styled via CSS classes for land, sphere, graticules, and interior boundaries.

Rrsulli4
94% match
Loading thumbnail…

World Map

This world map visualization displays global landmasses, country boundaries, and graticules using a Natural Earth projection. The land is filled with teal, while country interiors are outlined in green, and graticules appear in cyan over a light gray sphere. Built with React, the code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render the map, and topojson’s feature and mesh functions to process the World Atlas TopoJSON dataset. The SVG output loads from unpkg’s world-atlas@2.0.2 file.

RRudy Shayganfar
94% match