ice 8- world map

100%

ice 8- world map

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This visualization displays a world map using an equirectangular projection, with each country rendered as a distinct path. It uses d3.geoPath and d3.geoEquirectangular to project the globe, and TopoJSON’s feature method to convert the world-atlas countries-110m.json data into GeoJSON. The map includes a blue sphere outline, white country fills with black borders, and a hover effect that highlights countries in orange via CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map ICE 8

This visualization displays a global world map using the equirectangular projection, with countries rendered as individual SVG paths filled in brown and outlined in black. The sphere background is shaded blue, and hovering over any country highlights it in a darker orange. It uses D3 v5’s `geoPath` and `geoEquirectangular` functions together with TopoJSON’s `feature` method to convert country boundaries from the world-atlas dataset. The map is drawn entirely with SVG elements, and interactivity is handled by CSS hover selectors.

Mmboinapally17

93% match

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

91% match

Loading thumbnail…

ICE:8 World Map

This example displays a world map rendered as an SVG, using an equirectangular projection to plot countries from the world-atlas TopoJSON dataset. A light blue sphere path provides the ocean background, while each country is drawn as a brown filled path with black strokes. The visualization is built with D3 v5, specifically using `d3.geoEquirectangular()` for projection, `d3.geoPath()` to generate SVG path data, and the TopoJSON client’s `feature()` function to extract GeoJSON from the loaded data.

SSharmaAshwini

91% match

Loading thumbnail…

ICE 8

This visualization displays a world map using an equirectangular projection, with countries rendered in red and oceans in blue. The map is drawn as SVG paths generated by `d3.geoPath`, using geographic data from the world-atlas TopoJSON file, converted to GeoJSON via TopoJSON’s `feature` method. Country shapes respond to mouse hover by changing fill color, and the map is framed by a blue sphere outline.

MMounishSeeni

91% match

Loading thumbnail…

ice-8

This visualization displays a world map using an equirectangular projection, with white countries on a light blue ocean background that change to green on hover. The geographic data is loaded from the world-atlas countries-50m.json dataset and converted from TopoJSON to GeoJSON using the `feature` method. The map is rendered as SVG paths via D3’s `geoPath` and `geoEquirectangular` projection functions, with styling controlled by CSS selectors for the earth and country layers.

VVenkat-Dhulipalla

90% match

Loading thumbnail…

World Map ICE 8

This example displays a world map using an equirectangular projection, with individual countries colored brown against a blue sphere background. Hovering over a country highlights it in dark orange. The visualization is rendered as SVG using D3 v5, with geographic paths generated by `d3.geoPath` and country boundaries derived from the world-atlas TopoJSON dataset. The `geoEquirectangular` projection defines the map layout, while CSS hover rules handle the interactive highlighting.

EEeshwarReddy

90% match

Loading thumbnail…

ICE - 8 World Map with D3.js! (11508271)

This example displays an interactive world map using an equirectangular projection, with countries rendered as SVG paths filled in turquoise and outlined in black. Hovering over any country highlights it in red. Built with D3.js v5 and TopoJSON, it uses `d3.geoEquirectangular` and `d3.geoPath` to generate the geometry, and loads geographic data from the world-atlas countries-110m.json file via `d3.json`.

Aabdulmoin9624

90% match