Fork of ICE 08 11540905

100%

Fork of ICE 08 11540905

✓ Published0🌍 Public

Last edited Jul 5, 2023

Created on Jul 5, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Fork of ICE 08 11540905 - test

This interactive map displays world countries in a blue and green color scheme, with hover effects that change the country fill to red. It uses d3.geoEquirectangular projection and d3.geoPath to render the map from a Sphere object, while country boundaries and features are drawn from a JSON file loaded from the world-atlas package. The TopoJSON feature method creates GeoJSON objects for the countries. The map is rendered as an SVG with CSS-based hover styling.

MMatovu Ronald

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

90% match

Loading thumbnail…

Fork of ICE 08 11540905

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.

NNikhilchiguru-8

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

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

87% match