ICE-08 11550685

100%

ICE-08 11550685

✓ Published0🌍 Public

AAISWARYAMARAPATLA1999

Last edited Apr 6, 2023

Created on Apr 6, 2023

This example presents an interactive world map using a pink-filled sphere and blue countries with red borders. Hovering over a country highlights it in yellow. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to render geographic features, while TopoJSON’s `feature` API converts the world-atlas countries-110m.json data into GeoJSON paths. The SVG elements are managed with D3 selections, including `select`, `selectAll`, and `enter`. The map loads the TopoJSON dataset from a CDN and includes basic CSS styling for interactivity.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

ICE 08 worldmap

This example displays an interactive world map using an equirectangular projection, rendered as SVG paths with countries filled in a light cream color and a blue ocean background. Hovering over any country changes its fill to red, providing immediate visual feedback. The visualization uses D3 v5’s `d3.geoPath` and `d3.geoEquirectangular` for map generation, while TopoJSON’s `feature` method converts the world-atlas countries-110m.json dataset into GeoJSON features for rendering. Styling is controlled through CSS classes for earth and country elements.

Aayodhyanandh

91% match

Loading thumbnail…

ICE-8(11630234)

This example displays an interactive world map using an equirectangular projection, with countries rendered in green and a blue ocean sphere. The map loads geographic data from a world-atlas TopoJSON file and visualizes it as SVG paths. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` for projection and path generation, and TopoJSON's `feature` method to convert the data into GeoJSON features. Hovering over a country highlights it in red via CSS.

KKovvuri Supraj

91% match

Loading thumbnail…

ICE - 8 - World Map

This example displays an interactive world map using an equirectangular projection, with countries rendered as SVG paths and a light blue sphere representing the globe. The map loads GeoJSON data from a hosted JSON file, processed through TopoJSON’s `feature` method, and draws each country with a green fill and black stroke. Hovering over a country highlights it in a warm peach color. The visualization uses D3 v5 APIs including `d3.geoEquirectangular`, `d3.geoPath`, and `d3.select`, with React as the underlying framework.

IIndiraSiripurapu

90% match

Loading thumbnail…

ICE 08 11590101

This example presents a world map rendered with D3 v5 and TopoJSON, using the `geoMercator` projection and `geoPath` to draw country boundaries from the world-atlas countries-110m dataset. The SVG displays oceans in blue and countries in purple, with a hover effect that changes the fill color to pink via CSS. The code loads the TopoJSON data asynchronously with `d3.json`, converts it to GeoJSON using `feature`, and appends each country as a path element.

DDivyasri0310

90% match

Loading thumbnail…

ICE-08 11603435

This visualization displays a world map using an equirectangular projection, with countries rendered as black-filled paths against a blue ocean sphere. It loads geospatial data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature()` method from TopoJSON. The D3 v5 code employs `geoEquirectangular()`, `geoPath()`, and `.projection()` to generate the map geometry. Countries change to a red color on hover through a CSS `:hover` rule, and the SVG output is fixed at 960 by 500 pixels.

0057SatvikDamera

90% match

Loading thumbnail…

ICE-8_world_map

This example shows a world map with countries colored in red against an orange sphere, and hovering highlights each country in gray. It uses D3 v5’s `geoAzimuthalEqualArea` projection with `geoPath` to render the map, and TopoJSON’s `feature` method to extract country boundaries from the world-atlas countries-10m dataset. The SVG elements are styled via CSS, including hover effects and stroke opacity.

NNiharika-Guthikonda

90% match

Loading thumbnail…

ICE-8_World_Map

This visualization displays a world map with countries rendered in purple with yellow outlines, set against a blue sphere background. Using d3-geo's geoEquirectangular projection, the code loads GeoJSON data from the world-atlas TopoJSON file via topojson.feature to draw each country path. The map responds to hover events, highlighting countries in green. It also includes a canvas-based alternative implementation using d3.geoPath with a graticule layer.

MMeghanaArepalli

89% match

Loading thumbnail…

World Map ICE -8

This example displays a world map with countries rendered in pink against a green ocean, highlighting each nation with a white border. When hovered over, individual countries turn yellow. The visualization uses D3 v5 and TopoJSON to load country boundaries from a world-atlas GeoJSON dataset, projecting them with d3.geoEquirectangular and drawing the paths as SVG elements. The map's background sphere and country outlines are styled using simple CSS rules.

GGogineni44

89% match