Skip to main content
SimilarExport ZIP
100%

ice8

✓ Published0🌍 Public
Kkmohithkumar7@gmail.com
Last edited Nov 3, 2025
Created on Nov 2, 2025
Forked from ICE8 NIHA

A world choropleth colors countries by adult literacy rate from a local CSV, joined to country names in the world-atlas TopoJSON topology. The map uses D3's `d3.geoNaturalEarth1` projection with `d3.geoPath` for rendering, and a tooltip appears on hover. Interactive zoom and reset controls use `d3.zoom` with event transforms. Countries are stroked in dark blue and highlighted on hover, with a clickable legend and fit-to-screen button.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8

This example shows a world map highlighting individual countries in blue that turn red on hover, built with D3 v7 and TopoJSON. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country boundaries from the world-atlas dataset, with data loaded from a CDN via `d3.json`. The SVG rendering applies simple CSS classes for the hover interaction.

CCharith Kapuluru
85% match
Loading thumbnail…

ICE-8

A world choropleth maps country-level numeric values from a CSV file onto a natural Earth projection, using a plasma color scale and gradient legend to encode magnitude. The visualization links ISO numeric country codes to TopoJSON geometry from the world-atlas dataset, rendering with D3 v7’s `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.scaleSequential`. Hovering over a country reveals a tooltip with its name and value, while countries without data appear in a muted blue.

LLokesh
85% match
Loading thumbnail…

ICE8

This interactive world map visualizes country populations with a sequential YlGnBu color scale. It loads TopoJSON world boundaries via `d3.json` and population data from a CSV, then joins them through ISO country codes. The SVG map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render countries, with hover tooltips and an axis-labeled gradient legend built using `d3.scaleSequential` and `d3.axisBottom`. Missing values are shown in gray.

Ppashamsahithi2391@gmail.com
84% match
Loading thumbnail…

ICE8_WorldMap

This example displays a world map with countries colored by population estimates, using a green fill that darkens on hover and supports interactive zooming. Built with D3 v5 and the topojson library, it loads geographic data from the world-atlas package and renders paths via `d3.geoPath` with a Mercator projection. The visualization applies a linear color scale based on population values from a TSV data file, and includes zoom functionality through D3’s `d3.zoom` module.

Ssrividya-bachina
83% match
Loading thumbnail…

ICE8

This visualization displays a world map where each country is colored according to its population using a logarithmic rainbow color scale. The map is rendered as SVG using D3.js v7 with a Natural Earth projection and TopoJSON data loaded from world-atlas. Countries are drawn as paths using d3.geoPath, with colors assigned via d3.scaleSequentialLog and d3.interpolateRainbow based on population values from an embedded dataset. Hovering over a country triggers a tooltip showing additional information.

Ppashamsahithi2391@gmail.com
83% match
Loading thumbnail…

ICE-8-World-Map

This visualization displays a world map with countries rendered as black landmasses with gold outlines, all set against a blue spherical background. It uses `d3.geoPath` with the `geoNaturalEarth1` projection to draw the map, while the `topojson.feature` method converts the World Atlas TopoJSON data from the countries-110m.json file into GeoJSON features. The map also includes a hover effect that highlights individual countries in white.

Hhossaphul
82% match
Loading thumbnail…

ICE 8-1

This visualization displays a world map using the Natural Earth projection, with countries filled in pastel green and separated by white borders. The map loads country boundaries from the world-atlas TopoJSON dataset via d3.json, then converts them to GeoJSON features using topojson.feature. Each country path is rendered as an SVG element through d3.geoPath, and hovering reveals the country name through an appended SVG title tooltip. The code relies on d3.v7 and the topojson library for geographic data handling.

Aanirudhrao345@gmail.com
82% 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
82% match