World Map

100%

✓ Published0🌍 Public

SSwapna1915

Last edited Jul 21, 2023

Created on Jul 5, 2023

This world map uses D3 v5 to render country boundaries as SVG paths. The code imports `geoEquirectangular`, `geoPath`, and `zoom` from D3, plus the `feature` function from TopoJSON, and loads country data from the world-atlas package. Countries are filled in pink with black borders and turn green on hover, while the underlying sphere is teal. The map also supports zooming through D3's zoom behavior.

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

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

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

90% match

Loading thumbnail…

World Map with D3.js!

This example renders a world map using an equirectangular projection, with countries filled in pink against a light blue sphere. It loads country boundaries from a TopoJSON file (world-atlas countries-110m.json) and converts them to GeoJSON features using the `feature` method. The visualization employs D3 v5’s `geoPath` and `geoEquirectangular` functions to generate SVG paths, and CSS hover styles highlight each country in green. The sphere and country shapes are appended as SVG path elements with distinct classes.

Yyaswanthsen

89% match

Loading thumbnail…

World Map D3.js!

This example displays an interactive world map using SVG, with countries rendered in green and the ocean as a blue sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. Countries are drawn with `d3.geoPath` and the `geoEquirectangular` projection, and hovering over a country changes its fill to orange via CSS. The map uses D3 v5 for data binding and rendering.

NNikkko1

89% match

Loading thumbnail…

World Map

This example displays a world map rendered as an SVG, with countries filled in orange against a sky-blue sphere. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw country outlines, while TopoJSON’s `feature` method converts the world-atlas countries dataset into geographic features. Hovering over a country changes its fill to red via CSS, and the map includes a black stroke with partial opacity for borders.

HHarshavardhan

89% match

Loading thumbnail…

World Map with D3.js!

A stylized world map visualizes countries as green regions with black outlines on a blue sphere, using D3.js v5 and TopoJSON. The code loads geospatial data from the world-atlas countries-110m.json file, converts it to GeoJSON features with the topojson `feature` function, and renders it into SVG paths via `d3.geoPath` with a `geoEquirectangular` projection. Hovering a country changes its fill to orange.

Ssainitish1999

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

89% match

Loading thumbnail…

World Map

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.

BBhavyaMammai

89% match