6:46 world map

100%

6:46 world map

✓ Published1🌍 Public

Last edited Feb 28, 2021

Created on Feb 28, 2021

This visualization displays a world map where each country is filled with a random hue derived from a preset green color using D3’s HSL color manipulation. The map is rendered with the Natural Earth projection via `d3.geoPath`, and includes graticules, a sphere outline, and country interiors in white. The code loads GeoJSON topology from the World Atlas, processes it with `topojson.feature` and `topojson.mesh`, and uses React state to manage the asynchronous data fetch.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map Q6

This example renders a world map using D3’s `geoNaturalEarth1` projection and `geoPath` to draw land, country boundaries, graticules, and a sphere outline from World Atlas TopoJSON data. Countries are shaded teal with lighter interior borders, while graticules appear as subtle gray lines. The React component fetches the TopoJSON, converts it to GeoJSON via `topojson.feature` and `topojson.mesh`, and outputs SVG paths. The visualization emphasizes polished styling over interactive behavior.

UUmarani Vemula

87% match

Loading thumbnail…

WorldMap

This visualization shows a world map with country boundaries rendered in green, overlaid with graticule lines and gray sphere background. Using React to manage the component lifecycle, the code loads GeoJSON data from the world-atlas package via D3’s json function, then applies d3.geoNaturalEarth1 projection and d3.geoPath to draw SVG paths. TopoJSON’s feature and mesh utilities extract country polygons and interior borders from the topology.

EEd Hutchinson

87% match

Loading thumbnail…

World Map

This interactive world map visualizes the Earth’s countries using a natural Earth projection, displaying the globe’s sphere, graticules, and landmasses with custom styling. Built with React and D3 v6, the visualization loads TopoJSON data from the `world-atlas` package and processes it using `topojson`'s `feature` and `mesh` APIs to extract country boundaries and interiors. The `d3.geoNaturalEarth1` projection and `d3.geoPath` render all geographic elements as SVG paths, while CSS classes define teal and gray color schemes for a polished aesthetic.

Ee-ines

87% match

Loading thumbnail…

World Map

A world map rendered with D3’s geoNaturalEarth1 projection, drawn in SVG using d3.geoPath. The map displays landmasses filled with teal, country interiors as thin light-blue lines, and graticules in gray. Data comes from the TopoJSON World Atlas (countries-50m.json), processed via TopoJSON’s feature and mesh APIs. The React-based visualization shows a static globe with a subtle color scheme, prioritizing clean spatial form over interactivity.

WWolfgang

87% match

Loading thumbnail…

Map

This example displays a world map using a natural Earth projection, with countries shown as light green shapes against a dark blue sphere background. The visualization is rendered as SVG paths derived from TopoJSON data loaded from the world-atlas package, with each country’s boundaries drawn using D3’s geoPath and geoNaturalEarth1 projection. The code utilizes D3 v6 for data binding and selection, while TopoJSON’s feature function converts the encoded topology into GeoJSON features for rendering.

Nnsadath

87% match

Loading thumbnail…

world map

This visualization displays a world map using a natural Earth projection, with landmasses, country borders, graticules, and a sphere outline rendered in muted colors. The map is built with React and D3, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw geographic features. Country and land data come from the World Atlas TopoJSON file, processed with `feature` and `mesh` from TopoJSON. The SVG output is generated declaratively through React components, with each map element styled via CSS classes.

AAnthony Zornig

87% match

Loading thumbnail…

World Map

This interactive visualization displays a world map using D3 and React, rendering Earth’s landmasses in green with country borders and graticule lines overlaid on a light gray sphere. The map is drawn using `d3.geoNaturalEarth1` projection and `d3.geoPath`, with geographic data sourced from the world-atlas TopoJSON file (countries-50m.json). Country interiors and borders are derived via `topojson.feature` and `topojson.mesh`, while React manages the SVG rendering and loading state.

HHollyClarke19

87% match

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection, with landmasses rendered in teal against a light gray sphere and graticule grid lines. The map also highlights country borders through interior mesh strokes. Built with React and D3 v7, the code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to project and draw geographic features. TopoJSON data from the world-atlas package is loaded and processed with topojson.feature and topojson.mesh to extract land polygons and interior boundaries.

Aahora

87% match