Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

100%

Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

✓ Published2🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

Forked from Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This interactive world map displays country boundaries on a natural Earth projection, with each country shaded in a sequential blue color scale and identified by name via a tooltip on hover. The visualization loads TopoJSON data from the world-atlas package, converts it to GeoJSON features using topojson-client, and renders the map as SVG paths via `d3.geoPath` with a `d3.geoNaturalEarth1` projection. The D3.js v7 code also implements interactive mouse events to show tooltips with country names.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This choropleth map uses a Yellow-Orange-Red sequential color scale to show population density values for a subset of countries, with denser regions appearing darker. It plots country shapes from the world-atlas TopoJSON file onto an SVG canvas using the D3.js `geoNaturalEarth1` projection and `geoPath()` generator. Population figures are loaded from a CSV file and stored in a JavaScript `Map` for lookup by country name, with missing or unknown countries rendered in a neutral gray. Hovering over a country triggers a tooltip that displays the country’s name and density value, and a legend with color swatches below the map communicates the scale.

Mmadalahyndavi123@gmail.com

88% match

Loading thumbnail…

Fork of ICE 08 11540905

This example presents an interactive world map using a geographic projection. It displays countries as colored regions with a blue sphere background, and hovering over a country changes its fill to red. The visualization is built with D3 v5 and TopoJSON, using `d3.geoEquirectangular` for the projection and `d3.geoPath` to render the map. Country boundaries and shapes come from the world-atlas dataset (countries-110m.json), with SVG paths styled via CSS classes.

GGogineni44

87% 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

87% match

Loading thumbnail…

Fork of ICE8 World Map

This visualization displays a world map using a natural Earth projection. The map renders country boundaries as paths, with a distinct sphere outline and yellow country fills. The code uses D3.js version 5.9.2, importing `geoNaturalEarth1` and `geoPath` for projection and drawing. Country data is loaded from a JSON file hosted on GitHub, with the TopoJSON library's `feature` function parsing the geometry. The SVG canvas is 960 by 500 pixels, and the visualization demonstrates basic path generation for geographical data.

TTulluripallavi

86% match

Loading thumbnail…

Fork of Fork of ICE-8 world map

This visualization presents a world map rendered as light green countries on a sky blue sphere, using a natural Earth projection to flatten the globe onto a two-dimensional SVG canvas. The map is built with D3 version 5, specifically using `select`, `json`, `geoPath`, and `geoNaturalEarth1` to handle the projection and drawing, while the TopoJSON library’s `feature` function extracts geographic boundaries from the remote worldmap dataset. The sphere is drawn first, followed by country paths, each stroked with semi-transparent black outlines. The SVG output is styled with CSS for the sphere and country fills, and the data is loaded from an external JSON source.

KKolliTeja

86% match

Loading thumbnail…

Fork of ICE-8 world map

This fork of an ICE-8 world map displays a natural Earth projection of the globe with a blue sphere and light pink country boundaries. The visualization uses d3.geoPath with the geoNaturalEarth1 projection to render the sphere and countries. It loads world map data from a GitHub-hosted TopoJSON file, which is processed with the topojson feature function to extract country geometries into SVG paths. The code relies on d3.v5 and topojson 3.0.2 libraries, rendering all map elements as SVG paths with low stroke opacity for country borders.

SSANEEM MOHAMMAD

86% match

Loading thumbnail…

Fork of Fork of ice8-vignesh

An interactive world map displays country boundaries loaded from world-atlas TopoJSON, rendered via d3.geoPath with SVG paths filled in blue. Users can drag to rotate the orthographic globe, zoom with d3.zoom, and click countries to switch projections between orthographic, Mercator, and Albers USA, with transitions animating the change. The SVG also includes a graticule and a black sphere outline.

SSANEEM MOHAMMAD

86% 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

86% match