Skip to main content
SimilarExport ZIP
100%

ICE ON CREATING A WORLD MAP

✓ Published0🌍 Public
Aakhilgupta11
Last edited Mar 27, 2023
Created on Mar 25, 2023
Forked from HTML Starter

This example visualizes a world map with countries rendered as yellow shapes on a red spherical backdrop, using D3.js (d3.v5) to project geographic data. The visualization employs `geoEquirectangular` for map projection and `geoPath` to generate the path data, while TopoJSON’s `feature` method converts country boundaries from the `world-atlas` JSON source into GeoJSON features. The map is drawn as an SVG graphic, with CSS hover effects that change country fills to green, and the sphere is styled via the `.sphere` class.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE ON CREATING A WORLD MAP

This visualization displays a world map with countries rendered as individual SVG paths, using a blue sphere backdrop and white country shapes with green strokes. Countries highlight in yellow on hover. The map is built with React and D3 v5, using `d3.geoEquirectangular` for projection, `d3.geoPath` for path generation, and TopoJSON’s `feature` method to convert world-atlas data (countries-110m.json) into GeoJSON. The SVG is populated dynamically via `selectAll` and `enter` data joins.

SSravani93-creater
92% match
Loading thumbnail…

ICE8-CREATION OF WORLD MAP

This visualization renders a world map using D3.js and TopoJSON within a React project. It displays countries as orange SVG paths with red strokes on a blue sphere. The code uses `geoEquirectangular` and `geoPath` projections, sourcing geographic data from the world-atlas JSON. Countries highlight blue on hover, and the map is generated using D3's selection and data join methods.

Aaiswaryapalla
89% 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
89% match
Loading thumbnail…

ICE-08 11550685

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.

AAISWARYAMARAPATLA1999
88% match
Loading thumbnail…

ICE on World Map

This example displays a world map rendered in SVG, with countries filled in maroon and outlined in green against a skyblue sphere. Hovering over a country changes its fill to brown. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw the map, with geographic data loaded as TopoJSON from the world-atlas dataset. The page also leverages `topojson.feature` to convert the TopoJSON into GeoJSON for rendering.

DDineshK2602
88% 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
87% 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
87% 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
87% match