Skip to main content
SimilarExport ZIP
100%

Fork of Fork of world map

✓ Published1🌍 Public
Sshabbab01
Last edited Apr 3, 2022
Created on Apr 3, 2022
Forked from 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.

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
94% match
Loading thumbnail…

Fork of world map

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.

Sshabbab01
91% match
Loading thumbnail…

Fork of Fork of World Map

This interactive map renders world countries from the `world-atlas` TopoJSON dataset, using a choice of either the orthographic or Mercator projection from `d3-geo-projection.v3`. Users can click a country to toggle between the two projections, and the map supports drag-to-rotate via `d3.drag()` and zooming through `d3.zoom()`, which applies an SVG transform. Country names are joined from a TSV file, and all paths are generated with `d3.geoPath`, with hover highlighting provided by CSS.

Bbindhureddy98
90% match
Loading thumbnail…

Fork of Fork of Fork of Fork of World Map

This interactive world map combines country polygons from the World Atlas TopoJSON dataset with TSV country names. Using d3.geoPath, it renders an orthographic projection of the globe, allowing users to drag to rotate the projection, and click a country to switch between Mercator and orthographic views. The visualization employs d3.geoGraticule, sphere paths, and a zoom feature.

DDivyaVellanki
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 Fork of World Map with D3.js!

This visualization displays a world map using D3.js and TopoJSON, with countries rendered as yellow filled paths on a dark blue sphere. It loads geographic data from the world-atlas countries-110m.json file and projects it using d3.geoEquirectangular. The code employs d3.json to fetch data, topojson.feature to convert TopoJSON to GeoJSON, and d3.geoPath to generate SVG paths. A hover effect darkens country fills using CSS, while the sphere background uses a navy color.

Rradhadevarapu
89% match
Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map as an SVG graphic, with each country rendered as a green path with black outlines. Hovering over a country changes its fill color to orange, providing basic user feedback. The visualization uses D3 v5 functions such as `select`, `json`, `geoPath`, and `geoEquirectangular` for the projection, while TopoJSON’s `feature` method converts the loaded world-atlas countries-110m.json data into GeoJSON features for rendering.

DDINESH SAI BOPPANA
89% match
Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map as an SVG graphic, with each country rendered as a green path with black outlines. Hovering over a country changes its fill color to orange, providing basic user feedback. The visualization uses D3 v5 functions such as `select`, `json`, `geoPath`, and `geoEquirectangular` for the projection, while TopoJSON’s `feature` method converts the loaded world-atlas countries-110m.json data into GeoJSON features for rendering.

DDINESH SAI BOPPANA
89% match