Skip to main content
SimilarExport ZIP
100%

Simple World Map

✓ Published35🌍 Public
CCurran Kelleher
Last edited Feb 26, 2024
Created on Mar 11, 2023

A simple world map renders country outlines as vector paths. The visualization fetches TopoJSON data from the visionscarto world atlas, converts it to GeoJSON features with `topojson-client`, and draws the map using `d3.geoPath` with the Natural Earth projection. A graticule and map outline are also rendered, with countries stroked in white for visual separation.

AI-generated description

A basic world map.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map Simplified

This example shows a simplified world map with country outlines, a graticule grid, and a bold outline border, all rendered as vector paths. It loads GeoJSON data from the visionscarto-world-atlas package, converts it with `topojson-client`, and projects it using the `d3.geoNaturalEarth1` projection and `d3.geoPath` for drawing. The map updates asynchronously, fetching data once and re-rendering the SVG with each state change. The code leverages D3’s `select` and `join` methods for declarative SVG updates.

Oownerofthesoul0000@gmail.com
88% match
Loading thumbnail…

Fork of World Map Simple

This example displays a simple world map rendered with an equirectangular-like Natural Earth projection, including graticule and outline overlays. It uses d3.geoNaturalEarth1 and d3.geoPath to draw country boundaries as SVG paths, with data fetched from the visionscarto-world-atlas TopoJSON file and converted via topojson-client. The visualization fills the browser window and updates reactively through a state-driven render loop.

Yyaswanthsen
88% match
Loading thumbnail…

World Map

This visualization renders a static world map using the Natural Earth projection, displaying country boundaries with white strokes, a gray graticule grid, and a bold black outline. It loads TopoJSON data from the `visionscarto-world-atlas` package and converts it to GeoJSON via `topojson.feature`. The rendering pipeline uses `d3-geo` functions including `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, with React managing the application shell and D3 selections updating the SVG elements.

EEdward Chung
87% match
Loading thumbnail…

hhh Map Simple

This example renders a simplified world map using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. It displays country boundaries as white-stroked paths, along with graticule and outline overlays, on a full-window SVG. The geographic data is fetched from the `visionscarto-world-atlas` TopoJSON source and converted to GeoJSON with `topojson.feature`. React manages the state, triggering a redraw when the data loads.

DDeclan Naughton
87% match
Loading thumbnail…

Fork of World Map Simple

This example displays a basic world map using the Natural Earth projection, with country boundaries rendered as filled paths and graticule lines overlaid. It loads GeoJSON data from the Visionscarto World Atlas via `topojson-client` and renders the map using `d3.geoPath` with the `geoNaturalEarth1` projection. The visualization is built with React and D3, featuring an SVG canvas that adapts to the window size.

Llfting96
87% match
Loading thumbnail…

Fork of World Map Simple

This example shows a basic interactive world map using D3.js and TopoJSON. It renders country outlines, a graticule grid, and a map outline using d3.geoPath with a geoNaturalEarth1 projection. Country boundaries are loaded from the visionscarto-world-atlas TopoJSON dataset via fetch and converted to GeoJSON with topojson.feature. The React-based rendering uses a small state machine to handle asynchronous data loading, then calls the map function to draw paths into an SVG.

Zzenoalive
87% match
Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, including graticule and country outlines. It loads GeoJSON data from the `visionscarto-world-atlas` package via `topojson-client`, then draws each country as a path. The visualization fetches the atlas asynchronously and re-renders once data arrives, with the SVG sized to the full viewport.

TTatyana Milanova
86% match
Loading thumbnail…

World Map

This visualization displays a world map with landmasses, country boundaries, and graticule lines, using geographic data from the world-atlas TopoJSON source. The React-based application loads topology data via `useData` and renders SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection. Country interiors and borders are generated through TopoJSON’s `feature` and `mesh` functions, while the sphere outline, graticule grid, and filled land areas are styled with distinct CSS classes. The map updates reactively as data loads, showing a clean, minimal aesthetic.

SSabin Bhandari
86% match