ICE 8

100%

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

A world map rendered in red on a blue sphere, with country borders outlined in white, highlights each nation’s shape. Built with D3 v5 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from the world-atlas dataset. Hovering a country changes its fill to a darker red, while the base sphere is drawn using a GeoJSON Sphere object, displaying a full global projection.

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

ICE 8

This example renders a world map using the equirectangular projection, filling each country solid red against a blue sphere. It highlights countries in black on hover. The visualization loads TopoJSON world-atlas data, converts it to GeoJSON with TopoJSON’s `feature` method, and draws paths using `d3.geoPath` and `d3.geoEquirectangular`. The SVG output is styled via CSS, and interactions rely on the `:hover` selector.

Vvineeth0000

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

Loading thumbnail…

ICE #8 World Map

This map shows world country boundaries on a blue sphere with a graticule grid overlay. It uses D3's geoMercator projection and geoPath to render geographic features, while topojson's feature method converts TopoJSON data from the world-atlas dataset. The SVG elements include styled paths for the sphere, graticule, and individual countries loaded asynchronously.

KKevin Raj

90% match

Loading thumbnail…

ICE-8 World Map

This interactive world map visualizes country boundaries as vector paths, with pink landmasses set against a blue ocean background. Hovering over a country highlights it in red. Built with D3 version 5, the visualization uses `d3.geoPath` and `d3.geoEquirectangular` for map projection and rendering. Country geometries come from the world-atlas dataset in TopoJSON format, which is converted to GeoJSON features using the `topojson` package’s `feature` method, then drawn as SVG paths.

Ssreesushmav

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 presents a world map rendered in an SVG, where countries appear in light green with purple outlines and the ocean is filled with a blue sphere. The map is generated using D3.js (v5) with a geoEquirectangular projection and the geoPath function to draw geographic shapes. TopoJSON's feature method converts country boundaries from the world-atlas countries-110m JSON data source, while the CSS defines the visual styling for the sphere and country elements.

Kkartik900

90% match

Loading thumbnail…

ICE-8(World Map)

This interactive world map displays country boundaries using an equirectangular projection, rendered as SVG paths. The visualization loads geographic data from a TopoJSON world-atlas file and converts it to GeoJSON features via the `topojson.feature` API. Countries are drawn with `d3.geoPath` and respond to hover by changing fill color through CSS. The sphere background uses a blue fill, while countries appear in dark green with black strokes, creating clear visual separation between landmasses and ocean.

Jjayanthamol99

90% match