Fork ICE 8 world map

100%

Fork ICE 8 world map

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork ICE 8 world map

This visualization displays a world map with countries rendered in saddle brown against a light blue sphere, using a simple equirectangular projection. Countries highlight in rosy brown on hover. The code loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using TopoJSON’s `feature` method. It renders the map with D3’s `geoPath` and `geoEquirectangular` APIs, appending SVG path elements for each country. Styling is handled via CSS classes for the sphere and country fills.

Ssushmithameher-patnam

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

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

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

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

92% match

Loading thumbnail…

Fork of Data visualization ICE-8

This visualization displays a world map using an equirectangular projection, with countries rendered as red polygons outlined in green against a yellow sphere background. The map loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. D3’s `geoEquirectangular` and `geoPath` handle the projection and path generation, while SVG paths are bound to country features via `selectAll` and `enter`. Hovering over a country changes its fill to blue through CSS.

Vvamshisoletii

92% match

Loading thumbnail…

Fork of ICE 08 11540905

This example shows a world map with countries rendered in green and an ocean-blue background, highlighting how geographic boundaries appear on an equirectangular projection. When hovered, individual countries change color to red. The visualization uses d3.geoPath and d3.geoEquirectangular to project GeoJSON data from a TopoJSON source file, with the topojson.feature method converting the TopoJSON objects into drawable features. The SVG is styled using CSS classes for the earth background and country fills.

Ssnehareddygurram

92% match

Loading thumbnail…

Fork of Fork of ICE-8 world map

This example shows a world map rendered in an SVG using D3 v5, with countries filled in orange and outlined in red against a skyblue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON data from a remote gist into GeoJSON for country boundaries. The visualization loads the world map data asynchronously via `d3.json` and appends each country path to the SVG. The sphere background and country styling are defined in the accompanying CSS.

GGARIDIDEEKSHITHREDDY

92% match