Skip to main content
SimilarExport ZIP
100%

ICE-8 World Map

✓ Published0🌍 Public
Aachalasam
Last edited Jul 10, 2022
Created on Jul 9, 2022
Forked from HTML Starter

This is a world map visualization rendered with SVG, showing countries as purple regions with pink borders against a light yellow sphere. The map uses a natural Earth projection and loads geographic data from the World Atlas JSON file. The code imports `geoPath` and `geoNaturalEarth1` from d3, along with the `feature` function from topojson, to generate and project the country boundaries onto the SVG canvas.

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 8 World Map

A world map rendered in SVG displays countries as cream-colored landmasses against a light blue sphere, with grey borders between countries and light grey graticule lines. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw geographic features. TopoJSON data from the world-atlas package is processed using `feature` and `mesh` to generate country boundaries and land shapes.

Ddivyageethanjali
94% match
Loading thumbnail…

ICE8 - World Map

This world map visualization displays country borders as green polygons on a steel-blue background, rendered using SVG. It uses d3’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and countries, with geographic data loaded from the world-atlas TopoJSON file via `json()` and parsed with `feature()`. Each country is appended as a path element with a black stroke, creating a simple, static choropleth-free view of global landmasses.

Aavnreddy95
93% 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 visualization displays a world map using a natural Earth projection, with each country rendered as a distinct SVG path. The map is initially presented as a grey sphere with countries shown in their default color, and hovering over a country highlights it in blue with a white outline. The code uses D3.js v5 and the topojson library to fetch geospatial data from the world-atlas dataset and convert it into geographic features via `d3.geoPath` and `projection`. The rendering approach leverages the `geoNaturalEarth1` projection for a visually balanced earth representation.

Pprashanth yamala
93% match
Loading thumbnail…

ICE8 - World Map

This visualization presents a static world map rendered with SVG paths. A lime-green sphere outline frames the map, while each country is filled in pink with a subtle black stroke. The code uses D3’s `geoNaturalEarth1` projection and `geoPath` to generate shapes from country boundaries provided by the world-atlas dataset. Countries are loaded as TopoJSON features and appended as individual paths, with styling defined in the accompanying CSS.

CCHANDU BHARGAVI
93% match
Loading thumbnail…

ICE 8 - WORLD MAP

This example displays a world map using a natural Earth projection, rendering each country as a purple SVG path with white borders against a pink background. It loads geographic data from the `world-atlas` TopoJSON dataset and converts it to GeoJSON using the `feature` function from `topojson`. The visualization is built with D3 v5, using `geoNaturalEarth1` for the projection, `geoPath` to generate SVG paths, and `select`/`json` for DOM manipulation and asynchronous data loading. A gray sphere outlines the earth's boundary.

AAshrith Kudidhi
92% match
Loading thumbnail…

ICE 8- World Map

This visualization displays a world map using a natural Earth projection, rendered as SVG paths. Countries appear in green with brown outlines against a steel-blue sphere, conveying a simple geographic overview. The map draws country boundaries from the world-atlas JSON dataset, which is loaded and processed using D3’s `json` and `geoPath` functions with the `geoNaturalEarth1` projection, while TopoJSON’s `feature` extracts the country geometries. The code builds the map with D3 v5, appending sphere and country paths to the SVG canvas.

AAmruthaVee
92% match
Loading thumbnail…

ICE8 - World Map

This visualization displays a world map using the Natural Earth projection, with countries rendered in yellow and the ocean sphere in light blue. It loads country boundaries from the world-atlas TopoJSON dataset and converts them into GeoJSON features using the `feature` function from topojson. The map is drawn with `d3.geoPath` and `geoNaturalEarth1` from D3 v5, appended as SVG paths to a 960x500 canvas. Country strokes are semi-transparent black, creating subtle separation between landmasses.

Kkartik900
92% match