Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
Aalexislanz
Last edited Aug 7, 2021
Created on Aug 7, 2021
Forked from React Starter

This example displays a world map with countries rendered as interactive SVG paths that turn grey on hover. It loads GeoJSON data from the World Atlas TopoJSON file using d3.json, converts it to features with topojson.feature, and projects the map with d3.geoEqualEarth and d3.geoPath. The React component uses d3.fitSize to fit the map to a 960×500 viewport, while the useData hook asynchronously fetches and transforms the data.

AI-generated description

An application to display a world map, using d3 and React.

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

World Map

This example displays an interactive world map rendered with SVG, showing landmasses, country borders, graticules, and the Earth’s sphere. It uses a React component to load geographic data from the world-atlas TopoJSON source via `d3.json`, then converts it to GeoJSON with `topojson.feature` and `topojson.mesh`. The map is drawn using `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule`, with CSS styling for the land, interior boundaries, and graticule paths.

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