Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published2🌍 Public
TThomas Cormican
Last edited Jan 9, 2022
Created on Jan 9, 2022
Forked from Working with Time

This example displays a world map using the Natural Earth projection, rendered as SVG paths. It shows landmasses filled with teal, country interiors outlined with a lighter stroke, graticules, and the globe’s sphere. The visualization loads geographic data from the world-atlas TopoJSON file, converting it to GeoJSON with `topojson.feature` and `topojson.mesh`. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.geoGraticule` for grid lines within a React framework.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example shows a world map rendered with a Natural Earth projection, displaying landmasses in teal with graticule lines and country borders overlaid. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from the world-atlas TopoJSON dataset via `d3.json` and processed through `topojson.feature` and `topojson.mesh`. A React component orchestrates the visualization, applying CSS styling for the sphere, land, and boundary strokes.

AAmir
96% match
Loading thumbnail…

World Map

This example presents a world map rendered as an SVG using a Natural Earth projection. Landmasses are filled in teal, country borders are drawn as interior mesh lines, and graticules overlay the sphere for geographic reference. The visualization loads topological data from the world-atlas package via `d3.json` and `topojson`, then converts it into GeoJSON features using `feature` and `mesh`. React manages the component lifecycle, while `d3.geoPath` and `geoNaturalEarth1` handle the projection and path generation for all map elements.

LLaura Johnson
95% match
Loading thumbnail…

World map

This example displays a world map using a Natural Earth projection, showing landmasses in teal, graticules in gray, and country boundaries as lighter strokes. The visualization renders geographic data from the world-atlas TopoJSON dataset using React and D3 v6, with `d3.geoNaturalEarth1` and `d3.geoPath` projecting the features. The map fills the browser window and is drawn entirely as SVG paths, with a light gray sphere background and an italic Poppins font for the loading message.

BbeauMarko
95% match
Loading thumbnail…

World map

This example displays a world map using the Natural Earth projection, rendered as a static SVG. The visualization presents landmasses in a teal color over a light gray sphere, with graticule lines and interior boundaries drawn in contrasting strokes. Built with React and D3’s geoNaturalEarth1, geoPath, and geoGraticule functions, it layers the sphere, graticules, land features, and interior meshes. The data is sourced from the world-atlas TopoJSON, processed using the topojson library’s feature and mesh functions.

AAlex Stulov
95% match
Loading thumbnail…

World Map

This example renders a world map using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. It displays land masses in teal, country borders as interior lines, graticules, and a light-gray sphere background. The SVG is built with React, while D3’s `geoGraticule` generates the latitude/longitude grid and TopoJSON’s `feature` and `mesh` methods extract geometries from the world-atlas dataset.

MMorgan Worrell
95% match
Loading thumbnail…

World Map

This example displays a world map using a Natural Earth projection, rendering landmasses in teal with graticules and a light gray sphere background. Country borders appear as thin gray lines, with interiors drawn separately. The visualization loads GeoJSON from the world-atlas TopoJSON source, converting it with topojson’s `feature` and `mesh` APIs. React manages the component structure, while d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle projection, path generation, and grid lines. The SVG output is styled via CSS classes, with a loading state before data arrives.

KKtuzinowski
95% match
Loading thumbnail…

World Map

This example displays a world map using a Natural Earth projection, with landmasses rendered in teal and graticules drawn as light gray lines. It shows a sphere outline and country border lines derived from the world-atlas TopoJSON dataset. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project geographic features into SVG paths, while d3.geoGraticule generates the latitude and longitude grid. React handles rendering through a Marks component, and TopoJSON’s feature and mesh functions extract land polygons and interior boundaries from the source data.

Jj-PGi
95% match
Loading thumbnail…

World_Map

This example displays a world map using the Natural Earth projection, rendered with SVG paths. It visualizes landmasses in beige, ocean in blue, and includes graticule lines and country borders in contrasting colors. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic data loaded from the world-atlas TopoJSON dataset, with `topojson.feature` and `topojson.mesh` extracting land and interior boundaries. The map is built as a React component, with marks drawn using D3 v5.

SSurikanti Swathi
95% match