World map

100%

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

This visualization displays a natural Earth projection world map, with countries rendered as colored SVG paths on a blue sphere. The map uses d3.geoNaturalEarth1 and d3.geoPath to project and draw geographic features, while d3.zoom enables pan and zoom interactions that transform the entire map group. Country boundaries come from the world-atlas TopoJSON dataset, and the rendering uses SVG paths with hover highlighting that changes the fill color.

AI-generated description

A simple map from d3 using topojson.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat

92% match

Loading thumbnail…

World Map

This example renders a world map using a Natural Earth projection, displaying country boundaries as green shapes on a light blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from GeoJSON data converted from TopoJSON via the topojson.feature API. World country data is loaded from the world-atlas package, and the SVG includes a sphere outline to emphasize the spherical projection. The map is static, with no interactive elements or animations.

Llibramanju

92% match

Loading thumbnail…

World Map

The visualization displays a world map using a natural Earth projection, with countries rendered as green filled regions outlined by black borders. The code builds the map by fetching country boundaries from the world-atlas dataset via `json()`, then processes them through `topojson.feature()` to extract geometries. D3's `geoNaturalEarth1` projection and `geoPath` generate the SVG paths for each country, while a separate path with class 'sphere' draws the globe's outline. The map appears static, with no interaction or data encoding beyond geographic boundaries.

RRupeshGandham

92% match

Loading thumbnail…

World Map

This world map visualizes country boundaries, rendered as SVG paths using D3's `geoPath` and `geoNaturalEarth1` projection. The map loads geographic data from the world-atlas package, combining a TopoJSON file with a TSV file to attach country names to each region. Hovering over a country turns it red, and a native SVG `<title>` element displays the country name. The map also includes a blue sphere background and supports zooming via the `d3.zoom` API, applying transformations to the country group.

LLeah Mitchell

92% match

Loading thumbnail…

World Map

A world map rendered with D3.js and a Natural Earth projection displays country boundaries in light green over a blue sphere. The visualization uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate SVG paths from TopoJSON data. Country shapes are drawn by fetching a remote world.json file via `d3.json`, then processing it with TopoJSON's `feature` method. The example demonstrates fundamental DOM manipulation by appending paths to SVG elements.

KKiran3295

91% match

Loading thumbnail…

World Map

This example displays a world map with light green countries set against a blue ocean sphere, using a natural Earth projection. It renders the globe as an SVG path and then loads country boundaries from a TopoJSON dataset via the world-atlas package. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project geographic coordinates, and applies the topojson.feature method to extract country geometries. The sphere is drawn first as a full-world path, followed by individual country paths with subtle black strokes.

Ddev-snip

91% match

Loading thumbnail…

World Map

This interactive world map displays country boundaries on a natural Earth projection, with tooltips showing country names on hover. The visualization uses D3.js v5 with d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom functionality. It loads geographic data from the World Atlas TopoJSON files at unpkg.com, combining country geometries with name mappings from the accompanying TSV file. SVG paths represent countries and the surrounding sphere, with hover interactions highlighting selected regions in blue.

Yyamunayennem

91% match