fork by Pran ICE 8

100%

fork by Pran ICE 8

✓ Published0🌍 Public

Last edited Mar 27, 2023

Created on Mar 27, 2023

This example displays an interactive world map using the equirectangular projection. Countries are rendered as gray SVG paths with black, semi-transparent borders and respond to mouse hover by turning orange. The visualization uses d3.geoPath and d3.geoEquirectangular to project geographic data from the world-atlas TopoJSON source. The sphere background is filled with a distinct blue color. The map is built with D3 version 5 and the topojson library’s feature method.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork by Jeevani ICE 8

This example displays a world map with an equirectangular projection, coloring all countries in pink against a blue sphere, and highlighting countries in gold on hover. The visualization loads country boundaries from the world-atlas TopoJSON/GeoJSON dataset and renders them as SVG paths. Built with D3 v5, it uses `d3.geoPath` for path generation, `d3.geoEquirectangular` for the projection, and the TopoJSON `feature` method to convert TopoJSON data into GeoJSON features. The styles handle the sphere fill, country stroke, and hover effects.

117761A04F1

86% match

Loading thumbnail…

Fork ICE 8 world map

This example displays a world map using an equirectangular projection, rendering each country as a green SVG path with black outlines that turn orange on hover. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` method from TopoJSON. D3 v5’s `geoPath` and `geoEquirectangular` generate the sphere background and country shapes, while CSS handles the color styling and interactive hover states.

Ssushmithameher-patnam

86% match

Loading thumbnail…

Fork of ICE 08 11540905

This example presents an interactive world map using a geographic projection. It displays countries as colored regions with a blue sphere background, and hovering over a country changes its fill to red. The visualization is built with D3 v5 and TopoJSON, using `d3.geoEquirectangular` for the projection and `d3.geoPath` to render the map. Country boundaries and shapes come from the world-atlas dataset (countries-110m.json), with SVG paths styled via CSS classes.

GGogineni44

86% match

Loading thumbnail…

Fork of ICE-8 world map

This visualization displays a world map with countries rendered in green against a sky-blue spherical backdrop, using an equal-area natural Earth projection. The map is generated with d3.geoPath and d3.geoNaturalEarth1, while TopoJSON’s feature function converts raw GeoJSON topology data into geographic features for rendering. Countries are drawn as SVG paths with subtle black strokes, and the sphere’s fill emphasizes the global context. The map data is sourced from a remote GitHub raw file, and the entire scene is rendered as static SVG elements within a 960×500 canvas.

Ppravallikayaram12

85% match

Loading thumbnail…

Fork of ICE-8 WORLD MAP

This fork of ICE-8 displays a world map using a natural Earth projection, with countries filled in green and a blue sphere outline. The visualization loads country boundaries from the World Atlas TopoJSON dataset and renders them as SVG paths. It uses d3.geoNaturalEarth1 for the projection, d3.geoPath to generate path data, and topojson’s feature method to convert the TopoJSON topology into GeoJSON features. The sphere is drawn first as a separate path, followed by each country’s path.

Ppravallikayaram12

85% match

Loading thumbnail…

Fork of World Map ICE-8

This example displays a world map using an equirectangular projection, with countries rendered as white paths with green strokes on a teal sphere. It loads geographic data from the world-atlas TopoJSON file, converting it to GeoJSON with `topojson.feature` and projecting it via `d3.geoEquirectangular` and `d3.geoPath`. The map supports hover interactions, highlighting countries in green when the mouse passes over them.

Nnikhitha693

85% match

Loading thumbnail…

Fork of Fork of ice8-vignesh

An interactive world map displays country boundaries loaded from world-atlas TopoJSON, rendered via d3.geoPath with SVG paths filled in blue. Users can drag to rotate the orthographic globe, zoom with d3.zoom, and click countries to switch projections between orthographic, Mercator, and Albers USA, with transitions animating the change. The SVG also includes a graticule and a black sphere outline.

SSANEEM MOHAMMAD

84% match

Loading thumbnail…

Fork of ICE-8 World Map

This example displays a world map rendered with D3’s natural Earth projection, using orange country shapes against a light green sphere background. It loads geographic data from a TopoJSON file hosted on GitHub, then converts it to GeoJSON with `topojson.feature` before drawing paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The map is static, with dark strokes separating countries and no interactive behavior.

Bbhargavarathod

84% match