worldmap

100%

✓ Published3🌍 Public

Hhxc20060903

Last edited Dec 31, 2020

Created on Dec 31, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This example displays a world map using an equal-area natural Earth projection, with countries rendered as paths that fill with a soft beige color and turn red on hover. The visualization initially shows a blue sphere backdrop, and users can pan and zoom via mouse interaction. The code loads country boundaries and names from the world-atlas package (50m resolution) and uses `d3.geoPath` with `d3.geoNaturalEarth1` for projection, while `topojson.feature` extracts geometry. Interactivity is handled through `d3.zoom`, which adjusts the SVG group's transform on zoom events, and each country path includes a tooltip title with its name from the TSV data.

Zzhangfa

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 displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Hhm0421

91% match

Loading thumbnail…

World Map

Hhm0421

91% match

Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

Ppei9223

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, displaying countries as green SVG paths with black borders that turn red on hover. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from a TopoJSON file (world-atlas 50m) and country names from a matching TSV file. Zooming is enabled through d3.zoom, which applies a transform to the map group. The sphere background is rendered as a blue path, and each country includes a tooltip title showing its name.

YYoram

91% match

Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries as selectable SVG paths over a blue sphere, with hover highlighting in red. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection to render geographic features, while the `topojson` library’s `feature` function processes TopoJSON data from the world-atlas package. Country names are loaded from a TSV file and mapped to each path’s `id`. A zoom control, implemented via D3’s `zoom` event, adjusts the SVG transform. Data sources include the 50m world-atlas TSV and JSON files.

CChawin Sungwalngern

91% match

Loading thumbnail…

World Map

This example displays an interactive world map using the geoNaturalEarth1 projection, rendering countries as SVG paths with hover highlighting. It loads world-atlas TopoJSON data, converts it to GeoJSON with the `feature` method, and draws it using `d3.geoPath`. The map supports pan and zoom through `d3.zoom`, and includes a styled sphere background. The implementation imports `select`, `json`, `geoPath`, and `zoom` from D3 v5, along with the TopoJSON module.

HHarshithaAmbilpur

91% match