World Map

100%

✓ Published0🌍 Public

Last edited Jul 13, 2023

Created on Jul 13, 2023

This example displays an interactive world map showing country boundaries with zooming and hover effects. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, projecting it with d3.geoEquirectangular and rendering via d3.geoPath. The map initially shows a blue sphere with light green countries and indigo borders, which turn maroon on hover. A d3.zoom handler enables pan and zoom interactions on the SVG.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map interaction

This interactive world map displays country boundaries over a blue sphere, with countries highlighted in green and a darker shade on hover. It uses D3’s geoPath and geoNaturalEarth1 projection to render geographic features from a TopoJSON dataset provided by world-atlas. The zoom behavior, implemented via the d3.zoom API, adjusts the SVG group’s transform during navigation. The visualization renders as SVG within an HTML page, and the code relies on the topojson library’s feature function to extract country polygons.

EEmma

92% match

Loading thumbnail…

World Map Interaction

This example displays an interactive world map built with D3 v5 and TopoJSON, rendered as SVG. Users can pan and zoom the map using D3’s `zoom` behavior, which updates a group transform. The map draws countries from the world-atlas TopoJSON file using `geoPath` and the `geoNaturalEarth1` projection. Hovering over a country highlights it in red via the `:hover` CSS rule, while country names appear as tooltips using SVG `<title>` elements.

KKainsli

92% match

Loading thumbnail…

world map interaction

This example presents an interactive world map built with D3.js v5, displaying country boundaries and names sourced from the world-atlas TopoJSON dataset. Users can zoom and pan the map using d3.zoom, with the transform applied to a group element. Countries are rendered as SVG paths via d3.geoPath and a natural Earth projection, with tooltips showing country names from the TSV file. Hovering highlights countries in red, while the ocean sphere uses a blue fill.

Ppei9223

91% match

Loading thumbnail…

World Map

This example renders an interactive world map using SVG, with countries shown in brown and the globe’s sphere in light blue. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON via the `feature` method. The map uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate the paths. Hovering highlights countries by changing their fill color through CSS, while D3 v5 and TopoJSON handle the data binding and rendering.

HHemanthh81

91% match

Loading thumbnail…

World map

This example shows an interactive world map rendered as an SVG, with countries filled in green that turn red on hover against a sky-blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using the `feature` method from TopoJSON. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to generate country outlines, while `select` and `selectAll` manage the SVG path elements. The map is drawn entirely with D3 v5 and CSS styling for hover effects.

Nnikhilagopi

91% match

Loading thumbnail…

World Map

This example shows a world map with countries rendered as light blue polygons outlined in yellow, which highlight pink on hover. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, applying the `geoEquirectangular` projection and `geoPath` generator to draw the sphere and country boundaries as SVG paths. Country hover effects are styled via CSS.

PPavaniMangugari

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

90% match

Loading thumbnail…

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999

90% match