Fork of ICE 08 11540905

100%

Fork of ICE 08 11540905

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

This visualization displays a world map with countries rendered as filled shapes. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw geographic boundaries from TopoJSON data loaded via `json()`. The map is an SVG with an orange ocean background, navy countries, and a red hover effect. Country borders are defined with a black stroke, and hovering any country changes its fill color.

AI-generated description

MIT Licensed

Similar vizzes

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

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

91% match

Loading thumbnail…

Fork of ICE 08 11540905

This interactive map displays the world's countries, rendered as SVG paths filled with a green color and outlined in black. The visualization uses D3.js version 5 and the TopoJSON library with the `geoEquirectangular` projection and `geoPath` to draw the map, pulling country boundaries from the world-atlas dataset (countries-110m.json). Upon hovering over a country, its fill color changes from green to blue, providing a simple interactive feedback mechanism.

SstellaWangg

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

89% match

Loading thumbnail…

Fork of ICE-8 world map

This fork of ICE-8 displays a world map with countries rendered as orange shapes outlined in red, set against a sky-blue sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the geographic features from a TopoJSON file loaded via `json()`. The map is rendered as SVG, with each country appended as a path element, while the sphere background is drawn separately. The styling applies low stroke opacity to create a subtle border effect.

GGARIDIDEEKSHITHREDDY

89% match

Loading thumbnail…

Fork of Fork of Fork of ICE 08 11540905

This visualization displays a world map with countries filled in green and blue, highlighting hovered regions in red. It uses D3 v5 and TopoJSON to render geographic boundaries as SVG paths via `d3.geoPath`, with the `topojson` library parsing the map data. Country styling and hover effects are controlled through CSS classes, while the SVG canvas is sized to 960 by 500 pixels. The map focuses on interactive exploration of national borders without additional data layers or animations.

Ssumanthsomu1

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

89% match