Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published1🌍 Public
11993-INDALKAR
Last edited Oct 31, 2021
Created on Oct 31, 2021
Forked from Time

This example renders a world map using the geoEqualEarth projection and geoPath to draw countries, graticules, and sphere outlines in SVG. It loads country boundaries from the world-atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract country polygons and interior borders. The visualization, built with React and D3 v5, fills countries in teal, with light gray graticule lines and a lighter sphere background.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map using an equal Earth projection, with each country rendered as a filled SVG path and the surrounding sphere shown in light gray. The visualization loads GeoJSON data derived from the World Atlas TopoJSON dataset and passes it through d3.geoPath with a d3.geoEqualEarth projection. Built with React and D3 v5, the map uses SVG elements for crisp, scalable rendering.

Tthe-1000th-summer
95% match
Loading thumbnail…

World Map

This example renders a world map using SVG, displaying country boundaries as paths. The visualization uses the D3 library's geoEqualEarth projection and geoPath to convert geographic data into SVG paths, with React managing the component state. The map draws a semi-transparent background sphere and country outlines in a teal color scheme. The data comes from the world-atlas TopoJSON file, which is fetched and converted to GeoJSON features using the topojson library.

NNika
95% match
Loading thumbnail…

World map

This visualization presents a world map using an equal-area Earth projection, rendered as an SVG with React. It displays country boundaries in teal against a light gray sphere, with graticules and interior lines in a subtle gray. The code employs D3's `geoEqualEarth`, `geoPath`, and `geoGraticule` to project and draw geographic features from the `world-atlas` TopoJSON dataset, while `topojson`’s `feature` and `mesh` functions prepare the country and interior geometries.

JJulia Hack
94% match
Loading thumbnail…

World Map

This example renders a world map from TopoJSON data using D3 v5 and React, drawing countries as filled paths on an SVG canvas. The visualization uses `geoEqualEarth` for the projection, `geoPath` to generate paths, and `geoGraticule` to display a graticule overlay, with a distinct red sphere background and blue landmasses. Country geometries are loaded from the world-atlas TopoJSON file and converted to GeoJSON via `feature()`. The React component hierarchy separates data loading (`useData`) from the presentational `Marks` component.

Ggayatrisridhar
93% match
Loading thumbnail…

My World Map

This example displays a world map using the geoEqualEarth projection, with landmasses, country borders, graticules, and a surrounding sphere. The visualization is built with React and D3 v5, using d3.geoPath to render geographic features from the world-atlas TopoJSON dataset. Land areas are filled in brown, interiors are stroked with a neutral color, and graticules appear in blue. The map is rendered as SVG, with data loaded and processed through d3.json and TopoJSON's feature and mesh methods.

Bbootshine2
93% match
Loading thumbnail…

My World Map

This example displays a world map using the geoEqualEarth projection, with landmasses, country borders, graticules, and a surrounding sphere. The visualization is built with React and D3 v5, using d3.geoPath to render geographic features from the world-atlas TopoJSON dataset. Land areas are filled in brown, interiors are stroked with a neutral color, and graticules appear in blue. The map is rendered as SVG, with data loaded and processed through d3.json and TopoJSON's feature and mesh methods.

Bbootshine2
93% match
Loading thumbnail…

World Map

This visualization shows a world map rendered with D3’s geoEqualEarth projection, displaying country boundaries as blue filled paths over a light gray sphere. The map draws from the world-atlas TopoJSON dataset, which the code loads via `d3.json` and converts using `topojson.feature` and `topojson.mesh`. React renders the SVG paths, with the `d3.geoPath` generator computing the projected shapes, and interior borders highlighted in a contrasting stroke.

BBetty
93% 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
93% match