Skip to main content
SimilarExport ZIP
100%

world map w/ country names

✓ Published4🌍 Public
Zzach b.
Last edited Feb 21, 2021
Created on Nov 6, 2020
Forked from world map

This example displays a world map with country boundaries and names, rendered as SVG in a React component. It uses the `d3.geoPath` and `d3-geo-projection` `geoNaturalEarth1` projection to draw landmasses, graticules, and country borders, with country names shown via SVG `<title>` tooltips on hover. Data comes from the World Atlas TopoJSON, loaded with `d3.json` and processed using `topojson.feature` and `topojson.mesh`. The map is styled with CSS, including hover effects that fill individual countries.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

--
Datavis 2020 #29

MIT Licensed

Similar vizzes

Loading thumbnail…

world map projection

This example displays a world map with country boundaries, graticules, and interior borders rendered as SVG paths. The map uses a Natural Earth projection via `d3.geoNaturalEarth1` and draws geographic features with `d3.geoPath`. Data comes from the World Atlas TopoJSON, processed through `feature` and `mesh` from the TopoJSON library. React manages the component structure, while CSS styling defines the land, sphere, graticule, and interior stroke colors.

SSharanya1307
91% match
Loading thumbnail…

World Map - React, D3

This example displays a world map with country boundaries and graticules, rendered as an SVG. It uses a React component to load TopoJSON data from the World Atlas and employs D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for the visual output. The map distinguishes landmasses, graticule lines, and interior country borders with different colors.

NNelson M
91% match
Loading thumbnail…

World Map

This example displays a world map rendered with SVG, showing landmasses, country borders, graticules, and a sphere outline. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, with data loaded from the TopoJSON world-atlas dataset via `topojson.feature` and `topojson.mesh`. React manages the asynchronous data loading, and CSS styling separates land, interiors, graticules, and sphere appearances.

NNikita Toropov
91% match
Loading thumbnail…

World Map

This example renders a world map using D3’s geoNaturalEarth1 projection and geoPath to draw landmasses, graticules, and country interiors from TopoJSON data loaded via d3.json and processed with topojson.feature and topojson.mesh. The React component uses the useData hook to fetch and transform the world-atlas dataset, while SVG paths are styled with CSS for distinct land, sphere, and interior strokes. The visualization presents a clean, static geographic overview without interactivity.

SSong Tao Chen
90% match
Loading thumbnail…

World map

This example displays a world map using a natural Earth projection, rendering land masses, graticules, country borders, and the sphere outline as SVG paths. The visualization loads geographic data from the World Atlas TopoJSON using `d3.json` and converts it with TopoJSON’s `feature` and `mesh` utilities. React manages the fetched data through a custom `useData` hook, while the `Marks` component applies `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 to generate the map geometry. Styling via CSS distinguishes the land, sphere, interiors, and graticule layers.

Kkbrookshire420
90% match
Loading thumbnail…

world map

This example displays a world map rendered as an SVG using React and D3. It visualizes geographic country boundaries from the World Atlas TopoJSON dataset. The code uses `d3.json` to load the data, `topojson.feature` to convert it to GeoJSON, and renders the resulting features with a `<g className="marks">` group, though the map itself is not yet drawn. The visualization is styled with Poppins font and a clean, minimal layout.

Jjth500
90% match
Loading thumbnail…

World Map First Pass

This example displays a world map with country boundaries and graticules, rendered as an SVG using React and D3 v5. It uses the `geoNaturalEarth1` projection and `geoPath` to draw landmasses, interior borders, and a graticule grid, with the sphere outline shown in light gray. The data comes from the World Atlas TopoJSON file, processed via the `topojson` feature and mesh utilities, and styled with CSS classes for land, interiors, and graticules.

Ssophburke
90% match
Loading thumbnail…

World Map

This example displays a world map with country boundaries rendered as SVG paths on a Natural Earth projection. It visualizes land masses, country interiors, graticules, and the globe’s sphere using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3-geo. The data comes from the World Atlas TopoJSON, processed with `feature` and `mesh` from topojson to generate land polygons and interior boundaries. Styling applies distinct fills and strokes for each layer.

Nnghosh319
90% match