Skip to main content
SimilarExport ZIP
100%

Fork of ICE 8 Making Maps

✓ Published1🌍 Public
Aamiralitah
Last edited Jul 9, 2022
Created on Jul 9, 2022

This example renders a world map using D3 v5 and TopoJSON, displaying country boundaries as green SVG paths with white strokes. It fetches geographic data from a GitHub-hosted `countries-110m.json` file, then uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the shapes. All countries are appended to an SVG canvas as `path` elements with a class of `country`, styled through CSS. The map fills a 960×500 viewport and demonstrates basic choropleth-free cartographic visualization.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE 8 Making Maps

This example displays a world map with each country rendered as a green SVG path with white borders. It uses d3.json to load TopoJSON data from a GitHub gist, then extracts country features with the topojson feature function. The map projection and path generation are handled by d3.geoNaturalEarth1 and d3.geoPath, which project the geographic coordinates onto a 960×500 SVG canvas.

Aamiralitah
96% match
Loading thumbnail…

Fork of ICE 8

This example shows a basic world map with all countries rendered as green SVG paths with white borders on a light blue background. It loads GeoJSON country boundaries from a remote TopoJSON file and projects them using the Natural Earth projection. The code uses D3 v5’s `geoPath` and `geoNaturalEarth1` alongside the TopoJSON `feature` API to convert TopoJSON topology into GeoJSON features. Country paths are appended to the SVG via a data join, with no interactivity or additional styling beyond the static filled shapes.

Aamiralitah
94% match
Loading thumbnail…

Fork of Fork of ICE-8 world map

This example shows a world map rendered in an SVG using D3 v5, with countries filled in orange and outlined in red against a skyblue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON data from a remote gist into GeoJSON for country boundaries. The visualization loads the world map data asynchronously via `d3.json` and appends each country path to the SVG. The sphere background and country styling are defined in the accompanying CSS.

GGARIDIDEEKSHITHREDDY
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
92% 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
92% 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
92% match
Loading thumbnail…

Fork of ICE-8(World Map)

This example renders a world map using D3 v5 and TopoJSON, displaying countries as dark green filled polygons against a blue sphere. It uses the `geoEquirectangular` projection with `d3.geoPath` to generate SVG paths for each country, while the sphere and country hover states are styled via CSS classes. The map data comes from the world-atlas countries-110m.json file, and the `feature` method from TopoJSON converts the TopoJSON data into GeoJSON features for rendering.

Aajaysonu
92% match
Loading thumbnail…

Fork of ICE8 - World Map

This example shows a simple world map with countries rendered in light green on a blue spherical background. It uses the Natural Earth projection and loads country boundaries from the world-atlas TopoJSON dataset. The visualization is built with D3 v5, employing `d3.geoNaturalEarth1` for projection, `d3.geoPath` for generating SVG paths, and `topojson.feature` to extract GeoJSON features from the TopoJSON data. Each country is drawn as an SVG path with a black stroke and low opacity.

Bbhargavarathod
92% match