Fork of Map

100%

✓ Published0🌍 Public

Last edited Oct 30, 2025

Created on Oct 30, 2025

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World 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.

AAmrit Adhikari

87% 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

87% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example renders a world map using a natural Earth projection, displaying country boundaries as colored paths over a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The map is drawn with D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while each country is styled as a light green filled SVG path with a subtle black stroke. The visualization demonstrates a straightforward, static cartographic rendering with minimal interactive or animated elements.

AAiden Lau

86% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with countries filled in light green against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the topojson `feature` function. The visualization renders paths with d3.geoPath and d3.geoNaturalEarth1, appending each country as an SVG path element. The code demonstrates a straightforward D3.js v6 workflow for projecting and drawing vector map boundaries.

PPiotr Paszek

86% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This visualization renders a world map using a Natural Earth projection, displaying countries as light green polygons against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset, which is converted to GeoJSON using the `feature` function from topojson. The map is drawn as SVG paths via `d3.geoPath`, with the projection defined by `d3.geoNaturalEarth1`. The code first draws the sphere outline, then appends country paths with a stroke for boundaries, all within a static 960x500 viewport.

Bbhanuteja1807@gmail.com

86% match

Loading thumbnail…

Fork of Let's make a Map with D3.js!

This example displays a world map using a natural Earth projection, with countries rendered as light green paths and the ocean as a light blue sphere. It loads geographic data from the World Atlas TopoJSON dataset at 110m resolution, converts it to GeoJSON using `topojson.feature`, and renders it with `d3.geoPath` and `d3.geoNaturalEarth1`. The D3 v5 selection and data join methods (`select`, `append`, `data`, `enter`) generate the SVG paths, with styling applied via CSS classes.

CCarloWK1202

86% match

Loading thumbnail…

Fork of World Map

This example uses D3 to render a fork of a world map, displaying country boundaries as light green vector shapes on a white background through an SVG canvas. The visualization applies a Natural Earth projection using `d3.geoNaturalEarth1` and generates the geographic paths with `d3.geoPath`. It loads GeoJSON data from the `world-atlas` package, parses the countries using `topojson`, and draws each feature onto the SVG. The output is a static equirectangular-style map highlighting national borders with subtle black strokes.

NNaimisha-M

86% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, rendering countries as light green paths with dark strokes on a blue spherical backdrop. It loads geographic data from a world-atlas TopoJSON file via `d3.json`, then applies the `topojson` library’s `feature` function to extract country features. The SVG paths are generated using `d3.geoPath` and the `d3.geoNaturalEarth1` projection, which also draws the sphere outline. The input data source is the unpkg-hosted world-atlas dataset, and the rendering is entirely vector-based, using SVG elements styled by the included CSS.

TToooooooT

86% match