Skip to main content
SimilarExport ZIP
100%

Fork of Country map ICE-8

✓ Published0🌍 Public
Aarcothanmukha
Last edited Apr 5, 2022
Created on Apr 5, 2022

This example displays a map of Africa using an azimuthal projection, rendered as brown filled regions with black borders. The visualization loads geographic data from a JSON file hosted on GitHub Gist and draws it using D3.js v4’s `d3.geoMercator` projection combined with `d3.geoPath`. The code fetches the GeoJSON features, appends SVG `path` elements to the page, and styles them with fill and stroke attributes. No interactivity or additional layers are shown; the result is a static, single-color country map.

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 ICE 8 - Country Map

This example displays a static choropleth-style map of countries, rendered as gray SVG paths with dark strokes on a white background. The code uses D3 v4’s `d3.geoPath` with a `d3.geoAlbersUsa` projection, though the title suggests a country map. It loads TopoJSON data from a remote gist via `d3.json`, then applies `topojson.feature` to extract country geometries. The map is positioned within an SVG using margin-based translation, styled with CSS from an external stylesheet.

GGalineeharika
87% match
Loading thumbnail…

Fork of Country map using d3.js

This visualization displays a map of African countries with administrative subdivisions, rendered as a static SVG graphic. The map uses a green fill for state regions with black stroke outlines, set against a pink sphere background. The code loads GeoJSON data from a GitHub gist and processes it using topojson’s `feature` API, while d3.geoMercator projection and d3.geoPath generate the geographic paths. The rendering approach relies on SVG path elements appended dynamically via d3’s data join, with styling defined in CSS classes.

Bbhargavarathod
87% match
Loading thumbnail…

Fork of Fork of Fork of ICE 8 - Country Map

This example displays a static map of countries filled in red with dark outlines, rendered as SVG paths on a light green background. It uses D3 v4’s `d3.geoPath` with an AlbersUSA projection to draw geographic boundaries, and `topojson.feature` to extract country polygons from a remote TopoJSON source. The map is centered and scaled within a fixed viewport, with no interactive or animated behavior.

KKarnisrikanth
86% match
Loading thumbnail…

Fork of ICE 8 country map

This map visualization renders global country boundaries using a Mercator projection, with each country filled by a categorical color scheme. Built with React and D3 v5, the code loads TopoJSON data from a GitHub gist, processes it using the `topojson` feature API, and draws paths via `d3.geoPath` with a `geoMercator` projection. The SVG output responds to hover events by turning countries green, while a title shows each country’s interpolated value. The visualization includes a heading and uses the `d3.schemeCategory10` palette for initial coloring.

Aamiralitah
86% match
Loading thumbnail…

Fork of World Map : ICE-8

This example visualizes a world map using an azimuthal equidistant projection, with countries rendered as light green SVG paths over a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset via `d3.json`, converts it to GeoJSON features using `topojson.feature`, and draws them with `d3.geoPath` and `geoAzimuthalEquidistant`. The code imports these functions from the d3 v5 and topojson libraries within a React framework context.

Aarcothanmukha
86% match
Loading thumbnail…

Fork of ICE 8: Country Map

This visualization presents a world map using the spherical Mercator projection. Landmasses are rendered in a deep red, with graticules shown in light gray and country interiors outlined in teal against a pale sphere. The example leverages d3.geoPath, geoMercator, and geoGraticule from D3 to generate geographic shapes, while React manages the SVG rendering. Topological data from World Atlas 110m is processed with topojson’s feature and mesh functions to distinguish land from country interiors. The projection and custom styling convey a clean, minimalist cartographic aesthetic.

Bbhargavarathod
85% match
Loading thumbnail…

Fork of Fork of ICE 8 - Country Map

This example displays a map of the United States rendered as grey SVG paths with dark strokes. The visualization uses D3 v4’s `d3.geoPath` and the `d3.geoAlbersUsa` projection to draw country boundaries from TopoJSON data loaded via `d3.json` and parsed with `topojson.feature`. The map is centered within an SVG container using a fixed translate transform, with styling applied through CSS and inline attributes.

GGalineeharika
85% match
Loading thumbnail…

Fork of ICE 8 Making Maps

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.

Aamiralitah
85% match