Skip to main content
SimilarExport ZIP
100%

Ep. 29 - World Map

✓ Published1🌍 Public
YYee Han
Last edited Dec 29, 2020
Created on Dec 24, 2020

This example shows a world map rendered with a Natural Earth projection, displaying landmasses in teal with interior borders and a graticule overlay. It uses React with D3 v6, specifically `geoNaturalEarth1` for projection and `geoPath` for drawing SVG paths. The map data comes from the world-atlas TopoJSON dataset, processed with topojson’s `feature` and `mesh` functions to extract land polygons and country boundaries. The visualization is styled with a soft gray sphere background and contrasting land and graticule strokes.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep29 World Map

This visualization shows a world map rendered as a single SVG, displaying landmasses, country interiors, a graticule, and a sphere outline. It uses the `geoNaturalEarth1` projection with `geoPath` from d3 to translate geographical features into paths, and `geoGraticule` to create the latitude and longitude grid. The map is colored with a teal land fill, a light grey sphere background, and an orange-brown graticule, and is built in React, loading world data from the `world-atlas` package.

SStoo Sepp
92% match
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
92% 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
91% match
Loading thumbnail…

Dataviz 2020_Ep29 - 22. World Map

This example presents a world map in an SVG using the Natural Earth projection. The visualization shows landmasses in teal, a light gray sphere, and additional graticule and interior boundary lines. It translates TopoJSON data from the world-atlas package into GeoJSON features using the `topojson` feature and `mesh` functions, which are then rendered with `d3.geoPath` and `d3.geoGraticule`. Built with React and D3 v6, the map adapts to the full browser window size.

MMinwoo Pak
91% match
Loading thumbnail…

World Map

This example renders a natural Earth projection world map using D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs, with React managing the SVG output. Landmasses fill in teal, while graticules and interior boundaries appear as light and darker strokes, respectively. The map’s data comes from the `world-atlas` package, loaded via D3’s JSON fetcher and processed with TopoJSON’s `feature` and `mesh` functions to distinguish country interiors. The visualization presents a clean, stylized globe with a subtle sphere outline and a muted background.

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