Skip to main content
SimilarExport ZIP
100%

Fork of ICE8 World Map

✓ Published1🌍 Public
KKolliTeja
Last edited Apr 3, 2022
Created on Apr 3, 2022

This example renders a world map using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. Country boundaries are drawn as SVG paths from TopoJSON data loaded from a GitHub gist, with each country filled in teal and outlined with a faint red stroke. A light blue sphere path forms the globe’s background. The code uses d3.select, d3.json, and topojson.feature to process the geographic features.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE8 World Map

This fork of an ICE8 world map displays country boundaries using a natural Earth projection. The visualization renders a static SVG map, loading geographic data from a Gist-hosted ICE7.json file. The code employs D3 v5’s `geoPath` and `geoNaturalEarth1` for map generation, alongside the `feature` function from topojson to extract country polygons. The map features a light blue sphere background, with countries filled in teal and outlined with faint red strokes, all presented within a fixed 960×500 viewport.

Kkollirohit2000
94% match
Loading thumbnail…

Fork of Fork of ICE-8 world map

This example displays a world map using a natural Earth projection, with countries filled in light green and the globe as a blue sphere. It loads geographic data from a TopoJSON file stored in a GitHub gist, then converts it to GeoJSON using the `feature` function from TopoJSON. The map renders in SVG, with `d3.geoPath` and `d3.geoNaturalEarth1` handling the projection and path generation. The visualization is static, showing only the country outlines and spherical background.

KKolliTeja
94% match
Loading thumbnail…

Fork of ICE8 - World Map

This example displays a world map rendered in an SVG using the Natural Earth projection. It loads country boundaries from a TopoJSON file via `d3.json` and converts them with `topojson.feature`. The code applies `d3.geoPath` and `d3.geoNaturalEarth1` to draw both a sphere outline and country shapes, which fill with pink and brighten to maroon on hover through CSS. The visualization demonstrates basic geographic data mapping with straightforward styling.

Ffouzanuddin
93% match
Loading thumbnail…

Fork of Fork of ICE-8 world map

This example displays a world map using a natural Earth projection, with countries filled in light green and the surrounding sphere in sky blue. It renders geographic data as SVG paths using `d3.geoPath` with `geoNaturalEarth1`. The map loads a TopoJSON file from a GitHub gist, converts it to GeoJSON with `topojson.feature`, and appends country paths to the SVG. The styles define a black stroke with low opacity for country borders, creating a subtle outline effect.

Bblikitha
93% match
Loading thumbnail…

Fork of Fork of ICE-8 world map

This example displays a world map using a natural Earth projection, with countries filled in light green and the surrounding sphere in sky blue. It renders geographic data as SVG paths using `d3.geoPath` with `geoNaturalEarth1`. The map loads a TopoJSON file from a GitHub gist, converts it to GeoJSON with `topojson.feature`, and appends country paths to the SVG. The styles define a black stroke with low opacity for country borders, creating a subtle outline effect.

Bblikitha
93% match
Loading thumbnail…

Fork of ICE-8 World Map

This example displays a world map rendered with D3’s natural Earth projection, using orange country shapes against a light green sphere background. It loads geographic data from a TopoJSON file hosted on GitHub, then converts it to GeoJSON with `topojson.feature` before drawing paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The map is static, with dark strokes separating countries and no interactive behavior.

Bbhargavarathod
93% match
Loading thumbnail…

Fork of ICE8 - World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans in blue using a Natural Earth projection. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them with the `feature` method from TopoJSON. The visualization uses `d3.geoPath` with `d3.geoNaturalEarth1` to draw the sphere outline and country paths, with styling applied through CSS classes.

KKarnisrikanth
93% match
Loading thumbnail…

Fork of World Map ICE 8

This example displays a world map with countries rendered in red on a yellow sphere, using a natural Earth projection. It loads world geography data from a JSON file via `d3.json` and processes the TopoJSON with `feature` from the `topojson` library. The map is drawn as SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization is built with D3 v5 and React, with styling applied through CSS classes for the sphere and country paths.

Ssathwikrajidi
93% match