Skip to main content
SimilarExport ZIP
100%

ice 8_country

✓ Published0🌍 Public
Kkanaparthieshitha@gmail.com
Last edited Apr 12, 2026
Created on Apr 12, 2026
Forked from ice 8

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 making map

This choropleth map shows global population by country in 2022, with darker blue shading indicating higher population counts. The visualization uses d3.geoNaturalEarth1 for the map projection and d3.geoPath to render country outlines from TopoJSON data loaded via the world-atlas package. Population values are joined to country geometries using CSV data from a GitHub repository, with missing countries shown in gray. A sequential square-root color scale (d3.scaleSequentialSqrt) maps population values to the interpolateBlues color scheme, and hovering reveals a tooltip with the exact population via appended `<title>` elements.

Aadithiarikatla@gmail.com
89% match
Loading thumbnail…

ICE_8

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`.

Ddeepshikathakur111@gmail.com
88% match
Loading thumbnail…

ICE 8 TASK 1.1

This choropleth map uses a Natural Earth projection to visualize population data for 20 countries, with darker blue shades representing higher values. The visualization loads world geometries from the world-atlas TopoJSON dataset via `d3.json` and merges CSV population data using a lookup dictionary. Countries are rendered as SVG paths using `d3.geoPath`, with missing data shown in light gray. A sequential blue color scale (`d3.scaleSequential`) and gradient legend communicate the population range, while a tooltip displays exact values on hover.

Uuguggila@gitam.in
88% 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
87% match
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
87% match
Loading thumbnail…

ICE 8 making map

This choropleth map shows estimated country populations for 2023, with darker blue-green shades representing higher population counts and gray indicating missing data. It uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries with `d3.geoPath` from TopoJSON data loaded with `d3.json`. Population values from a CSV file are mapped to a sequential color scale, and hover tooltips display each country’s name and population. A gradient legend with a linear scale shows the population range, all rendered as SVG using d3.v7.

Aadithiarikatla@gmail.com
87% match
Loading thumbnail…

ICE8-world-map

This world map visualizes population values for 20 countries using a sequential blue color scale, with lighter shades for smaller populations and darker shades for larger ones. Hovering over a country displays a tooltip with its name and population. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths from TopoJSON data, and d3.scaleSequential with d3.interpolateBlues for coloring. Population data comes from a local CSV file, while country boundaries load from the world-atlas TopoJSON collection.

SSai Charan
87% match
Loading thumbnail…

ICE-8 – World Map

This visualization displays a world map where each country is colored according to its population, using a sequential blue scale to encode population magnitude. Country areas without matching data appear gray. The map uses an equirectangular projection with `d3.geoPath`, drawing country boundaries from TopoJSON data from the world-atlas package. Population values from a CSV file are joined to country names, and the color scale uses `d3.scaleSequential` with `d3.interpolateBlues`. A continuous color legend is rendered using Canvas and `d3.axisBottom` for context.

Jjanisha30gowda@gmail.com
86% match