Map

100%

✓ Published1🌍 Public

Last edited Feb 9, 2020

Created on Feb 9, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Map!

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.

DDavid Kiarie

89% match

Loading thumbnail…

Basic Map

This example displays a basic world map rendered as SVG paths. It uses the `d3.geoMercator` projection and `d3.geoPath` to convert geographic coordinates into screen paths. The map draws country boundaries from the world-atlas TopoJSON dataset, which is loaded via `json()`. The code applies the `feature()` method from topojson to extract country geometries, then appends one SVG `path` element per country. The resulting visualization shows a simple, unadorned map without interactive features or styling.

CChristopher Morrissey

88% match

Loading thumbnail…

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Bbhargavarathod

87% match

Loading thumbnail…

Basic Map

This example displays a basic world map using an SVG canvas, rendering country boundaries with a Mercator projection. It loads geographic data from the `world-atlas` package via a JSON file and converts it into map features using the `topojson` library's `feature` function. The map is drawn with D3 v5's `geoPath` and `geoMercator` APIs, which generate the SVG path data for each country. The visualization is straightforward, showing only the landmasses without additional styling or interactivity.

CChris Mora

87% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered with SVG paths, using D3.js v5 and TopoJSON. It loads geographic country boundaries from the world-atlas dataset and projects them with a Mercator projection. The code uses `d3.geoPath` and `d3.geoMercator` to generate the map, while `topojson.feature` converts the TopoJSON data into GeoJSON features. Countries appear filled in steel blue with black, semi-transparent borders, demonstrating a minimal choropleth-style base map.

HHwl98

86% match

Loading thumbnail…

Let's make a map

This example displays an interactive world map rendered as SVG, with countries shaded in light gray and oceans in steel blue. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw geographic boundaries from TopoJSON data supplied by the world-atlas package. Country names are loaded from a TSV file and shown as tooltips using SVG `<title>` elements. The map supports pan and zoom through `d3.zoom`, which applies an SVG transform to the grouped map elements on interaction.

Bbambaleq

86% match

Loading thumbnail…

World Map Visualization

This example renders a world map using D3.js and SVG, showing country boundaries as light blue shapes with white strokes. It loads GeoJSON world map data from a remote repository and applies a Mercator projection to convert geographic coordinates into screen positions, with the map centered on the canvas. The visualization demonstrates key D3 features such as `d3.geoMercator`, `d3.geoPath`, and loading external data via `d3.json`, alongside ES6 module imports from a local file. The map is drawn by binding the GeoJSON features to SVG `path` elements, with styling applied via inline attributes.

UUVarshaReddy

86% match

Loading thumbnail…

HTML Starter

This example displays a world map using the geoMercator projection, with country boundaries rendered as SVG paths. The map is generated from the world-atlas countries-110m GeoJSON dataset, loaded via d3.json. The code imports d3.geoPath and d3.geoMercator from d3.v5, and topojson’s feature function to extract country features. The resulting paths are appended to an SVG canvas of 960 by 500 pixels, demonstrating a minimal HTML setup with inline styling.

PPaul Chen

86% match