ICE - 8 - World Map

100%

ICE - 8 - World Map

✓ Published1🌍 Public

Last edited Apr 13, 2023

Created on Apr 10, 2023

This interactive world map displays countries as green regions on a blue sphere, highlighting each country in red on hover. The visualization uses a TopoJSON file containing geographic data, loaded from a GitHub gist, and renders the map using SVG paths. Built with React and D3 v5, the code employs D3’s `geoEquirectangular` projection and `geoPath` to generate the map, while the `topojson.feature` function converts the TopoJSON data into GeoJSON features for country boundaries.

AI-generated description

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

Similar vizzes

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

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

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

91% match

Loading thumbnail…

ICE-8 World Map

This interactive world map visualizes country boundaries using data from the World Atlas TopoJSON. It renders a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, displaying green landmasses with teal country interiors and gray graticules on an orange sphere. Built with React, the visualization loads the TopoJSON via d3.json and uses topojson.feature and topojson.mesh to prepare the geographic data for SVG rendering.

Llikith1266

91% match

Loading thumbnail…

ICE - 8: World Map

This example displays a world map composed of green countries with white borders on a blue background. It uses D3 v5 and topojson to fetch and convert GeoJSON data from the world-atlas CDN, then projects it with d3.geoNaturalEarth1 and renders it as SVG paths via d3.geoPath. The code selects an SVG element and appends each country feature as a path.

RRajeevMukhesh

91% match

Loading thumbnail…

ICE-8 (World Map)

This interactive world map uses an orthographic projection to render a globe, showing landmasses in green against a dark blue ocean with graticule lines. The visualization retrieves country boundaries from a world-atlas TopoJSON file, then uses d3.geoPath and d3.geoOrthographic to draw the sphere, graticules, and country interiors as SVG paths. Built with React and d3.v7, the map displays loading text until the data is fully processed.

AAnjan Shrestha

91% match

Loading thumbnail…

ICE 8 - World Map

This visualization shows a world map rendered as a spherical globe, with countries filled in yellow and outlined in green against a blue ocean. Hovering over any country turns it green. The map uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and landmasses, while TopoJSON’s `feature` converts world-atlas data from a remote JSON file into GeoJSON for rendering. The SVG output includes a blue background sphere and interactive hover styling defined in CSS.

SSuresh John Wesly

91% match

Loading thumbnail…

World Map ICE-8

This interactive world map visualizes countries in blue on a light green background, with borders highlighted in black and a white hover effect. Built with D3.js (v5) and the TopoJSON package, it uses the geoEquirectangular projection and geoPath to render GeoJSON features derived from the world-atlas countries-110m dataset. The SVG rendering responds to mouseover events, changing each country's fill to white.

GGogineni44

91% match