Skip to main content
SimilarExport ZIP
100%

Fork of World Map

✓ Published0🌍 Public
AAmrit Adhikari
Last edited Oct 30, 2025
Created on Oct 30, 2025
Forked from Map

This example displays two static choropleth-style maps: a world map using the Natural Earth projection and a US states map using the Albers USA projection. It demonstrates how to load TopoJSON data from the `world-atlas` and `us-atlas` datasets, convert it to GeoJSON with `topojson.feature`, and render it with `d3.geoPath` and `d3.geoNaturalEarth1` or `d3.geoAlbersUsa`. Both maps include graticule lines and interactive title tooltips showing region IDs.

AI-generated description
MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Fork of Map

This visualization demonstrates two geographic maps side by side: a world map using the Natural Earth projection and a US state map using the Albers USA projection. The maps show country and state boundaries rendered as SVG paths with light blue and green fills, overlaid on a subtle graticule grid for the world map. Built with D3 v7 and TopoJSON, the code loads geographic data from the `world-atlas` and `us-atlas` datasets via CDN, then applies `d3.geoNaturalEarth1` and `d3.geoAlbersUsa` projections with `d3.geoPath` to draw the features.

YYaswanth
90% match
Loading thumbnail…

Fork of World Map

This example displays a world map using a natural Earth projection, with countries rendered as green landmasses against a light blue spherical backdrop. The visualization loads TopoJSON world data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and draws the paths with `d3.geoPath` and `d3.geoNaturalEarth1`. It also appends a sphere path to frame the projection, all rendered as SVG elements.

SstellaWangg
87% 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
87% match
Loading thumbnail…

Fork of Topojson World Map

This example shows a world map rendered with a natural Earth projection, displaying country boundaries as green filled paths with subtle black strokes. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using topojson’s `feature` method. The map is drawn with d3.geoPath and the d3.geoNaturalEarth1 projection, while a spherical outline is added as a distinct path. The code leverages d3.v5’s selection and data-joining capabilities to append each country’s path to an SVG.

Ccp571999
86% match
Loading thumbnail…

Fork of World Map

This example presents a natural Earth projection of the world map, rendered as an SVG with a light blue spherical background and green landmasses outlined in black. It loads world country boundaries from the world-atlas TopoJSON dataset via `d3.json`, converting them to GeoJSON with `topojson.feature`. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country paths, demonstrating a straightforward choropleth-free geographic rendering workflow.

Aadapavaishnavi12
86% match
Loading thumbnail…

Fork of World Map Simple

This example renders a simple world map with country boundaries and a graticule overlay using a Natural Earth projection. The visualization fetches TopoJSON data from the visionscarto-world-atlas package, converts it to GeoJSON via topojson.feature, and draws paths with d3.geoPath. It also uses d3.geoNaturalEarth1 and d3.geoGraticule to display projection lines, with countries stroked in white and graticules in gray. The map fills the entire browser window, with a loading state managed through a simple state-driven render loop.

Yyoya@web.de
85% match
Loading thumbnail…

Fork of world map with the world Topojson data.

This example displays a world map rendered as SVG paths, with each country filled in white and outlined in black against a green background. The visualization uses the Natural Earth projection via `geoNaturalEarth1` and constructs the map geometry with `geoPath` and the TopoJSON `feature` method. Country boundaries come from the world-atlas dataset’s countries-110m.json file, loaded asynchronously using D3’s `json` function before appending the path elements to the SVG canvas.

Nnsatyaprakash22
85% match