Skip to main content
SimilarExport ZIP
100%

Map!

✓ Published0🌍 Public
DDavid Kiarie
Last edited Dec 1, 2019
Created on Dec 1, 2019

This visualization displays a world map rendered as SVG paths using the Mercator projection. The code fetches GeoJSON data from a remote World Atlas source via `d3.json`, then relies on `d3.geoPath` and `d3.geoMercator` to project coordinates into screen space. The application uses D3 v5 within a React framework, though the current script only loads the data without binding it to visible shapes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map

This example displays a world map rendered with SVG paths, using a Mercator projection. It loads geographic data from a GeoJSON file and draws each country as a path element. The code uses D3 v5’s `d3.json`, `d3.geoMercator`, and `d3.geoPath` to project and trace the map, within a fixed 1400×700 viewBox. No interactions or styling are applied beyond the static continent paths, making it a minimal, barebones geographic visualization.

SShweta-tech
89% match
Loading thumbnail…

let's make a world map

This interactive map renders world countries as SVG paths using a Mercator projection. The visualization loads country boundaries from a world-atlas GeoJSON/TopoJSON dataset and draws them server-side with D3’s `geoPath` and `geoMercator`. The code employs `topojson.feature` to convert topological data into geometric features, then appends each path to the SVG canvas.

KKRITIKA RAI DWIVEDI
86% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths filled with steel blue. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into screen paths. It loads world-atlas data from unpkg, extracting country features with `topojson.feature`. The React framework is not actively used in the visible code; instead, the script directly appends paths to an SVG element.

Vvans01
85% match
Loading thumbnail…

World maping

This example displays a world map rendered as an SVG using React and D3. It shows country boundaries via a spherical equal-earth projection, with land areas filled in teal and the surrounding sphere in light gray. The visualization loads GeoJSON data from the World Atlas TopoJSON file, converts it using topojson’s `feature` method, and draws the paths with `d3.geoPath`. The map is static, with no interaction or animation.

Ppatasky
85% match
Loading thumbnail…

Map.js!

This map visualization displays the world’s countries by using a Mercator projection to render geographic features as filled SVG paths on a light gray sphere background. The code loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with `topojson.feature`, then draws each country using `d3.geoPath`. Styling applies a blue fill with dark strokes and a subtle opacity, while the hidden overflow and full-bleed body create an immersive, full-window presentation.

Aargonaeut
85% match
Loading thumbnail…

World map

A world map rendered with SVG paths displays countries in green on a blue background, using the Mercator projection. The code loads TopoJSON world-atlas data via `d3.json` and converts it to GeoJSON with `topojson.feature`. D3’s `geoMercator` and `geoPath` generate the country outlines, which are appended as `<path>` elements with a semi-transparent black stroke.

Eevapavlinek
85% match
Loading thumbnail…

world Map

This visualization displays a world map using a natural Earth projection, rendered with SVG paths in a React component. The map shows landmasses filled in teal and country borders drawn as interior mesh lines, with graticule lines and a light gray sphere outline for context. The code uses d3.geoNaturalEarth1 and d3.geoPath for projection and path generation, with topojson to parse the world-atlas countries-50m dataset. The visualization is built with React and ReactDOM, dynamically loading geographic data via a custom useData hook.

Sshimos12468
85% match
Loading thumbnail…

map app

This map app displays world country boundaries using a Mercator projection. It loads geographic data from the World Atlas TopoJSON file via `d3.json`, converts it to GeoJSON with `topojson.feature`, and renders each country as an SVG path using `d3.geoPath` with `d3.geoMercator`. The fixed 900x400 SVG canvas shows the full projection without interactivity or styling beyond default black strokes on a transparent background.

Rrv-nath
85% match