Skip to main content
SimilarExport ZIP
100%

World map

✓ Published1🌍 Public
Rrajamrit-singh
Last edited Mar 22, 2023
Created on Mar 18, 2023

This example visualizes the countries of the world as colored polygons on a map. The visualization uses React to render SVG elements, with D3.js utilities for geographic projections and path generation. The code loads GeoJSON topology data from the `world-atlas` package, converts it into features using `topojson`, and projects them onto a map using `d3.geoEqualEarth` or `d3.geoNaturalEarth1`. The `geoPath` function creates the SVG paths for each country, which are filled with a teal color.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

World Map

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.

11993-INDALKAR
91% match
Loading thumbnail…

World maping

This example displays a world map rendered as an SVG using React and D3. It shows country boundaries via a spherical equal-earth projection, with land areas filled in teal and the surrounding sphere in light gray. The visualization loads GeoJSON data from the World Atlas TopoJSON file, converts it using topojson’s `feature` method, and draws the paths with `d3.geoPath`. The map is static, with no interaction or animation.

Ppatasky
90% match
Loading thumbnail…

World Map

This example displays an interactive world map rendered as an SVG using React. The visualization shows country boundaries and interior borders, with each country filled in teal and internal administrative divisions outlined in gray, all projected using a D3 equal Earth projection (`geoEqualEarth`) and drawn with `geoPath`. The map data comes from the world-atlas TopoJSON file, processed through `feature` and `mesh` from TopoJSON. The spherical background and clear styling make the geographic layout immediately readable.

Aadewole-top
90% match
Loading thumbnail…

World Map

This example visualizes world countries with a natural Earth projection, displaying landmasses in teal, graticules as light gray lines, and country borders in a darker teal. The SVG rendering uses React state to load geographic data from the World Atlas TopoJSON file via `json` and `feature`/`mesh` from TopoJSON, then draws the sphere, graticule, land polygons, and interior borders with `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3.

Yyejichun@naver.com
90% 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
90% match
Loading thumbnail…

World map

This world map visualization displays countries and their borders using an equal Earth projection, rendered as an SVG with distinct fills for land, sphere, and interior boundaries. It loads geographic data from the World Atlas TopoJSON file, converting it with the `feature` and `mesh` functions from TopoJSON. The React-based component uses D3 v5's `geoEqualEarth` and `geoPath` to project and draw paths, with a red stroke highlighting country interiors. The visualization loads asynchronously via the `useData` hook and presents a clean, color-coded global view.

JJoakim Warholm
90% match
Loading thumbnail…

World map

This example displays a world map using an equal-area natural Earth projection. The map visualizes country landmasses in a teal color, with interior borders in a lighter tone and graticule lines representing the coordinate grid. The visualization is built with React and renders SVG paths generated by D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions, using TopoJSON data from the world-atlas package to derive land and interior boundaries.

Aazharahmad0
90% match