Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published1🌍 Public
Sstevensmithj
Last edited Feb 23, 2022
Created on Feb 16, 2022
Forked from Temperature in SF

A monochromatic world map renders landmasses in gray against a black sphere, with graticule lines and country interiors drawn as fine strokes. The visualization uses the `geoEqualEarth` projection and `geoPath` from D3 to generate SVG paths from the World Atlas TopoJSON dataset, which is loaded via `d3.json` and converted with `topojson.feature` and `topojson.mesh`. React manages the asynchronous data fetching and component rendering.

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

This visualization presents a world map using an equal-area Earth projection, rendered as an SVG with React. It displays country boundaries in teal against a light gray sphere, with graticules and interior lines in a subtle gray. The code employs D3's `geoEqualEarth`, `geoPath`, and `geoGraticule` to project and draw geographic features from the `world-atlas` TopoJSON dataset, while `topojson`’s `feature` and `mesh` functions prepare the country and interior geometries.

JJulia Hack
92% match
Loading thumbnail…

World Map

This visualization displays a world map using an SVG projection, with landmasses filled in teal, graticules in light gray, and country borders drawn as interior lines. The map is rendered with React and D3 v5, using `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and `d3.geoGraticule` for the grid. Geographic data comes from the World Atlas TopoJSON file, which is loaded via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. A subtle sphere outline frames the map against a neutral background.

Vvmonney
92% match
Loading thumbnail…

World Map

This map uses D3.js geo utilities (geoEqualEarth, geoPath, geoGraticule) within a React component to render country borders from the World Atlas TopoJSON. The SVG view shows landmasses in cyan, ocean in gray, and a graticule for reference. The code projects sphere geometry, graticules, and TopoJSON features, with interiors drawn as stroked paths, creating a polished geographic visualization.

KKahlaoui-Ismail
92% match
Loading thumbnail…

World Map

This world map visualizes country boundaries and interior borders using a light gray sphere with teal country polygons and silver interior lines. The example relies on d3-geo’s `geoEqualEarth` projection and `geoPath` to render SVG paths, while the topojson library’s `feature` and `mesh` functions transform the World Atlas TopoJSON dataset into GeoJSON and isolate interior borders. React manages the data-loading state, and the visualization is drawn entirely as SVG within a React component.

AAnthony Ynami
91% match
Loading thumbnail…

World Map

A world map displays Earth’s landmasses in teal and grey, with country borders drawn as interior lines. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geometric paths with `d3.geoPath`, including graticules and a sphere outline. Geographic data comes from the World Atlas TopoJSON file, processed with `feature` and `mesh` from the topojson library. React manages the component structure, while D3 handles the SVG path generation within a fixed 960×500 viewport.

KK3zter
91% match
Loading thumbnail…

World Map

A world map displays country and land-mass boundaries on an equirectangular projection, filled with a pale blue and accented by graticule lines and interior borders. Built with React and D3 v5, it loads World Atlas TopoJSON data via `d3.json`, processes it with `topojson.feature` and `topojson.mesh`, and renders SVG paths using `d3.geoPath` and `geoEquirectangular`. The visualization also draws a sphere outline and graticules for a polished, cartographic look.

Ssmile2git
91% match
Loading thumbnail…

World Map

A world map displays country boundaries as filled landmasses against a light sphere, with graticules and interior borders drawn in contrasting strokes. The visualization is built with React and D3 v5, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and render the SVG paths. Country and land geometry comes from the World Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. A muted teal and gray palette gives the map a polished, stylized appearance.

Mmarianamartins87
91% match
Loading thumbnail…

World Map

This visualization shows a world map rendered with D3’s geoEqualEarth projection, displaying country boundaries as blue filled paths over a light gray sphere. The map draws from the world-atlas TopoJSON dataset, which the code loads via `d3.json` and converts using `topojson.feature` and `topojson.mesh`. React renders the SVG paths, with the `d3.geoPath` generator computing the projected shapes, and interior borders highlighted in a contrasting stroke.

BBetty
91% match