Skip to main content
SimilarExport ZIP
100%

ICE_8

✓ Published1🌍 Public
Ddeepshikathakur111@gmail.com
Last edited Apr 12, 2026
Created on Apr 12, 2026
Forked from HTML Starter

This example displays a world choropleth map, coloring each country according to randomly generated sample data values. Countries appear in varying shades of blue, with hovering over a country turning it orange and revealing its specific value in a tooltip. The map uses D3 v7 with a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic paths with `d3.geoPath`. It loads TopoJSON country boundaries from the world-atlas package, converts them to GeoJSON, and applies a sequential color scale with `d3.scaleSequential` and `d3.interpolateBlues`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8_Map

This example shows a world map where countries are colored according to sample population data using a sequential blue color scale. Hovering over a country highlights it in orange, and moving the cursor away restores its original fill. The map is rendered as SVG with the `d3.geoNaturalEarth1` projection and `d3.geoPath` using TopoJSON data from world-atlas, while population values are mapped through `d3.scaleSequential` and `d3.interpolateBlues`.

Ggayathrisaxena23@gmail.com
91% match
Loading thumbnail…

ICE8_Map

This example presents a world map colored to display sample population data for a selection of countries, with a grayscale fill for regions without data. It loads country boundaries as TopoJSON from the world-atlas package and uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering, and a sequential color scale with d3.interpolateBlues to encode values. Interactive mouseover events highlight countries in orange, while the map is rendered as SVG with a bold title.

YYash Raj Mathur
91% 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
90% match
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
90% match
Loading thumbnail…

ICE8_ Map

This choropleth map displays population distribution across selected countries, using an orange sequential color scale to encode values from a CSV dataset. Built with D3.js v7 and TopoJSON, the visualization projects country boundaries with `d3.geoNaturalEarth1` and renders them as SVG paths via `d3.geoPath`. Hovering triggers a tooltip showing country ID and formatted population, while a gradient legend with an axis communicates the color scale. The base geometry comes from the world-atlas TopoJSON file, and countries without data appear gray.

Ssaitejak1619@gmail.com
89% match
Loading thumbnail…

ICE8 - World Map

This example displays a world map rendered with D3.js, using an orange fill for countries and blue for the ocean background. It draws country boundaries from the world-atlas TopoJSON dataset (countries-110m.json), converting the data into SVG paths via the `geoNaturalEarth1` projection and `geoPath` generator. The code also appends a circular outline over the sphere. Topojson’s `feature` API extracts geographies, and D3’s selection methods bind the data to path elements, with styling handled by CSS classes.

MMgk1255
89% match
Loading thumbnail…

ICE 8 world map

This example displays a world map rendered from TopoJSON country boundaries, with each country filled in light blue and outlined in blue. The visualization uses d3.geoPath with a d3.geoNaturalEarth1 projection to convert geographic data into SVG paths. It loads the worlddata.csv file from a GitHub gist, extracts the country features using the topojson.feature API, and maps them onto a 960x500 SVG canvas.

Ggayathri
88% match
Loading thumbnail…

ice 8_country

This example shows a choropleth world map of population by country, with darker blue shades indicating higher values and a gradient legend on the right. It uses d3.geoNaturalEarth1 and d3.geoPath to project and render country boundaries from a TopoJSON world-atlas dataset. Population values are loaded via d3.csv from a GitHub gist and mapped to a d3.scaleSequential with the interpolateBlues interpolator. Labels display three-letter country abbreviations, while d3.axisRight and a linearGradient define the legend.

Kkanaparthieshitha@gmail.com
88% match