100%

react-d3-world-map

✓ Published0🌍 Public

Last edited Jun 24, 2022

Created on Jun 24, 2022

This example displays a world map using React and D3, rendering countries and their interiors as SVG paths with a teal fill and red boundary strokes. It uses the `geoEqualEarth` projection and `geoPath` from D3 to generate shapes, while loading geographic data from the world-atlas TopoJSON dataset via the `json` and `feature`/`mesh` functions. The visualization is built with React components, with the map embedded in a fixed-size SVG viewport.

AI-generated description

A scatter plot of The Iris Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

World map with React & D3

This example displays a world map rendered as an SVG using React and D3 v5. The map shows country boundaries and a background sphere, styled with a teal fill and light gray strokes. It loads geographic data from a TopoJSON file via the `world-atlas` package, converting it to GeoJSON with topojson’s `feature` function. The projection and path generation rely on `d3.geoEqualEarth` and `d3.geoPath`, while React components manage the rendering and data loading through a custom `useData` hook.

Bbassra

93% match

Loading thumbnail…

World Map with React & D3

This example renders a stylized world map using React and D3 v7, displaying landmasses, graticules, and country interiors in a warm color palette. It uses the `d3.geoEqualEarth` projection with `d3.geoPath` to draw SVG paths for geographic features, while country boundaries come from a TopoJSON world atlas (countries-50m.json) processed via `topojson.feature` and `topojson.mesh`. The visualization appears centered with interactive loading states managed through React hooks.

MManon ROMAIN

92% 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

92% 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

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

91% 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

91% match

Loading thumbnail…

map

This example displays a world map using the GeoJSON country boundaries from the World Atlas TopoJSON dataset. The map is rendered as SVG paths via `d3.geoEqualEarth` and `d3.geoPath`, with each country filled in teal and outlined in light gray, while a separate sphere path provides a neutral background. It uses React for component structure, with data loaded through D3’s `json` method and converted from TopoJSON to GeoJSON using the `feature` function.

NNart Williamson

91% match

Loading thumbnail…

react d3 world map

This example renders a natural Earth projection world map using React and D3 v7. It displays landmasses in teal, country borders as interior lines, graticules, and a blue sphere background, all drawn as SVG paths via `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. Geographic data comes from the World Atlas TopoJSON dataset, processed with TopoJSON’s `feature` and `mesh` functions. The React component loads the data asynchronously and conditionally renders the map once available.

MMalcolm Mead

91% match