world map

100%

✓ Published0🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

This world map visualization displays countries using a purple color scheme, with each country highlighted in a darker shade on hover. The map is rendered as an SVG using D3’s `geoNaturalEarth1` projection, with country boundaries generated via `d3.geoPath`. TopoJSON data from the world-atlas package is converted to GeoJSON using the TopoJSON client library, and the map is centered with a title at the top.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This example displays a world map using a Natural Earth projection, with each country rendered as a purple SVG path. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. D3’s geoNaturalEarth1 projection and d3.geoPath handle the coordinate transformation and path generation, while hover effects change country colors and tooltips reveal each country’s ID.

AAparna Desi Reddy

92% match

Loading thumbnail…

world map

This visualization displays a world map of countries, rendered as orange-filled SVG paths on a lime background using a Natural Earth projection. It fetches GeoJSON-derived country boundaries from the world-atlas TopoJSON dataset and converts them with topojson’s `feature` method. The map is generated with d3.geoPath and d3.geoNaturalEarth1, while standard d3 selections append each country path to the SVG canvas.

Nnagarjuna1968

89% match

Loading thumbnail…

world map

This example displays a world map using a natural Earth projection. It renders the globe’s sphere and country boundaries as SVG paths, with countries highlighted in yellow on hover. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection, alongside the `topojson` library’s `feature` function to process GeoJSON data from the `world-atlas` package. The map is drawn with SVG elements, with the sphere filled in blue and countries in light gray.

SSai Hemanth Babu Sunkari

87% match

Loading thumbnail…

World Map

This world map visualization displays countries across the globe, rendered as light green polygons with thin black outlines, set against a blue sphere. The map uses D3’s geo projection and path generation, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to draw the geographic boundaries. Country data comes from the world-atlas TopoJSON dataset, which is fetched and processed using the TopoJSON library’s `feature` function. The visualization relies on D3 version 5 and outputs an SVG graphic, with styling applied via CSS.

SsreepavanKothapalli

87% match

Loading thumbnail…

world map

This interactive world map displays country boundaries using a natural Earth projection rendered as SVG paths. The visualization loads geographic data from a JSON file, converts it into GeoJSON features via the `topojson.feature` API, and draws each country with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is styled skyblue, while countries fill with a blue tint and cyan strokes. The code uses D3 v5’s selection and JSON loading methods to fetch remote data from a GitHub gist.

Rrakeshkommineni

87% match

Loading thumbnail…

World Map

This world map visualization renders country boundaries as green SVG paths on a blue background using the Natural Earth projection. The code fetches TopoJSON data from the world-atlas package and converts it to GeoJSON using `feature` from TopoJSON, then applies `geoNaturalEarth1` and `geoPath` from D3 v5 to generate the geographic shapes. The static map displays all countries without interactive features, relying on D3’s JSON loading and SVG selection methods to append each country path.

Rreddyakshitha

87% match

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection. The map renders continents and countries as pink shapes with thin black borders on a light blue sphere background, providing a clear geographic overview. The code uses D3 v5 functions including `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The SVG output is generated with D3’s selection and attribute APIs, and the sphere and country paths are styled using CSS classes.

DDINESH SAI BOPPANA

87% match

Loading thumbnail…

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo

87% match