Fork of world map

100%

Fork of world map

✓ Published3🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This fork of a world map displays country boundaries and a blue sphere backdrop using an equirectangular projection. It renders the map as SVG, with countries filled white and outlined in black, and highlights each country in orange on hover. The visualization uses d3.geoPath and d3.geoEquirectangular to generate paths from TopoJSON data loaded from the world-atlas package, with the sphere drawn as a separate path element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of world map

This example renders an interactive world map using D3.js and TopoJSON. It displays countries as white polygons with black outlines on a blue sphere, and highlights individual countries in orange on hover. The visualization uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths. Country geometry is loaded from a world-atlas TopoJSON file hosted on jsDelivr, with features extracted via the `feature` function.

Sshabbab01

92% match

Loading thumbnail…

Fork of Fork of world map

This interactive D3.js world map uses an orthographic projection to render Earth’s landmasses as white countries with black outlines against a blue oceanic sphere. It loads country boundaries from the world-atlas TopoJSON dataset, processing them via the `topojson.feature` function and drawing paths with `d3.geoPath`. Hovering over a country highlights it in orange through a CSS `:hover` rule, providing visual feedback for exploration.

Sshabbab01

91% match

Loading thumbnail…

Fork of World Map with D3.js!_AK

This example displays a world map using an equirectangular projection, with countries filled in orange and outlined in blue against a light blue ocean sphere. The visualization highlights individual countries in red when hovered over, providing interactive feedback. It loads world country boundaries from the world-atlas TopoJSON dataset via `d3.json`, converts them to GeoJSON with `topojson.feature`, and renders them using `d3.geoPath` with `d3.geoEquirectangular`. The SVG elements are styled through CSS classes for the sphere and countries.

Aamulyakannam

89% match

Loading thumbnail…

Fork of World Map with D3.js!

This example displays an interactive world map where each country is rendered as a green SVG path with a black stroke. A blue sphere provides the background, and hovering over a country highlights it in orange. Built with D3.js v5 and TopoJSON, it uses `d3.geoPath` with `d3.geoEquirectangular` projection to draw the map from the world-atlas countries-110m.json data source. The SVG rendering is styled via CSS classes, with hover effects defined in the stylesheet.

BBajiSharifPatan@my.unt.edu

89% match

Loading thumbnail…

Fork of World Map with D3.js!

This example renders a world map using the D3.js library. It draws an equirectangular projection of the globe with a blue sphere and green landmasses, and it highlights countries in orange when hovered over. The map is generated from TopoJSON data loaded from the world-atlas package, which is converted to GeoJSON using the `feature` method. The visualization uses `d3.geoEquirectangular` for the projection, `d3.geoPath` to generate SVG paths, and CSS hover styles for interaction.

NNaimisha-M

89% match

Loading thumbnail…

Fork of World Map

This fork of a world map projects countries onto a sphere, showing landmasses in green with black outlines over a light blue ocean. It builds the sphere and countries using D3 v5’s `geoNaturalEarth1` projection and `geoPath`, rendering the result as SVG paths. The data comes from the world-atlas 110m TopoJSON, which is converted to GeoJSON via TopoJSON’s `feature` function before being drawn.

MMahendraGullinkala

89% match

Loading thumbnail…

Fork of World Map with D3.js!

This example displays an interactive world map using a D3.js equirectangular projection, rendered as an SVG. Each country is drawn as a green path with black strokes using the `d3.geoPath` and `d3.geoEquirectangular` APIs, based on GeoJSON data converted from a TopoJSON source via the `topojson.feature` method. Hovering over a country changes its fill color to orange through a CSS `:hover` rule. The map also includes a blue sphere outline generated from a GeoJSON sphere object.

NNaimisha-M

89% match

Loading thumbnail…

Fork of Fork of World Map with D3.js!

This example displays a world map with countries rendered in pink and a purple sphere, using an equirectangular projection to show the entire globe. It uses D3.js v5 and TopoJSON to load geospatial data from the `world-atlas` package, and applies the `geoPath` and `geoEquirectangular` functions to generate SVG paths. Interactive highlighting changes a country’s fill color on hover.

TTejucmandava

88% match