Fork of World Map ICE-8

100%

Fork of World Map ICE-8

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Fork of ICE-8(World Map)

This example renders a world map using D3 v5 and TopoJSON, displaying countries as dark green filled polygons against a blue sphere. It uses the `geoEquirectangular` projection with `d3.geoPath` to generate SVG paths for each country, while the sphere and country hover states are styled via CSS classes. The map data comes from the world-atlas countries-110m.json file, and the `feature` method from TopoJSON converts the TopoJSON data into GeoJSON features for rendering.

Aajaysonu

92% match

Loading thumbnail…

Fork of ICE-8_World_Map

This example displays a world map using an equirectangular projection, with countries rendered as purple filled shapes outlined in yellow. It uses D3 v5’s `d3.geoPath` and `geoEquirectangular` to draw the geographic features, while TopoJSON’s `feature` method extracts country geometries from the world-atlas dataset. The sphere background is blue, and hovering over a country changes its fill to green, implemented via a CSS `:hover` rule on SVG path elements.

KKolliTeja

91% match

Loading thumbnail…

Fork of ICE- 8 World Map

This map visualization displays world countries and oceans using an equirectangular projection. It renders a geographic world map where each country is a filled path with a black stroke, and hovering highlights the country in cyan. The code loads country boundaries from a world-atlas TopoJSON file and converts them to GeoJSON features using the topojson library. SVG elements are generated with d3.geoPath and d3.geoEquirectangular, with styles applied via an external CSS stylesheet.

Mmanishcheruku

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

90% match

Loading thumbnail…

Fork of ICE 08 11540905

This example displays a world map with country boundaries, rendered as an SVG using D3.js. The map uses an equirectangular projection and fills the Earth with a light blue color, while countries are colored green and shift to red on hover. It loads GeoJSON data representing boundary lines from a remote source, processes it with the TopoJSON library’s `feature` method, and draws the paths via `d3.geoPath`. The visualization relies on D3’s `select`, `json`, and `geoEquirectangular` functions.

Ssnehareddygurram

89% match

Loading thumbnail…

Fork of ICE8 - World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans in blue using a Natural Earth projection. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them with the `feature` method from TopoJSON. The visualization uses `d3.geoPath` with `d3.geoNaturalEarth1` to draw the sphere outline and country paths, with styling applied through CSS classes.

KKarnisrikanth

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

89% match