Making a World Map

100%

Making a World Map

✓ Published1🌍 Public

Last edited Mar 9, 2023

Created on Mar 8, 2023

This example shows how to construct a world map from GeoJSON and TopoJSON data using D3’s geographic projections. The visualization renders landmasses as filled green paths, with a blue sphere backdrop, graticule grid lines, and country borders outlined in light strokes. The code fetches country boundaries from the world-atlas dataset, converts TopoJSON features with `topojson.feature` and `topojson.mesh`, then projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. React manages the component state and SVG rendering.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example renders a world map using a natural Earth projection, displaying countries as filled polygons, along with graticules, interior borders, and a sphere outline. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` and `mesh` functions from topojson. The map is drawn with `d3.geoPath` and `d3.geoNaturalEarth1`, while React manages the component structure and SVG rendering. Styling is applied through CSS classes, including a teal fill for landmasses and gray graticules.

KKai Stewart

92% match

Loading thumbnail…

Making a world map

This example visualizes world geography by rendering country boundaries, graticules, and a globe sphere using geographic projections. The map displays landmasses in teal with highlighted interior borders, set against a light gray sphere and graticule grid. The code uses `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule` to project and draw geographic features in SVG. It fetches TopoJSON data from the `world-atlas` package, converting it to GeoJSON with `topojson.feature` and `topojson.mesh`. React manages the component state and rendering, with styles defined in CSS.

EEhtisham UL Hassan

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

92% match

Loading thumbnail…

World Map

This example renders a world map using D3’s `geoNaturalEarth1` projection and `geoPath` to draw SVG paths for landmasses, country borders, and the sphere outline. Data comes from the World Atlas TopoJSON file via `topojson.feature` and `topojson.mesh`, loaded asynchronously with `json()` into React state. The map fills land in teal, strokes interior borders in a lighter shade, and uses a light gray background for the ocean.

JJanet Li

91% match

Loading thumbnail…

Lets make a map!

This example renders a world map using a natural Earth projection, displaying countries as light green filled regions with subtle black borders against a dark blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset and uses D3 v5’s `geoPath` and `geoNaturalEarth!` projection, along with the `topojson` library’s `feature` method to convert TopoJSON into GeoJSON. The SVG output is generated through a React setup, with the sphere drawn first and country boundaries appended dynamically after data loads.

Ggregosaure

91% match

Loading thumbnail…

World Map

This example renders a world map using the Natural Earth projection, displaying country boundaries and graticule lines. The visualization shows landmasses filled with a teal color, country interiors outlined, and the sphere background in light gray. The code uses React for component structure and d3-geo functions like `geoNaturalEarth1` and `geoPath` to project and draw geographic features. TopoJSON data from the world-atlas package is loaded and converted to GeoJSON using `feature` and `mesh`.

Jjiro2017

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered with an equal-area natural Earth projection, with each country filled in light green and outlined with subtle black strokes against a blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the `feature` function from TopoJSON. The map is drawn as SVG paths generated with D3's `geoPath` and `geoNaturalEarth1` projection APIs, demonstrating a minimal React-free D3 mapping workflow.

Fforcox43

91% match

Loading thumbnail…

World map

This example shows a world map rendered as an orthographic projection of landmasses and graticules, with country borders highlighted. It uses D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` to project and draw the sphere, graticule grid, and land features from a TopoJSON world-atlas dataset, while `topojson.feature` and `topojson.mesh` extract geometries and interior borders. React manages the component structure and data loading via a custom `useData` hook, with all shapes output as SVG paths.

FFrederick O'Brien

91% match