Skip to main content
SimilarExport ZIP
100%

world map

✓ Published1🌍 Public
SSreedevi Itta
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from Map

This example presents a reference world map and a choropleth map showing internet users per 100 people in 2015, both rendered as SVG using D3 v7 and TopoJSON. The code employs `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for generating map paths, and `d3.geoGraticule` to draw latitude and longitude lines. Country boundaries come from the world-atlas TopoJSON file, with each country colored by its rate in the second map, accompanied by a legend.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This example displays a world map rendered as an SVG using D3 v5 and TopoJSON. It shows country boundaries and a green sphere representing the Earth’s surface. The code loads geographic data from a JSON file, processes it with the `feature` function from TopoJSON, and projects it using `geoNaturalEarth1`. Paths are generated with `d3.geoPath` and styled with blue country fills and black strokes.

Kkranthireddyskr
86% match
Loading thumbnail…

world map

This example shows a world map of all countries rendered as grey SVG paths with black borders on a yellow background. It uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to generate the geographic shapes. Country boundaries come from a TopoJSON file loaded from the world-atlas dataset via a URL, processed with the `topojson.feature` API. The code fetches the data asynchronously with `json()`, then appends each country as a `path` element to the SVG canvas.

Ppavankalyan1507
85% match
Loading thumbnail…

world map

This example renders a world map using SVG paths generated from geographic data. The map visualizes country boundaries from the World Atlas TopoJSON dataset, projected using a natural Earth projection. The code employs D3 v5’s `geoPath` and `geoNaturalEarth1` for path generation and projection, while TopoJSON’s `feature` method converts the TopoJSON topology into GeoJSON features. Each country is drawn as an SVG path, with styling defined through CSS classes for the sphere background and country fills.

HHimanshu Chelani
85% match
Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan
85% match
Loading thumbnail…

world map with the world Topojson data

This example displays a world map using D3 version 5 and the TopoJSON library. It renders each country as a white SVG path with black outlines on a green background. The map uses the `d3.geoNaturalEarth1` projection and the `d3.geoPath` API to draw geographic features. Country boundaries come from the world-atlas countries-110m.json dataset, processed with TopoJSON's `feature` function.

Nnsatyaprakash22
85% match
Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as an SVG with D3 version 5 and TopoJSON. It highlights country boundaries with pink fills and maroon strokes, overlaid on a green sphere outline that represents the globe. The map is drawn using `d3.geoPath` with `geoNaturalEarth1` projection, while country geometries are loaded from a remote TopoJSON file and converted via the `feature` method from TopoJSON. The data source is a gist containing country coordinates.

Mmandadi1999
85% match
Loading thumbnail…

worldmap

This example displays an interactive world map with countries rendered as individual SVG paths, colored light green with black outlines, and highlighted in red on hover. It uses D3 v5's `geoNaturalEarth1` projection with `geoPath` to draw the map, and a light blue sphere for the oceans. Country boundaries come from the `world-atlas` package's countries-50m GeoJSON data, and the `topojson-client` library converts TopoJSON to GeoJSON for feature extraction. The chart supports zooming via D3's `zoom` event, which updates the SVG group transform in real-time.

Hhxc20060903
85% match
Loading thumbnail…

world map

This example renders a world map using the Natural Earth projection, displaying country boundaries as green SVG paths with yellow strokes on a green background. It fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the `feature` function from topojson. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project and draw the paths, while d3.json loads the remote dataset asynchronously before appending the country shapes to the SVG canvas.

Ddivyagunuguntla
85% match