Maps

100%

✓ Published0🌍 Public

Last edited Oct 31, 2025

Created on Oct 30, 2025

Forked from Map

This example presents two static SVG maps built with D3 v7 and TopoJSON. The first shows a world map using the `world-atlas@2` countries-110m dataset, rendered with a `d3.geoNaturalEarth1()` projection and a graticule layer. The second focuses on India, using a `d3.geoMercator()` projection centered on the country, with state boundaries loaded from a separate geoBoundaries ADM1 file. Both maps use `d3.geoPath` to convert GeoJSON features into SVG paths, with country and state outlines styled distinctly.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Maps

This example renders a world map using D3.js and TopoJSON, displaying countries as light green shapes against a dark blue spherical background. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from the world-atlas dataset. The code loads TopoJSON data, converts it to GeoJSON with topojson.feature, and appends country paths to an SVG container. The visualization demonstrates basic data binding and DOM manipulation while showing geographic features with minimal styling.

Cceresfin

86% match

Loading thumbnail…

Map

This example presents two static choropleth-style maps side-by-side: a world map using the Natural Earth projection and a U.S. map using the Albers USA projection. Both maps load TopoJSON data—from `world-atlas` and `us-atlas` datasets—and render country and state boundaries as SVG paths via `d3.geoPath` and `topojson.feature`. The world map includes a graticule generated by `d3.geoGraticule`, while the U.S. map uses `d3.geoAlbersUsa`. Regions are filled with solid colors, and hover tooltips are added using SVG `title` elements.

SSahil Thapa

86% match

Loading thumbnail…

ICE-8 Map

This example presents two geographic maps side-by-side: a world map using the Natural Earth projection and an India map using the Mercator projection. Both are rendered as SVG elements via D3 v7 and TopoJSON, with country and state boundaries drawn using `d3.geoPath`. The world map includes a graticule layer and a blue fill for countries, while the India map displays all states with a light background. Data sources are the `world-atlas@2` countries file and a GitHub-hosted India states TopoJSON, respectively.

HHarshithaAru06

85% match

Loading thumbnail…

Worldmap

This example displays a static world map of countries from the world-atlas TopoJSON dataset, rendered as SVG paths using D3.js. It uses the Natural Earth projection via `d3.geoNaturalEarth1()` and `d3.geoPath()` to draw country boundaries. Hovering over a country highlights it in red and shows a tooltip with the country’s ID and property count, implemented through D3 event handlers on the SVG paths. The map is fetched from a CDN and converted from TopoJSON to GeoJSON using the topojson library.

CCharith Kapuluru

84% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3.js version 5 and the TopoJSON library to load and convert world-atlas data (110m resolution) into GeoJSON features. The map is drawn with `d3.geoPath` and a natural Earth projection (`d3.geoNaturalEarth1`), while a separate path renders the globe’s sphere outline. Country boundaries appear with a subtle black stroke, and the map updates once the external JSON data loads.

Jjnpatel

84% match

Loading thumbnail…

Fork of Map

This example demonstrates two static maps rendered with D3 v7: a world map using the Natural Earth projection and a map of Nepal using the Mercator projection. Both visualizations load country boundaries from the `world-atlas@2` TopoJSON dataset, which is converted to GeoJSON via `topojson.feature` and drawn with `d3.geoPath`. The world map includes a graticule and a sphere background, while the Nepal map filters features by country ID 524 and fits the projection to that geometry. The code uses `d3.geoNaturalEarth1`, `d3.geoMercator`, and `projection.fitSize` to position the maps within their SVG containers.

AAmrit Adhikari

84% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as a static SVG, with countries filled in green and a light blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using `topojson.feature`. The map uses the `geoNaturalEarth1` projection and draws boundaries with `d3.geoPath`. D3 selections append one SVG path per country, while a dedicated sphere path provides the ocean backdrop.

TTsing

84% match

Loading thumbnail…

world map

This example presents a static world map of all countries rendered as SVG paths, using gray fill with black strokes on a yellow background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON with the `feature` function from topojson. The map is projected using `d3.geoNaturalEarth1`, and each country’s outline is drawn with `d3.geoPath` and `projection` assigned. The visualization relies on D3 v5’s `select`, `json`, and `geoPath` modules, with no interactivity or additional data encoding.

Ssiddu7147

83% match