Fork of ICE8

100%

✓ Published0🌍 Public

Last edited Nov 3, 2025

Created on Nov 3, 2025

Forked from ICE7

This world choropleth displays a static color-coded map of countries, with data provided inline in the code rather than through an external CSV file. The visualization uses D3.js version 7 to render the geographic boundaries via `d3.geoPath` and applies sequential color scales to encode values. It relies on the TopoJSON client library to load and convert geographic data for the map’s projection. A hover tooltip is implemented using a fixed overlay that shows details, though no value labels are present on the map itself.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8

This choropleth shows a world map with countries colored by their Pasta Variety Index, a higher value indicating more varieties. Hovering reveals each country’s value via a tooltip. Built with D3 v7 and TopoJSON, it uses `d3.geoMercator` and `d3.geoPath` to project the 110m country outlines, with a sequential `YlOrRd` color scale mapping values from 4 to 13. The map fetches world-atlas data asynchronously and renders to SVG.

Kkovuribalanagavinay@gmail.com

88% match

Loading thumbnail…

Fork ICE 8 world map

This visualization displays a world map with countries rendered in saddle brown against a light blue sphere, using a simple equirectangular projection. Countries highlight in rosy brown on hover. The code loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using TopoJSON’s `feature` method. It renders the map with D3’s `geoPath` and `geoEquirectangular` APIs, appending SVG path elements for each country. Styling is handled via CSS classes for the sphere and country fills.

Ssushmithameher-patnam

87% match

Loading thumbnail…

Fork of ICE8-network

This example displays a world map with sample population values shaded using a blue sequential color scale. It uses D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to render countries from TopoJSON data sourced from world-atlas’s `countries-110m.json`. Hovering over a shaded country reveals a tooltip with the population value; countries without data appear gray. The code applies a logarithmic domain to the color scale and relies on `topojson-client` for GeoJSON conversion, with SVG output.

Ssaiprasadpilla937@gmail.com

86% match

Loading thumbnail…

Fork of ICE- 8 World Map

This map visualization displays world countries and oceans using an equirectangular projection. It renders a geographic world map where each country is a filled path with a black stroke, and hovering highlights the country in cyan. The code loads country boundaries from a world-atlas TopoJSON file and converts them to GeoJSON features using the topojson library. SVG elements are generated with d3.geoPath and d3.geoEquirectangular, with styles applied via an external CSS stylesheet.

Mmanishcheruku

86% match

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

86% match

Loading thumbnail…

Fork of ICE8 - World Map

This visualization displays a world map using the Natural Earth projection, with countries rendered as orange polygons outlined in black against a blue background. The code loads geographic data from the world-atlas TopoJSON dataset via `d3.json`, converts it to GeoJSON using `topojson.feature`, and draws the map with `d3.geoPath` and `geoNaturalEarth1`. An additional path element draws a circular outline defined through the projection. The visualization uses D3 v5 to bind country features to SVG paths, producing a static, styled geographic overview.

MMgk1255

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 ICE 8 geo map

This fork of the ICE 8 geo map renders a world map using D3.js (v5) and the TopoJSON library. It displays countries as green filled paths with white stroke outlines on a light blue sphere, using the Natural Earth 110m dataset loaded from the world-atlas package. The visualization employs D3’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON features, with the map output embedded as static SVG. The code explicitly calculates the sphere’s outline and fills each country path without interactivity or animation.

NNaimisha-M

86% match